Deploying Multiple React apps to one domain

Support
, ,
1

After reading/troubleshooting from the follow and docs:

My Main Site: https://admiring-wing-cfb44b.netlify.app (accessible via zallen.dev)
React app in separate repo: https://sharp-lamport-4cdc38.netlify.app

I want to reach my react app when I navigate to zallen.dev/work/expense-tracker

I’m currently trying to do it with a netlify.toml that is on my main site.
[[redirects]]
from = “/work/expense-tracker/*”
to = “https://sharp-lamport-4cdc38.netlify.app/:splat”
status = 200
force = true

When I navigate to zallen.dev/work/expense-tracker
Expected:

  • the url should stay as zallen.dev/work/expense/tracker
  • expense tracker should be displayed

Actual:

  • blank page
  • network tab seems to show that the js chinks can’t be found
  • The browser tab title shows title from expense app but favicon from root app

Network tab: Imgur: The magic of the Internet

2

You need to tell create-react-app that your tracker is going to be hosted in a nested directory. Try adding "homepage": "https://zallen.dev/work/expense-tracker/" to the tracker app’s package.json file.

This should fix the paths for the tracker’s static files.

1 Like
3

You need to include a proxy for static files that does not force the redirect. I use this pattern in a couple projects. above your current redirect line, add this redirect:

from = “/work/expense-tracker/static/*”
to = “https://sharp-lamport-4cdc38.netlify.app/static/:splat”
status = 200
force = false

Also, inside your expense-tracker you should do ONE OF THESE (not both):

  • inside package.json add "homepage": "/work/expense-tracker/" attribute
  • add an environment variable PUBLIC_URL=/work/expense-tracker

(I use the Environment variable because it keeps development at the root.)