Create-react-app: Run with Relative Paths in development

[kimhanse]

It is possible to build for Relative Paths.

How would I do the same when running in development using npm start?

[kimhanse]

Just noticed my question seems to be a duplicate of #1582. I am reading it now.

[Timer]

Sorry this slipped through the cracks.
You don't have an option to serve this anywhere but the root in development until #1582 is resolved; it's planned for v2.0 right now. 😄

[kimhanse]

Hi @Timer, thanks for your reply.

Would it be possible to work around this issue by "ejecting" ?

[Timer]

@kimhanse not easily, no! The PR we have isn't complete yet -- you'd run into issues. There are other external factors which are not ready to support this yet (webpack-dev-server).

You could try to apply it by hand and see if it works for you, but it's doubtful.

[kimhanse]

Our solution was to eject and then modify some of the generated config files. It appears that this is working except that the web socket is still placed under root dir, and we can live with that in dev.

The changes we had to do to the configuration to move our application from / to /v2/ was:

diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
index 0047b70..e6ae8f9 100644
--- a/config/webpack.config.dev.js
+++ b/config/webpack.config.dev.js
@@ -14,11 +14,11 @@ const paths = require('./paths');

 // Webpack uses `publicPath` to determine where the app is being served from.
 // In development, we always serve from the root. This makes config easier.
-const publicPath = '/';
+const publicPath = '/v2/';
 // `publicUrl` is just like `publicPath`, but we will provide it to our app
 // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
-const publicUrl = '';
+const publicUrl = '/v2';
 // Get environment variables to inject into our app.
 const env = getClientEnvironment(publicUrl);

diff --git a/config/webpackDevServer.config.js b/config/webpackDevServer.config.js
index 0fb049d..211a2b8 100644
--- a/config/webpackDevServer.config.js
+++ b/config/webpackDevServer.config.js
@@ -75,6 +75,7 @@ module.exports = function(proxy, allowedHost) {
       // Paths with dots should still use the history fallback.
       // See https://github.com/facebookincubator/create-react-app/issues/387.
       disableDotRule: true,
+      index: '/v2/',
     },
     public: allowedHost,
     proxy,
diff --git a/package.json b/package.json
index 947a951..c559e00 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
   "name": "webapp2",
   "version": "0.1.0",
   "private": true,
+  "homepage": "/v2",
   "dependencies": {
     "autoprefixer": "7.1.2",
     "axios": "^0.16.2",

[Timer]

Correct, the websocket breaks. We hope to get this resolved soon!

[kimhanse]

Our workaround for the websocket issue is to have this in our nginx proxy config:

    location /v2/ {
      proxy_pass http://127.0.0.1:3000;
    }
    location /sockjs-node/ {
      proxy_pass http://127.0.0.1:3000;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
    }

[tommilligan-plutoflume]

Good to hear this is being worked on. Thanks for your help @kimhanse - I adapted your solution to use the existing PUBLIC_URL env var rather than hardcoding.

I also found that using react-hot-loader, I needed to add an nginx proxy for __webpack_dev_server__:

    location ~ ^/__webpack_dev_server__/ {
      proxy_pass http://127.0.0.1:3000;
    }