How to get relative paths in auto-generated index.html when using npm start

[raquelhortab]

Hi, I am wondering how to get the generated index.html to have relative paths rather than absolute paths when running npm start. I need the development environment to be able to be accessed through a proxy so that an url like https://domain.domain/whatever goes to myserver:3000, where the app is running.

Using the default configuration, npm start serves an index.htmlwith

<script defer src="/static/js/bundle.js"></script>

which results in wrong paths as the browser tries to retrieve bundle.js from https://domain.domain/static/js/bundle.js.
I found this and tried setting "start_url" in the manifest and "homepage":"." in package.json but it does not work. Curious enough, If I set something like "homepage":"whatever.com/whatever" it somehow takes it into account but still generates an absolute path:

<script defer src="/whatever.com/whatever/static/js/bundle.js"></script>

Thanks ahead for any help!

[raquelhortab]

I read it wasn't possible back in 2019. Does anyone know if this has been fixed?

[raquelhortab]

I have managed to make it generate <script defer src="/whatever/static/js/bundle.js"></script> by setting "homepage":"whatever" but it seems that it doesn't just modify the paths in index.html because now, requests to /whatever/static/js/bundle.js return the index.html itself, generating a Webpack error bundle.js:1 Uncaught SyntaxError: Unexpected token error

[raquelhortab]

I ended up setting a proxy.

Some context first:
We got the app in a docker container in a remote server. We access it through an iframe on our website. We got an nginx configuration that redirects example.mainserver.com/services-node-xxx/whatever to example.dockerserver:xxx/whatever. The problem was that webpack generated paths like <script defer src="/static/js/bundle.js">, which the browser tried to get from example.mainserver.com/static/js/bundle.js instead of example.mainserver.com/services-node-xxx//static/js/bundle.js.

So, the overall configuration that got it working is the following:

1. Set environment variable PUBLIC_URL (that works similar to "homepage" in package.json):
   PUBLIC_URL=/services-node-xxxx npm start this fixes the paths but makes it actually serve the files to /services-node-xxxx instead of the root.

Now we got
example.mainserver.com/services-node-xxx//static/js/bundle.js ---(nginx)---> example.dockerserver:xxx/static/js/bundle.js

2. Create a file in src named setupProxy.js:

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
        app.use(
            '/static',
            createProxyMiddleware({
                target: 'http://localhost:3000',
                pathRewrite:{
                    '/static':`/service-node-xxx/static`
                }
            })
        );
};

now we achieve this:
example.mainserver.com/services-node-xxx/static/js/bundle.js ---(nginx)---> example.dockerserver:xxx/static/js/bundle.js ---(proxy)---> /services-node-xxx/static/js/bundle.js ---> All good

Now the problem seems to be the websocket but at least the app is accessible.