Styjun

What could a reptilian race tell by candling their eggs?

If two black hole event horizons overlap (touch) can they ever separate again?

Can the passive "être + verbe" sometimes mean the past?

Does anyone know what these symbols mean?

Why transcripts instead of degree certificates?

Was it really unprofessional of me to leave without asking for a raise first?

Why is my line not appearing smooth?

What's the safest way to inform a new user of their password on my web site?

Why do the keys in the circle of fifths have the pattern of accidentals that they do?

How can I reduce the sound of rain on a range hood vent?

What's the easiest way for a whole party to be able to communicate with a creature that doesn't know Common?

Did Wakanda officially get the stuff out of Bucky's head?

Averting Real Women Don’t Wear Dresses

How to fix a dry solder pin in BGA package?

How did installing this RPM create a file?

Why won't the ground take my seed?

Inquiring about the possibility of a job

Questions about authorship rank and academic politics

Should I report a leak of confidential HR information?

Do space suits measure "methane" levels or other biological gases?

Symbol for "not absolutely continuous" in Latex

How can a valley surrounded by mountains be fertile and rainy?

Can I travel from Germany to England alone as an unaccompanied minor?

Are there any features that help with the roll to avoid the destruction of a Wand of Fireballs when using the last charge?

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

What is the difference between state and props in React?What's the difference between “super()” and “super(props)” in React when using es6 classes?Can you force a React component to rerender without calling setState?What is the difference between using constructor vs getInitialState in React / React Native?What is the difference between React Native and React?React Router with optional path parameterMultiple path names for a same component in React Routerreact router html5 pushstae with NginxHow to write NGINX config file to use ReactJS? (on Docker)how to setup nginx having react pwa in one folder and php apis in other?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

2

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.

reactjs react-router

share|improve this question

edited Mar 25 at 12:48

Ranjith Ramachandra

asked Mar 25 at 12:46

Ranjith RamachandraRanjith Ramachandra

4,44677 gold badges3535 silver badges7777 bronze badges

add a comment | 

2

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.

reactjs react-router

share|improve this question

edited Mar 25 at 12:48

Ranjith Ramachandra

asked Mar 25 at 12:46

Ranjith RamachandraRanjith Ramachandra

4,44677 gold badges3535 silver badges7777 bronze badges

add a comment | 

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.

reactjs react-router

share|improve this question

edited Mar 25 at 12:48

Ranjith Ramachandra

asked Mar 25 at 12:46

Ranjith RamachandraRanjith Ramachandra

4,44677 gold badges3535 silver badges7777 bronze badges

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

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

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/;
 

share|improve this question

edited Mar 25 at 12:48

Ranjith Ramachandra

asked Mar 25 at 12:46

Ranjith RamachandraRanjith Ramachandra

4,44677 gold badges3535 silver badges7777 bronze badges

share|improve this question

edited Mar 25 at 12:48

Ranjith Ramachandra

asked Mar 25 at 12:46

Ranjith RamachandraRanjith Ramachandra

4,44677 gold badges3535 silver badges7777 bronze badges

asked Mar 25 at 12:46

Ranjith RamachandraRanjith Ramachandra

4,44677 gold badges3535 silver badges7777 bronze badges

asked Mar 25 at 12:46

Ranjith RamachandraRanjith Ramachandra

4,44677 gold badges3535 silver badges7777 bronze badges

2 Answers
2

active

oldest

votes

2

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 e.g. 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"

share|improve this answer

answered Mar 25 at 14:40

TholleTholle

49k77 gold badges6262 silver badges8484 bronze badges

add a comment | 

0

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

share|improve this answer

answered Mar 25 at 18:33

worcworc

1,77033 gold badges2121 silver badges2828 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Thanks for your answer. I know about this but it won't work in my case because I am using alongside my existing website at a different location.
  
  – Ranjith Ramachandra
  Mar 25 at 18:43
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55338157%2fcan-i-host-the-same-react-app-at-two-different-paths-on-my-website%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

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 e.g. 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"

share|improve this answer

answered Mar 25 at 14:40

TholleTholle

49k77 gold badges6262 silver badges8484 bronze badges

add a comment | 

2

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 e.g. 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"

share|improve this answer

answered Mar 25 at 14:40

TholleTholle

49k77 gold badges6262 silver badges8484 bronze badges

add a comment | 

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 e.g. 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"

share|improve this answer

answered Mar 25 at 14:40

TholleTholle

49k77 gold badges6262 silver badges8484 bronze badges

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

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

share|improve this answer

answered Mar 25 at 14:40

TholleTholle

49k77 gold badges6262 silver badges8484 bronze badges

answered Mar 25 at 14:40

TholleTholle

49k77 gold badges6262 silver badges8484 bronze badges

answered Mar 25 at 14:40

TholleTholle

49k77 gold badges6262 silver badges8484 bronze badges

0

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

share|improve this answer

answered Mar 25 at 18:33

worcworc

1,77033 gold badges2121 silver badges2828 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Thanks for your answer. I know about this but it won't work in my case because I am using alongside my existing website at a different location.
  
  – Ranjith Ramachandra
  Mar 25 at 18:43
  

  
  
  
  

add a comment | 

0

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

share|improve this answer

answered Mar 25 at 18:33

worcworc

1,77033 gold badges2121 silver badges2828 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Thanks for your answer. I know about this but it won't work in my case because I am using alongside my existing website at a different location.
  
  – Ranjith Ramachandra
  Mar 25 at 18:43
  

  
  
  
  

add a comment | 

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

share|improve this answer

answered Mar 25 at 18:33

worcworc

1,77033 gold badges2121 silver badges2828 bronze badges

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

share|improve this answer

answered Mar 25 at 18:33

worcworc

1,77033 gold badges2121 silver badges2828 bronze badges

answered Mar 25 at 18:33

worcworc

1,77033 gold badges2121 silver badges2828 bronze badges

answered Mar 25 at 18:33

worcworc

1,77033 gold badges2121 silver badges2828 bronze badges