0

I have 2 react applications that I am trying to run locally.

For example:

  1. I have application number 1 that is login application that run on localhost:3000
  2. I need application number 2 to run on localhost:3001/portal <= this is a very simple application that does not even have a router baked into it.

My current solution is:

  • In application number one is:
BROWSER=none
HOST=localhost
PORT=3000

no homepage property in package.json file.

  • In application number 2 I go into package.json file and add homepage property. I set up my .env file as:
BROWSER=none
HOST=localhost
PORT=3001

Currently application does get locally deployed for development on https://localhost:3001/portal. However, when I navigate to it all I see is a blank page. I feel like I am missing something and application does not know where to serve files from.

What the set up should be to run 2 applications with on of them on a sub directory?

Improve this question

1 Answer 1

Reset to default
0

After longer research I found a thread where its explained in very detail how to accomplish that.

How should I configure create-react-app to serve app from subdirectory?

You should set up an environment variable in youe .env file like so:

HOST=localhost
PUBLIC_URL=/your-subfolder-name
PORT=3000 <== (this is optional, if you want your application to run on port. In my case I was running multiplle applications there for each application had different port).

After variables are set up and you are using any type of router, you will need to calculate your routes based of that relative paths. To get your default paths you can do it by doing so:

process.env.PUBLIC_URL; <== (This will return your variable value that you set up in .env file).

Because I am using rescripts package I had to change react-scripts package. version The minimal version I had to install in order for react to read PUBLIC_URL variable from .env was 3.4.1. The reason solution above did not work for me because rescripts version was lower than 3.4.1.

"react-scripts": "3.4.1",
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.