Hosting Angular and React App on a same domain using NginX
I have recently being trying to host a legacy angular app and the new React App on the same domain name. Although this seems as a trivial issue at first sight, I soon realized it not being as easy as it is said than done. This is a documentation of the issue encountered with the hope that it helps someone else trying to do the same.
Things this issue should fix:
- No Mix up between React and Angular code.
- Use the latest React Configuration(S.P.A) with live reloading and react router 4.
The reasons, for the above needs in my opinion were that since this was a migration, I was building a react app from ground up. For future proofing, if in future we ever had to migrate from react to a newer framework(for example Vue.js). I did not want someone to deal with having to migrate a jumbled mess of react and angular code. I also wanted to use things like react router with dynamic routing, which would other wise be problem if I mixed both the angular and react routers together.
TL;DR: I spent a lot of man hours trying to figure out a simple solution to this issue which I hope no one else has to go through.
The legacy angular 1 app which was hosted on a node js server and reverse proxied using a Nginx server. It used a Node API which was migrated from express to Koa2 by me. I wished to use the same api for the React App.
The solution to the above problem was to host both the react app and angular app on the same domain, but on different ports.
Although this seemed easy at first, The configuration was a pain in the ass.
Things that were required and problems faced were:
- Serve the angular app on the `/` url prefix and react app on `/b` prefix .
- Since the react app used webpack’s uglify, minify js, I had to serve the static files separately.
- Since I was using Nginx server to serve the app, I wanted to use react router’s html push state history to serve the dynamic url.
For #1, Added the location based routing change to / urls to go to angular app, /b to go to react app.
For #2, /static/ to go to the static files served in the react app folder with the following configuration.
rewrite ^/static/(.*)$ /static/$1 break;for #3, I had to modify the rewrite to not include the rest of the url.
rewrite ^/b/(.*)$ / break;Full Configuration for NginX server:
server {listen 80;server_name localhost;root html;index index.html index.htm;server_name example.com;location /static/ {proxy_pass http://localhost:8082/;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;rewrite ^/static/(.*)$ /static/$1 break;}location / {proxy_pass http://localhost:8081;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;}location /b/ {proxy_pass http://localhost:8082;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;rewrite ^/b/(.*)$ / break;}}
