CODEWITHSUNDEEP
reactjssingle-page-applicationrouter
echen
echen

Reputation: 2072

Organizing and deploying multiple SPAs on the same domain

Imagine company ABC has two teams developing two SPA apps: app1, app2

each app has its own index.html and associated static assets, for example: build/ index.html main.js

This is run from: host1. app follows the same conventions

We would like:

Say there is a load balancer setup to perform the routing properly. What solution do I have for this kind of situation?

I tried to use https://github.com/zeit/serve (suggested by create-react-app) but there are tons of problems.

First, rewritePath feature does not work (entirely fails to do anything useful)

Second, I tried to put my static assets 1 layer deeper on the host, the request host1/app1 is a directory listing rather than the index.html page

Even after solving these issues through configs, there are still a ton of issues with React Router (SPA router) and authentication callbacks

What is the actual best practice for this scenario? I imagine it is a very common scenario. As I can see AWS's web console uses a similar approach for routing apps

Upvotes: 3

Views: 2773

Answers (2)

Fonzy
Fonzy

Reputation: 691

Basically you want a reverse-proxy like nginx to server two different sites at different URIs. The SPAs should not know about each other, because it should not concern them how they are reached, it's the job of the reverse proxy.

Basic config for nginx:

server {

  listen 80;
  listen [::]:80;

  server_name abc.com;

  location /app1 {

    rewrite /app1(/?(.*)) /$2  break;

    proxy_pass http://localhost:XXXX;
    proxy_http_version 1.1;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Connection "";
    proxy_set_header Host $host;
  }

  location /app2 {

    rewrite /app2(/?(.*)) /$2  break;

    proxy_pass http://localhost:YYYY;
    proxy_http_version 1.1;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Connection "";
    proxy_set_header Host $host;
  }
}

Of course this config misses important stuff like ssl, gzip, caching and so on, but it should give you and idea.

In this example, the SPAs could run in two different docker containers, reachable by ports XXXX and YYYY.

Hope this helps, lgG

Upvotes: 6

BryceH
BryceH

Reputation: 2798

What you’re looking for is a reverse proxy. any modern web server can do this including Nginx or Apache. The trick of it will be getting your rewrite routes just right which is what I suspect you’re running into with React.

Upvotes: 0

Related Questions