Can I host the same react app at two different paths on my website?

Question

My current setup

• I have a website made with basic html+css. (say https://example.com )
• I have hosted a react app at https://example.com/register

To do so, I have set in my package.json

"homepage": "https://example.com/register/"

and on my App.js

<Router history={history} basename="/register">
</Router>

My NGINX looks like this:

server {
    listen 5400;
    access_log /var/log/nginx/wordpress-access.log;
    error_log /var/log/nginx/wordpress-error.log;
    location / {
        root /home/ubuntu/...../build/;
        index index.html;
        expires 1d;
        try_files $uri /index.html;
    }

}


server {
    listen 443 ssl;
    listen [::]:443;
    index  index.php index.html index.htm;
    server_name  example.com;
    location / {
        ... old setup
    }
    location /register {
         proxy_pass http://127.0.1.1:5400/;
    }
}

Here is what I want to do. I want to host the same react app at the url example.com/pricing .

How can I achieve this? I want to have the least duplication of code/logic etc.

Answer 1

One solution is to do two separate builds, one for /register and one for /pricing .

Instead of using the homepage field in your package.json to specify the root, you could use the environment variable PUBLIC_URL for that and add a custom environment variable called eg REACT_APP_BASENAME that you use for the basename prop of your Router .

<Router history={history} basename={process.env.REACT_APP_BASENAME}>

Your build scripts could then look like this:

"build:register": "PUBLIC_URL=https://example.com/register/ REACT_APP_BASENAME=/register node scripts/build.js",
"build:pricing": "PUBLIC_URL=https://example.com/pricing/ REACT_APP_BASENAME=/pricing node scripts/build.js"

Answer 2

This might not work for your particular setup, but react-router v5 has a new feature that allows for multiple matchers for the same component:

// Instead of this:
<Switch>
  <Route path="/users/:id" component={User} />
  <Route path="/profile/:id" component={User} />
</Switch>

// you can now do this:
<Route path={["/users/:id", "/profile/:id"]} component={User} />

https://reacttraining.com/blog/react-router-v5/#new-features