[Archived] Handling multiple subdomains with nuxtJS and k-domains

Hello guys, After a long time, I'm back with another article to handle any number of subdomains in just a single nuxtJS project with the k-domains nuxt module. First of all, I would like to summarize you about nuxtJS, nuxtJS is a javascript framework for building web apps based on Vue.js so if you know Vue.js, nuxtJS is easy to go, with nuxtJS you can generate static sites, universal or server-side rendered apps or single-page applications SPAs with benefits of search engine optimization ( SEO ) and the entire Vue.js ecosystem. So let's get to the point, suppose you have to set up 3 sites of your own like this:

1. one for blogging,
2. second for projects
3. and one for your portfolio

but you want to have the same layout across these all and also have some shared components like feedback forms, comments and so… so how will you setup???

1. The first option is to create a monorepo for shared components or layouts and one project for each subdomain so you will require at least 4 projects.
2. The second thing you can do is to create 3 projects and copy-paste all those shared components across all the projects… but what if you change something ?? you will require it to copy-paste the same thing again in all those projects which is not a good idea…

So here is the solution, you can create sites for all those sites in just a single nuxtJS project, all your layouts, shared components, plugins, modules, and everything will live in one project. All you have to do is to install the nuxtJS module k-domains

yarn add k-domains # npm i k-domains

and configure it as follows:

export default {
  buildModules: [
    [
      "k-domains",
      {
        subDomains: [], // List of directories to hold the pages for your subdomains
        rootDomain: "root-domain", // directory to hold the pages for root domain
      },
    ],
    [
      "@nuxtjs/router",
      {
        keepDefaultRouter: true, // this line is mandatory...
      },
    ],
  ],
};

for example :

export default {
  buildModules: [
    [
      "k-domains",
      {
        subDomains: ["blog", "projects"],
        rootDomain: "main-domain",
      },
    ],
    [
      "@nuxtjs/router",
      {
        keepDefaultRouter: true, // this line is mandatory...
      },
    ],
  ],
};

and your project directory should look like this:

|
|─ pages
| ├───blog
| ├───projects
| └───main-domain

Now the pages in blog will be mapped to your blog subdomain, similarly the pages in projects directory will be mapped to projects subdomain, and that's all.

Now let's see the technicals.

So, the nuxtJS uses the /pages directory to generate the routes automatically but now we have to make changes to the routes, so basically the k-domains under the hood uses the @nuxtjs/router to extend or configure the filters the auto-generated routes based on your request.header.host.

newRoutes = options.routes.filter((route) => {
  // remove routes from other directories
  const toRemove = subdomains.filter((domain) => domain != routesDirectory);
  return !isUnderDirectory(route, toRemove);
});

and then it removes the subdomain name from the route.path and route.name so that the final URL will look like blog.example.com and not like example.com/blog and that's it, the @nuxtjs/router will take care of the rest things.

Testing locally

For testing locally, you don't need to configure anything else, it's always better if you edit your hosts files and configure your subdomains but that's not the case i tried locally on my windows machine and just entering blog.localhost or projects.localhost will also work ( but you should have blog and projects entry in your module configurations ) without any modifications to the hosts file, although i don't recommend this way, you can always play with your hosts file and according to your site.

Prerequisites

Although you don't need any special thing to get this to work, but in order to get the most of this module, your hosting provider should support wildcard subdomains, in my case i'm hosting it on heroku and heroku is configured with custom domain name and wildcard characters, or otherwise you could manually point to your subdomains, and that's all. but there's a twist i tried same thing on the vercel, configured the vercel for wildcard domains but anyhow it didn't worked, i tried all the possible ways to get the logs from vercel but unfortunately i was unable to access the runtime logs from the vercel, and that's why i later moved to heroku.

My setup

I'm using Heroku for hosting and have configured it to use a custom domain and all my subdomains are added there now with just one project on Heroku I'm hosting all those sites, here's the link to my website madhusudan.live and blog, there's no content yet but I'll soon update, that's all, thanks for reading this article, this is my first npm module so you are open for suggestions/feedbacks, thanks.

conclusion

Handling subdomains is a really difficult task, especially when you don't want to have the code repeated again and again at multiple places but want to maintain the same look and feel for your site, with the k-domains module, you can easily handle any number of subdomains in just a single nuxtJS project, and ultimately you get all the benefits, not only the shared components but also your plugins, custom filters, middlewares, server-side middlewares, global stylesheets, assets and everything else in your project will be accessible to all the subdomains without any issue.