React app is looking for static files in different location when using proxy

Question

I have used npx create-react-app my-app to create a react app.

The I used npm run build to build the app and deployed it using serve -s build

I'm using a proxy server to make my app publicly available.

My httpd configs looks like below,

/react_app http://192.168.1.100:3000

Whats really happening is once a request comes to http://<my public domain>/react_app I need to show my react app.

but the problem is it looks for the static files in http://<my public domain>/static/.. instead of http://<my public domain>/react_app/static/....

In my index.htmlI have set all absolute paths to relative paths as below,

ex:
<script src="./static/js/******.chunk.js"></script>
<link rel="manifest" href="./manifest.json"/>

But it didn't fix my issue. Are there any way to solve my problem?

Answer 1

Building for relative paths for create-react-app

There can be two places where you could define relative path

1) By default, Create React App produces a build assuming your app is hosted at the server root. To override this, specify the homepage in your package.json, for example:

  "homepage": "http://mywebsite.com/react_app",

This will let Create React App correctly infer the root path to use in the generated HTML file.

2) If you are using react-router@^4, relative path can be set using basename

<Router history={browserHistory} basename={'react_app'}>
  <Route path="/" component={App} />
</Router>

Hope that helps!!!