Asset prefix support #2901

martwana · 2017-09-04T11:05:02Z

This PR extends the support for assetPrefixing - based off the comments on this issue: #257

This is dependant on a change to the webpack-hot-middleware component. PR here: webpack-contrib/webpack-hot-middleware#245

Usage:
To use this, we have to set the assetPrefix in our next config.
We also need to set there server to listen on that path and use next as the request handler. For Example, if your assetPrefix is '/metro', then a line like this is needed in your server config.

server.use('/metro', app.getRequestHandler()) // where app is next

…om the window object

…s further down, when we are able to access assetPrefix

martwana · 2017-09-04T11:30:45Z

Tests will fail due to the change to webpack-hot-middleware not being merged.

albertkawmi · 2017-09-04T11:44:37Z

client/on-demand-entries-client.js

@@ -3,14 +3,20 @@
 import Router from '../lib/router'
 import fetch from 'unfetch'

+const {
+  __NEXT_DATA__: {
+    assetPrefix


Should this be assetPrefix = '' to use empty string in case window.__NEXT_DATA__.assetPrefix is undefined?

albertkawmi · 2017-09-04T11:45:34Z

client/webpack-hot-middleware-client.js

@@ -52,6 +52,18 @@ export default () => {
    }
  }

+  const {
+    __NEXT_DATA__: {
+      assetPrefix


As above comment, a default value might help?

Next takes care of this in: https://github.com/zeit/next.js/blob/fe1b3e89f1d6253726074ee21755422b0c664197/server/config.js#L11

martwana · 2017-09-06T11:16:33Z

@nkzawa @arunoda Hey, do you have any idea how quickly you think we could get this merged?

timneutkens · 2017-09-07T17:54:17Z

Reviewing this right now ❤️

timneutkens · 2017-09-08T20:30:45Z

Added the example for using the new feature 👌

timneutkens

This works really well. I've added an example showing how to use it. @arunoda we can merge this now 👌

arunoda

I like to know about what'll happen to the Router.push API and <Link />.

Do we need to handle it automatically or ask the user to do it.

We use assetPrefix to add CDN support. With the ^^^ comment, I think we need to introduce a new flag called basePath or something.

If the assetPrefix is defined, basePath will be overridden for assets.

arunoda · 2017-09-09T22:19:14Z

client/webpack-hot-middleware-client.js

@@ -1,4 +1,4 @@
-import webpackHotMiddlewareClient from 'webpack-hot-middleware/client?overlay=false&reload=true&path=/_next/webpack-hmr'
+import webpackHotMiddlewareClient from 'webpack-hot-middleware/client?autoConnect=false'


I think the overlay option needs use here.
See:

(Try to add a syntax error)

timneutkens · 2017-09-10T08:39:57Z

I like providing the basepath.

Do we need to handle it automatically or ask the user to do it.

In this case I guess it'd be expected that we do it. Similar to how react-router does it.

levino · 2017-10-13T13:35:37Z

Is this still being worked on?

timneutkens · 2017-10-13T13:55:51Z

@levino we're going to be actively working on this for next v5 👍

levino · 2017-10-13T15:20:21Z

Okay cool. Next.js is not really microservice ready without this. Will try out the beta version when helpful.

sharif9876 · 2017-10-13T15:35:15Z

@levino why not? What's your use case?

levino · 2017-10-13T15:54:59Z

@sharif9876

Lets say I build an app that has a chatroom and a profile view. So it will be something like:

Url	User story	technology	repo	docker image
http://app.levino.io/chatroom	A user can chat with other users	next.js	github.com/levino/chatroom	hub.docker.com/levino/chatroom
http://app.levino.io/about	A user can see terms of use	static markup	github.com/levino/about	na
http://app.levino.io/profile	A user can change their password	next.js	github.com/levino/profilePage	hub.docker.com/levino/profile

As far as I understand microservices, I should be able to basically hit a different microservice with a different code base running in a different container, potentially on a different host with each path. So I can compose an app that feels like one consistent backend monolith in lots of small codebases that can be deployed independently. In the example above maybe the chatroom has errors and crashes, but then the profile and the about page are still accessible.

Edit: Added docker image paths to make the example clearer that both next.js apps run in individual containers in prod.

podrivo · 2017-10-24T16:55:57Z

Do we have a workaround for this at the moment?

sharif9876 · 2017-10-24T17:21:56Z

@levino @podrivo Right now I don't think it's possible to host 2 next.js apps under the same domain (without using subdomains).

The main issue seems to be the /_next/ files that prevent this from working.

You can move your pages by putting them all in a directory. (e.g: App1 pages in 'pages/chatroom', App2 in 'pages/profile').

You can do something similar with your assets, and then putting an nginx infront to route '/static/chatroom' to the relevant app's static directory.

But we can't distinguish between /_next/ requests intended for each App. If there was a way to have it so that the /_next/ files could be served as /_next/chatroom/ then that would allow us to have a workaround (which is what is being worked on for next v5 I believe)

brunopontes-hotmart · 2017-10-25T00:24:14Z

@timneutkens Does your example work, Tim? I cloned this branch in order to do some tests but it's throwing 404 for _next folder files.

timneutkens · 2017-10-25T06:08:28Z

@bapontes make sure you build and link next. The example is based on core changes in this PR.

hnq90 · 2017-11-13T06:54:33Z

IMHO, it's better to add basePath config instead of assetPrefix.

levino · 2017-11-13T06:57:16Z

@hnq90 I agree. But even better would be enabling the feature soon... Anyone looking at this?

hnq90 · 2017-11-16T03:16:51Z

@martwana Are you still working on this PR? If not, could I continue to take it?

martwana · 2017-11-16T08:58:37Z

@hnq90 I stopped developing this when using basePath was suggested. It was more involved to change it to support that, and I'm not too familiar with JavaScript. We are currently running a forked version of Next.js from this branch in our applications.

The last I heard, this was going to be completed in Next v5. You're more than welcome to complete the work on it, but I'd suggest consulting with @timneutkens and @arunoda and the rest of the Next team, incase they have already done the work.

hnq90 · 2017-11-17T02:17:15Z

@timneutkens Hi, as @martwana mentioned above, is this feature already implemented? Or should I continue his work?

timneutkens · 2017-11-17T07:18:42Z

@hnq90 we're going to work on it for V5. We have a few ideas as to how to implement it 👍 Arunoda is going to work on it 👌

timneutkens · 2017-11-23T13:03:04Z

Going to close this for the implementation Arunoda is working on 👍

levino · 2017-11-23T14:13:49Z

Can you link the branch of that work?

arunoda · 2017-11-23T17:01:36Z

@levino it's work-in-progress and not ready yet.
But we'll have something interesting pretty soon.

tnulc · 2018-05-20T17:14:48Z

Asset prefixing doesn't work as expected for me. I have an example repo here. Run yarn dev, and everything works as expected. Run yarn dev:prefix and inspect the network tab, and this is the result:

I don't know if I'm misunderstanding how this is supposed to work, but it's stopping me from being able to deploy an app under a sub-path.

Looking at: https://github.com/zeit/next.js/blob/f2261050a0bc67e470dd18fa3fb70c507175012e/server/index.js#L192

Should all the urls in here not be prefixed with the asset prefix? I can patch it locally to make it work as expected.

damusnet · 2018-05-21T00:55:27Z

@kirisu Are network requests failing in your example because you are accessing http://localhost:3000 instead of http://localhost:3000/prefix? My understanding is that assetPrefix will only add the prefix to javascript assets loaded by next. It doesn't do anything to the dev server, the router/links, or static ressources such as images you could be loading in your app.

In order to have your local dev environment behave like the production environment - in a subfolder - here is an example server script / proxy you can use:

const express = require('express');
const proxy = require('http-proxy-middleware');
const next = require('next');

const assetPrefix = process.env.ASSET_PREFIX || "";
const proxyPort = parseInt(process.env.PROXY_PORT, 10) || 9000;
const nextPort = parseInt(process.env.NEXT_PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

const proxyServer = express();

proxyServer.use(
  '/',
  proxy({
    target: `http://localhost:${nextPort}`,
    pathRewrite: {
      `^/${assetPrefix}`: '/',
      '^/': '/404'
    }
  })
);

proxyServer.listen(proxyPort, proxyError => {
  if (proxyError) throw proxyError;

  app.prepare().then(() => {
    const nextServer = express();

    app.setAssetPrefix(`http://localhost:${proxyPort}/${assetPrefix}`);

    nextServer.get('/*', (req, res) => handle(req, res));

    nextServer.listen(nextPort, nextError => {
      if (nextError) throw nextError;
      console.log(`> Ready on http://localhost:${proxyPort}/${assetPrefix}`);
    });
  });
});

Run it with "dev": "NODE_ENV=development node server.dev.js", instead of "dev": "NODE_ENV=development next", in your package.json

It remains up to you to update a href and img src links to include the prefix.

timneutkens · 2018-05-21T07:33:03Z

Or use github.com/zeit/micro-proxy

damusnet · 2018-05-21T19:46:56Z

Hi @timneutkens

Actually, I tried that first, and for some reason I could never get it to work. Can you tell me what I'm doing wrong?

// rules.json
{
  "rules": [
    {
      "pathname": "/prefix",
      "method": ["GET", "POST", "OPTIONS"],
      "dest": "http://localhost:3000"
    },
    { "pathname": "/**", "dest": "http://localhost:3000/404" }
  ]
}

// next.config.js
module.exports = {
  assetPrefix: 'http://localhost:9000/prefix',
  exportPathMap: () => ({
    '/prefix': { page: '/index' }
  })
};

// package.json
{
  "scripts": {
    "dev": "micro-proxy -r rules.json -p 9000 & next"
  }
}

http://localhost:9000/prefix returns 200, but http://localhost:9000/prefix/_next/-/page/index.js is a 404, as is http://localhost:9000/concierge/static/images/icon.svg and other assets.

🤔

joshuaquek · 2018-12-04T04:24:13Z

I used:

In my routes.js file:

// ---- API Routes ----
const express = require('express')
const router = express.Router()

// -------- NextJs API Routes --------
router.get(`*`,  (req, res, next) => {
  return app.getRequestHandler()  // where app is nextjs app object
})

module.exports = router

In my server.js file:

const server = require('express')()
let routes = require('routes.js')
server.use('/my_custom_base_url', routes)

server.listen(port, (error) => { // Start server to listen on specified port
  if (error) throw error
  console.log('Server started.')  
})

and in my next.config.js file:

module.exports = {
  assetPrefix: '/my_custom_base_url'
  publicRuntimeConfig: { 
    staticFolder: `/my_custom_base_url/static`
  },
  webpack: (config) => {
    // Fixes npm packages that depend on `fs` module
    config.node = {
      fs: 'empty'
    }
    return config
  }
}

This fixed all of my routing issues and will make the base url of the entire nextjs webapp to have a base url of '/my_custom_base_url'

My version of NextJs is next@7.0.2

Hope this helps!

martwana added 5 commits September 4, 2017 09:22

Added assetPrefix to on-demand-entries-client - getting the prefix fr…

58e1d4e

…om the window object

changed resourceQuery to set autoConnect to false, and set the option…

f468fa4

…s further down, when we are able to access assetPrefix

remove trailing space

d166533

Added assetPrefix to webpackDevMiddlewareConfig path

33bddf2

General tidy-up

310f6e8

martwana mentioned this pull request Sep 4, 2017

Allow easier option configuration webpack-contrib/webpack-hot-middleware#245

Merged

albertkawmi reviewed Sep 4, 2017

View reviewed changes

albertkawmi approved these changes Sep 4, 2017

View reviewed changes

martwana added 2 commits September 6, 2017 10:02

Updated function name

f6572c6

Updated package.json to use new version of webpack-hot-middleware

aba0fb6

timneutkens self-requested a review September 7, 2017 17:54

Add example

d9ed153

timneutkens requested a review from arunoda September 8, 2017 20:55

timneutkens approved these changes Sep 8, 2017

View reviewed changes

timneutkens self-assigned this Sep 8, 2017

timneutkens mentioned this pull request Sep 9, 2017

Configuring public path for hot middleware reload #2914

Closed

arunoda suggested changes Sep 9, 2017

View reviewed changes

timneutkens mentioned this pull request Nov 12, 2017

assetPrefix does not work for all _next URLs #2759

Closed

timneutkens closed this Nov 23, 2017

joshuaquek mentioned this pull request Dec 4, 2018

Multiple Next apps on single domain will collide #257

Closed

lock bot locked as resolved and limited conversation to collaborators Dec 4, 2019

		@@ -1,4 +1,4 @@
		import webpackHotMiddlewareClient from 'webpack-hot-middleware/client?overlay=false&reload=true&path=/_next/webpack-hmr'
		import webpackHotMiddlewareClient from 'webpack-hot-middleware/client?autoConnect=false'

Asset prefix support #2901

Asset prefix support #2901

Conversation

martwana commented Sep 4, 2017 • edited Loading

martwana commented Sep 4, 2017

albertkawmi Sep 4, 2017

Choose a reason for hiding this comment

albertkawmi Sep 4, 2017

Choose a reason for hiding this comment

martwana Sep 4, 2017

Choose a reason for hiding this comment

albertkawmi Sep 4, 2017

Choose a reason for hiding this comment

martwana commented Sep 6, 2017

timneutkens commented Sep 7, 2017

timneutkens commented Sep 8, 2017

timneutkens left a comment

Choose a reason for hiding this comment

arunoda left a comment

Choose a reason for hiding this comment

arunoda Sep 9, 2017

Choose a reason for hiding this comment

timneutkens commented Sep 10, 2017 • edited Loading

levino commented Oct 13, 2017

timneutkens commented Oct 13, 2017

levino commented Oct 13, 2017

sharif9876 commented Oct 13, 2017

levino commented Oct 13, 2017 • edited Loading

podrivo commented Oct 24, 2017

sharif9876 commented Oct 24, 2017 • edited Loading

brunopontes-hotmart commented Oct 25, 2017

timneutkens commented Oct 25, 2017

hnq90 commented Nov 13, 2017

levino commented Nov 13, 2017

hnq90 commented Nov 16, 2017

martwana commented Nov 16, 2017

hnq90 commented Nov 17, 2017

timneutkens commented Nov 17, 2017

timneutkens commented Nov 23, 2017

levino commented Nov 23, 2017

arunoda commented Nov 23, 2017

tnulc commented May 20, 2018 • edited Loading

damusnet commented May 21, 2018 • edited Loading

timneutkens commented May 21, 2018

damusnet commented May 21, 2018

joshuaquek commented Dec 4, 2018 • edited Loading

martwana commented Sep 4, 2017 •

edited

Loading

timneutkens commented Sep 10, 2017 •

edited

Loading

levino commented Oct 13, 2017 •

edited

Loading

sharif9876 commented Oct 24, 2017 •

edited

Loading

tnulc commented May 20, 2018 •

edited

Loading

damusnet commented May 21, 2018 •

edited

Loading

joshuaquek commented Dec 4, 2018 •

edited

Loading