NGINX proxy pass to React App not working - reactjs

Question

I want to run the following projects using NGINX under a single subdomain: http://localhost:3000 (Loopback API) and http://localhost:3006 (React Application)
Both applications are running under PM2. React App is running in production (using its generated build) with the command: 'pm2 serve build 3006'.
/etc/nginx/sites-available/default
server {
listen 80;
server_name subdomain.domain.com;
location / {
proxy_pass http://localhost:3006;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
try_files $uri /index.html;
}
location /api {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
Loopback project under location /api es working perfectly. The issue is with my React project under my / route. When I enter to subdomain.domain.com I just get a blank page. In the developer console I'm getting the following errors:
Using http://localhost:3006 to access my React App works perfectly fine with no console issues so I'm totally sure it is something related with nginx.
I have been investigating a lot about the incorrect MIME type being loaded, but my /etc/nginx/nginx.conf is already running with the following configuration:
http {
include /etc/nginx/mime.types;
}
I would really appreciate your help, thanks.

Answer 1

Are you using Create React App? By default, its build script assumes the app is going to be served in the root directory. To correctly serve React under a subdirectory, you need to specify homepage in your package.json file.
"homepage" : "http://example.com/your-subdirectory"
Additionally, you'll want to modify server/app.js to reflect this change.
app.use('/your-subdirectory/api', require('./api'));
Lastly, and most importantly, you'll want to set a basename for React Router as well.
const Routes = () => {
return (
<Router basename={'/your-subdirectory'}>
<div>
<Route exact path={`/`}component={App} />
</div>
</Router>
)
};

Answer 2

There is no need to use pm2 since they are static files and nginx is able to serve it by itself.
You just have to let nginx know where the files are.
server {
listen 80;
root /home/user/app/buld <--- LOCATION_OF_YOUR_BUILD
index index.html
server_name subdomain.domain.com;
location / {
try_files $uri /index.html
}
location /api {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}