react.js - running npm run build with custom paths

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">

Following up on @patrick hund as the documentation location has moved and it appears some steps have changed. You can read here and interpret accordingly: advanced deployment in CRA.

You can find a bunch of good information in this page that can give you all sorts of ideas for your next project. Here is my favorite little trick after reading the page:

If you are not using the HTML5 pushState history API or not using client-side routing at all, it is unnecessary to specify the URL from which your app will be served. Instead, you can put this in your package.json: "homepage": ".", This will make sure that all the asset paths are relative to index.html. You will then be able to move your app from http://mywebsite.com to http://mywebsite.com/relativepath or even http://mywebsite.com/relative/path without having to rebuild it.


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>

Tags:

Npm Scripts

Reactjs

React Create App

Npm Run

Recent Posts