You can set a root path for serving your React app in production using either of these two methods:
1. By setting a homepage property in your package.json file
Notice line 5:
{
"name": "reactTest",
"version": "0.1.0",
"private": true,
"homepage": "mywebsite/web",
"dependencies": {
"jquery": "^3.3.1",
"moment": "^2.22.1",
"react": "^16.4.1",
"react-datepicker": "^1.5.0",
"react-dom": "^16.4.1",
"react-month-picker": "^1.3.7",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
(see documentation)
2. Using the PUBLIC_URL environment variable
When running the build job, add the env var right before it, like this:
PUBLIC_URL=mywebsite/web npm run build
(see documentation)
What does it do?
These methods will not change the paths in the source map files, those will always be relative, but it will enable you to deploy your React app to your web server with an absolute path of your choosing.
It will result in the paths that include the JavaScript and CSS bundles in the generated index.html to be absolute, according to the value you have set:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="mywebsite/web/manifest.json">
<link rel="shortcut icon" href="mywebsite/web/favicon.ico">
<title>React App</title>
<link href="mywebsite/web/static/css/main.c17080f1.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="mywebsite/web/static/js/main.dbfd0e89.js"></script>
</body>
</html>
