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