How to Create and Manage Virtual Domains using Node.js

Thomas Sentre - Dec 15 '22 - - Dev Community

Imagine that you have two or more subdomains, and you want to serve two different web applications. However, you do not want to create a different web server application for each subdomain.

In this kind of situation, Node.js allows developers to manage virtual domains within a single web server application using vhost library.

In this post, we will learn how to create and manage virtual domains using Vhost.

What is Vhost ?

As already said, Vhost is a Node.js library that allows developers to manage virtual domains within a single web server application. It provides a configurable middleware function that accepts two arguments. The first one is the hostname. The second argument is the request handler which will be called when the hostname matches. The hostname follows the same rules as route paths do. They can be either a string or a regular expression.

Getting ready with Vhost

First, initialize the project by opening a terminal and running :

npm init
Enter fullscreen mode Exit fullscreen mode

Then, install the necessary dependencies by running:

npm install vhost express
Enter fullscreen mode Exit fullscreen mode

How to do it…

build two mini-applications using Router that will be served in two different sub-domains:

Create a new file named virtual-domains.js Include vhost NPM module. Then, initialize a new ExpressJS application:

import express from express
import vhost from vhost
const app = express()
Enter fullscreen mode Exit fullscreen mode

Define two routers that we will use to build two mini-applications:

const app1 = express.Router()
const app2 = express.Router()
Enter fullscreen mode Exit fullscreen mode

Add a route method to handle GET requests for path “/” in the first router:

app1.get('/', (req, res, next) => {
res.send('This is the main application.')
})
Enter fullscreen mode Exit fullscreen mode

Add a route method to handle GET requests for path “/” in the second router:

app2.get('/', (req, res, next) => {
res.send('This is a second application.')
})
Enter fullscreen mode Exit fullscreen mode

Mount our routers to our ExpressJS application. Serve the first application under localhost and the second under second.localhost:

app.use(vhost('localhost', app1))
app.use(vhost('second.localhost', app2))
Enter fullscreen mode Exit fullscreen mode

Listen on port 1337 for new connections:

app.listen(
1337,
() => console.log('Web Server running on port 1337'),
)
Enter fullscreen mode Exit fullscreen mode

Save the file

Open a terminal and run:

node virtual-domains.js
Enter fullscreen mode Exit fullscreen mode

To see the result, in your web browser navigate to:

http://localhost:1337/
http://second.localhost:1337/
Enter fullscreen mode Exit fullscreen mode

That is it! We have created two domains name related to the same server.

There’s more…

Vhost adds a Vhost object to the request object, which contains the complete hostname (displaying the hostname and port), hostname (without the port), and matching strings. These give you more control over how to handle virtual domains. For example, we could write an application that allows users to have their own sub-domain with their name:

Create a new file named user-subdomains.js

Include the vhost NPM module. Then, initialize a new ExpressJS application:

Import express from express
Import vhost from vhost
const app = express()
Enter fullscreen mode Exit fullscreen mode

Define a new router. Then, add a route method to handle GET requests on the path “/”. Use the vhost object to access the array of subdomains:

const users = express.Router()
users.get('/', (req, res, next) =
> {
const username = req
.vhost[0]
.split('-')
.map(name => (
name[0].toUpperCase() +
name.slice(1)
))
.join(' ')
res.send(`Hello, ${username}`)
})
Enter fullscreen mode Exit fullscreen mode

Mount the router:

app.use(vhost('*.localhost', users))
Enter fullscreen mode Exit fullscreen mode

Listen on port 1337 for new connections:

app.listen(
1337,
() => console.log('Web Server running
on port 1337'),
)
Enter fullscreen mode Exit fullscreen mode

Save the file

Open a terminal and run:

node user-subdomains.js
Enter fullscreen mode Exit fullscreen mode

To see the result, in your web browser, navigate to:

http://john-thomas.localhost:1337/
http://jx-huang.localhost:1337/
http://superman.localhost:1337/
Enter fullscreen mode Exit fullscreen mode

Conclusion

We did it! Now that you have known how to create and manage virtual domains, it’s your chance to create something amazing with it. Maybe a video conference application that allows users to have their own sub-domain with their room name.

You can find the complete source code for this small application in this repository.

THANK YOU FOR READING
I hope you found this little article helpful. Please share it with your friends and colleagues. Sharing is caring.

Connect with me on various platforms

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .