Menu
Running npm run build command on react-create-app project creates a build folder and some default paths inside all files like in map files:
{"version":3,"sources":["../static/js/main.500cb0d9.js" ...
Can I change all the paths inside the build folder to match my BE, like
{"version":3,"sources":["mywebsite/web/static/js/main.500cb0d9.js" ...
package.json:
{
"name": "reactTest",
"version": "0.1.0",
"private": true,
"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"
}
}
659
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>
Check the permanent solution of this post, I believe this is the best convenient method:
https://github.com/facebook/create-react-app/issues/2575#issuecomment-452295290
For your convenience, I have copied and pasted here:
Create a file called .env at your project root(same place where package.json is located). In this file write this(no quotes around the url):
PUBLIC_URL=https://dsomething.cloudfront.net
Build your project as usual (npm run build) This will also generate index.html with:
<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
