2

I want to separate hosting of my app and website. The hierarchy is as follows:

  • example.com - website hosted at DigitalOcean
  • example.com/* - SPA hosted at Firebase Hosting

Since DNS does not allow to point the subdirectories, is there any wiser way, to accomplish this?

Thanks in advance!

marson
  • 913
  • 10
  • 32
  • 1
    Have you thought about using a subdomain for either your website or app? I think this would be the cleanest solution: app.example.com pointing to firebase, example.com to DO (or the other way around) – Scarysize Mar 29 '20 at 11:44
  • Hi @Scarysize, thanks reaching out. We currently want to keep it flat, without a subdomain. Good example is Marvel – they have marvelapp.com as website and subdirectories for the app itself (marvelapp.com/projects etc.) – marson Mar 29 '20 at 11:51

2 Answers2

2

As the subdomain solution isn't favored, you could try a proxy like nginx to route traffic based on the path to different backends. An example configuration might look something like this:

server {
    listen       ...;
    ...
    location / {
        proxy_pass http://<your-website>;
    }

    location /app {
        proxy_pass http://<your-app>;
    }

    location /another-app {
        proxy_pass http://<another-app>;
    }
    ...
}

Source: https://gist.github.com/soheilhy/8b94347ff8336d971ad0

You may also want to check whether the Digital Ocean load balancer product offers path based routing.

Scarysize
  • 4,131
  • 25
  • 37
  • Thanks for your answer, I'm marking it as solved. Please check my solution below for a savvy approach ;) – marson Mar 30 '20 at 19:18
0

I ended up solving the problem via subdomains and decided to share this workaround.

1. DNS records as follows

www : pointing to website
* : root pointing SPA

2. In my Vue app I just added a simple window.replace to redirect from root to www.

if (window.location.host === 'example.com') window.location.replace('https://www.example.com');

--

Far from neat, but works just fine :)

I'm marking @Scarysize's answer as the solving one, since it's a more comprehensive solution.

marson
  • 913
  • 10
  • 32