Question: 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!

Answer: 
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.
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.***