2

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.

Eric Cheng
  • 477
  • 1
  • 9
  • 24

4 Answers4

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
Nam Tran
  • 418
  • 3
  • 6
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

AKX
  • 152,115
  • 15
  • 115
  • 172
  • is `react-router-dom` a kind of client-side routing? my app used `Switch`, `Route`, and `useHistory` (for push, go to a new route). That's why I need to set up the homepage value for build I think. – Eric Cheng Apr 29 '21 at 10:38
  • Are you using `BrowserRouter` or `HashRouter`? – AKX Apr 29 '21 at 10:45
  • yes I am using HashRouter. My project is a Single Page App. So I think client-side routing is necessary for my app. Thanks anyway. – Eric Cheng Apr 29 '21 at 20:57
  • I just tested it (on a gitlab page) and it is OK! On top of that I use the line as the first header in public/index.html – Benjam Oct 09 '21 at 20:51
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

Younes Henni
  • 178
  • 1
  • 5
  • 1
    Thank you! this is the method most suitable for my situation! I have tried and this works for my deployment perfectly! Thanks for the help! – Eric Cheng May 09 '21 at 21:04
0

you can set homepage like this :

"homepage": "/"

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

i am davood
  • 175
  • 15