Error while serving two node server based frontend via reverse proxy - node.js

Question

I've a single domain and hence need to serve two different react applications running on two different node servers via nginx reverse proxy. Here is my nginx.conf file
server {
listen 80;
listen [::]:80;
client_max_body_size 128g; # allows larger files (like videos) to be uploaded.
location / {
proxy_pass http://192.168.0.105:8081;
}
location /admin {
proxy_pass http://192.168.0.105:8080;
}
}
What I am trying to achieve here is that if user lands on abc.com then he will be served react application from http://192.168.0.105:8081 while if user visits abc.com/admin he is served http://192.168.0.105:8080.
Both applications have different node servers serving react's bundle created by create-react-app. The node's server.js looks like this for both applications
const express = require("express");
const bodyParser = require("body-parser");
const path = require("path");
const cors = require("cors");
const app = express();
const qs = require("querystring");
const axios = require("axios");
const PORT = process.env.PORT || 8080;
const serverEnvironment = process.env.serverEnv || "dev";
app.use(cors());
app.use(express.static(path.join(__dirname, "build")));
app.use(bodyParser.json());
app.get("*", function(req, res) {
console.log("Requesting Admin UI");
res.sendFile(path.join(__dirname, "build", "index.html"));
});
app.listen(PORT, () => {
console.log(
`\nServer is being served in ${serverEnvironment} environment at port ${PORT}`
);
});
Everything works fine when I visit localhost:4000(4000 is port on which nginx is running) it serves me my expected portal. But when I visit localhost:4000/admin instead of serving admin application it ends up giving following error
Uncaught SyntaxError: Unexpected token '<' 2.0f3deea8.chunk.js:1
Uncaught SyntaxError: Unexpected token '<' main.a2e30dbb.chunk.js:1
When I checked network tab all the chunks of js and css are returning HTML instead of relevant js or css.
I also tried adding
location ~ .(static)/(js|css|media)/(.+)$ {
try_files $uri $uri/ /$1/$2/$3;
}
to nginx.conf but of no use. Am I missing something over here or is it not the correct way to reverse proxy 2 applications?

Answer 1

Are you seeing the content of index.html for your js/css in your network tab?
If yes, then it is usually caused by wrong base href in your index.html.
Try changing it to root.
<base href="/">
Other possible solution might be just adding this line to your nginx config.
include /etc/nginx/mime.types;

Answer 2

If you have base url /admin in node app too then proxy_pass should be to http://192.168.0.105:8080/admin; instead of http://192.168.0.105:8080;
Ideal scenario you can have your compressed react resource served from nginx at port 80 by copying it to html or any desired folder and just the different node apps proxied to different routes.

Answer 3

I would simply use a rewrite in your proxy location like:
server {
listen 80;
location / {
proxy_pass http://192.168.0.105:8081;
}
location /admin {
rewrite /admin/(.*) /$1 break;
proxy_redirect off;
proxy_pass http://192.168.0.105:8080;
}
}
With this configuration a user visiting /admin will be send to your admin ReactJS Application. The NGINX will rewrite the uri before submitting it to the upstream server.