I'm trying to serve different parts of my app on one server.

For instance, a user could visit,

http://app.my-site.com

or

http://admin.my-site.com

I'm using React on the frontend, conditionally producing the appropriate routes based on the subdomain, meaning I actually have one server serving one frontend that dynamically renders content.

When working with the webpack devserver, I'm able to enable this feature by adding the --allowed-hosts all option.

But then I build the project and try to serve it as follows:

app.register(require('fastify-static'), {
    root: path.join(__dirname, 'client', 'dist'),
});

app.setNotFoundHandler((request, reply) => {
    reply.sendFile(path.join(__dirname, 'client', 'dist', 'index.html'));
});

This works, but only locally (Heroku throws a 404 error).

After some research, I've found that express has a package for this purpose called express-subdomain. Is there a similar one for fastify or should I be doing something else entirely? After some research, I found answers online suggesting that I should add a CNAME for every subdomain I use.. which I could try, but I'm honestly just trying to understand why building my project works locally but not when deployed elsewhere.

I start the server like this:

 
 ​                ​app​.​listen​(​PORT​,​ ​'::'​,​ ​(​err​,​ ​address​)​ ​=>​ ​{ 
 ​                        ​if​ ​(​err​)​ ​throw​ ​err​; 
  
 ​                        ​app​.​log​.​info​(​`Server listening on port ​${​address​}​`​)​; 
 ​                ​}​)​;