Search code examples
reactjssubdomain

How to support react js app for 2 different sub domains

I am a bit struggle with support to a react js to support 2 different subdomains. Followings are the subdomains I need my app to support

  • www-dev.somedomain/apps/myapp
  • app-dev.somedomain/myapp

As you can see, react-app-path is also changing with the subdomains. I have defined PUBLIC_URL and REACT_APP_PATH in my .env file as below.

REACT_APP_PATH=/myapp
GENERATE_SOURCEMAP=false
PUBLIC_URL=/myapp

With above env vars app-dev... URL is working. If I change to the path to apps/myapp then www subdomain in working. I need a way to support both subdomains at once

How can I achieve this?

Solution

  • Finally, I solved this problem with the following steps; I was using Nginx to be redirected to the same host. The problem I have was with the paths.

    • www-dev.somedomain/apps/myapp
    • app-dev.somedomain/myapp

    According to my Nginx configurations, both URLs were redirected to / in the server. Then the app couldn't find the static files because paths were different with domains. So to fix this, I did as below.

    • First, remove PUBLIC_URL from my env file. Then app files will be hosted at the / location
    • Added homepage attribute to package.json file. adding homepage will serve assets relative to index.html. Read more about homepage. Using `"homepage"` in package.json, without messing up paths for localhost
    • Since the app is using internal routing, I added simple Nginx rule to rewrite the location of static files as below. rewrite /static/(.*)$ /static/$1 break;

    This solved my problem with supporting two doamins.