nginx – Nginx Multiple Directories with Static References

nginx

I have an Nginx server on which I want to host two seperate react apps, let's call them Aapp and Bapp.

The folder structure is like this

  • Aapp (directory)
    • index.html
    • script.js
    • style.css
  • Bapp (directory)
    • index.html
    • script.js
    • style.css
  • ..other files and directories

I then have my config file setup like this:

server {
  root home/user/Aapp;
  index index.html;
      
  location ^~ /Bapp {
    allow all;
    alias /home/user/Bapp;
  }
  ....
}

Visiting the url my-domain/Bapp is successfully showing index.html from the folder 'Bapp' but it is including the script.js and style.csss from 'Aapp' instead of the ones from 'Bapp'.

Is there a way to tell the server if the file request is coming from the Bapp folder, it should use the 'Bapp' folder files? or do I need to update it in my application build script? (not ideal as different environments may differ)

Best Answer

You need to handle setting the base URL for the application in application setting: https://stackoverflow.com/questions/48134785/how-to-set-a-base-url-for-react-router-at-the-app-level

Handling this issue cannot be done in a good way with nginx.