How to setup domains and subdomains in localhost

I was developing a web app having multiple independent apps that meant to be run at different subdomains. So i wanted to mock this domain system in localhost.

Setup

For demo let assume, we have two apps running on ports 3000 (a NextJs Frontend) and 5000 (a ChatApp).

We need to add the all dns mapping to /etc/hosts file.

sudo nano /etc/hosts # linux, macos
notepad C:\\Windows\\System32\\drivers\\etc\\hosts # windows (Run cmd as Administrator)

Add the domains we need to the end of file. for example:

127.0.0.1 example.local
127.0.0.1 chat.example.local 

Install and import required packages

yarn init
yarn add express vhost http-proxy-middleware

const express = require('express');
const vhost = require('vhost');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

Create proxies for apps running on a NextApp running on port 3000

const nextAppProxy = createProxyMiddleware({
  target: 'http://localhost:3000',
  changeOrigin: true,
  ws: true,          // Add ws support
  logLevel: 'debug', // Add logging for debugging
});

Create proxy for app running on port 5000

const chatAppProxy = createProxyMiddleware({
  target: 'http://localhost:5000',
  changeOrigin: true,
  ws: true,         // Add ws support
  logLevel: 'debug' // Add logging for debugging
});

// Set up virtual hosts
app.use(vhost('example.local', nextAppProxy));
app.use(vhost('chat.example.local', chatAppProxy));

app.listen(80, () => {
  console.log('Vhost proxy server running on port 80');
});

Now the NextJs frontend will be accessible on address example.local and chat app will be at chat.example.local

Huraay 😍😍

Complete Code