npm build how to change package.json - homepage value by variable or script

Question

I created my app using create-react-app, and I use npm run build to build the production package.

I need to put the app on different clients' sites, each client put the app on a different sub-folder.

e.g.
client A: https://clientA.com/myApp
client B: https://clientB.com/UAT/myApp
client C: https://clientC.com/webApps/myApp

everytime when I build the package, for different sub-folders, I need to modify the homepage value in package.json, build the package and repeat this steps mulltiple times.

My manual steps like:

1. modify "homepage": "myApp" > npm run build > save the build folder for deployment
2. modify "homepage": "/UAT/myApp" > npm run build > save the build folder for deployment
3. modify "homepage": "/webApps/myApp" > npm run build > save the build folder for deployment
4. keep repeatly doing the above.....

how can I improve this situation? how can I do build once to fit all different paths?
such as, can I use a variable in homepage value and set it up in environment variable?

or, can I write a script to do some? I hope to simpify this compile steps, ideally to execute the build or a building script once.

Thanks for any help or suggestion.

Answer 1

You can simply build it once, and then use vim or any text editor to do the following operation on index.html: Replace ="/ with ="/myApp/ and ="/UAT/myApp/ and =/webApps/myApp/ in the three folders respectively. You can also use the sed utility to do that. Or maybe even automate it using a bash script.

It does work perfectly with Hash router

Answer 2

You can just set homepage to . if you're using CRA 9.0 or newer:

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.

– the documentation

Answer 3

You can use PUBLIC_URL environment variable when making build. The build command looks like:

PUBLIC_URL=https://clientA.com/myApp npm run build

You can create npm scripts to simplify it like:

{
  ...
  "scripts": {
    "build-clientA": "PUBLIC_URL=https://clientA.com/myApp react-scripts build",
    "build-clientB": "PUBLIC_URL=https://clientB.com/UAT/myApp react-scripts build",
  }
  ...
}

If you want to do one command to build for all of clients, simple bash script to build and move build folder should work fine, it looks like:

PUBLIC_URL=https://clientA.com/myApp react-scripts build && mv build clientA
PUBLIC_URL=https://clientB.com/UAT/myApp react-scripts build && mv build clientB

Answer 4

you can set homepage like this :

"homepage": "/"

and build project once and handle this server side and read all routes from index.html