Create-react-app: Changing script source of bundle.js, chunk.js, and main.chunk.js files

[m-czernek]

My question is similar to https://github.com/facebook/create-react-app/issues/6749.

When I view source of my app, I see the following:

<script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>

Can I change the source in any way?

The reason for this is deploying react app on Kubernetes, and re-writing URLs.

Right now, because the paths are absolute, my page won't load even if react router is configured correctly. So, on localhost, I can run my index from localhost/a, but the source of the three scripts is still served from localhost/. On kubernetes, / leads elsewhere, so files are not served, and the react app does not load.

Any thoughts on how I could work around the issue?

[m-czernek]

I have created the issue a bit too quickly. This seems to be solved quite easily in two steps:

1. Create basename in your router, e.g. <Router basename="/test">

2. In package.json, add a new entry: "homepage": "/test".

This now works, though you have to change the static files because %PUBLIC_URL% still points to /.

I'm keeping the issue open since there should be a way to add a path to %PUBLIC_URL%.

[Janaka-Steph]

This now works, though you have to change the static files because %PUBLIC_URL% still points to /.
I'm keeping the issue open since there should be a way to add a path to %PUBLIC_URL%.

Do you know that you can set PUBLIC_URL in a .env file?

[anirvann]

1. In package.json, add a new entry: "homepage": "/test".

You can solve the sub-directory routing problem by

1. Using a 'basename' prop in Router
2. Adding a PUBLIC_URL in your react scripts.
3. Dont need homepage, as you would config, PUBLIC_URL. [Adding a homepage entry in package.json means, you cannot configure different values for dev & prod]

You can also add some logic to detect NODE_ENV as 'dev' OR 'prod', to change the values you pass into basename & PUBLIC_URL. That way, your local development continues to work with routing from base [ /localhost ], and when deployed into prod, it will work from the sub-directory you configure in PUBLIC_URL.

Oh another quick note: Since we are using nginx to load a completely different app (read the routing one) in a /sub-dir, we had to add, a try_files entry in the location block for the sub-dir, so that nested routes load the same index.html & JS file and routing works properly.

P.S. - Sorry if this was repetitive information.

[m-czernek]

I finally had the time to re-test.

Not sure whether something changed in create-react-apps, or in Istio, but I can now change the base url without changing the static files. Thank you both. If I can replicate the issue again easily, I'll re-open this thread/file a new issue. Closing for now.

Cheers!