Search code examples
dockervue.jsconfigurationsubdomaindevops

Vue subdomain in development & production

I'm have following (abstract) project structure:

  • src/brands
  • src/admin
  • src/home

Brands & admin are a pure vue project, home is a nuxt project. I'm trying to get the brands & admin project to run on their own subdomain (brands.website.com & admin.website.com, respectively), and home on the main domain. The deploy to production/staging happens via docker (with an nginx image), and I was thinking to just copy a nginx config file from my project to the docker image to point the files in the dist folder to the correct html file (not sure how yet, I need to research that first).

For development, I used vue.config.js (since I'm using v3 of the vue cli) and I have setup the following:

index: {
  entry: 'src/index/main.js',
  filename: 'index.html',
},
brands: {
  entry: 'src/brands/main.js',
  filename: 'brands/index.html',
},
admin: {
  entry: 'src/admin/main.js',
  filename: 'admin/index.html',
},

I can reach the brands module via localhost:8080/brands, admin module via localhost:8080/admin and the homepage via localhost:8080, but the problem is that on my index page I'm gonna have a route that is /brands, so that would probably overwrite the brands module route with the page from nuxt (or vice versa). Now is my question if there is a better way of doing this (for example to enable subdomains in vue / localhost) and if not, is the way I'm wanting to copy the nginx config to my docker image a good practice? Or not?

Thanks in advance!

Solution

  • I have a similar project architecture. I have a single repo with multiple vue/nuxt projects. Each of my projects is its own npm/webpack project and is accessed by subdomain when developing locally.

    Based on your example, this is how I would setup the projects.

    Modify your hosts file:

    127.0.0.1 website.localhost brands.website.localhost admin.website.localhost

    Using localhost as the TLD was my personal decision, feel free to name the domains anyway you like.

    Configure webpack dev server to serve each project at the corresponding subdomain + port.

    Whats nice about this configuration is that your dev URLs match your production URLs. https://brands.website.localhost:8080 -> https://brands.website.com

    Each project will have complete control over the domain's subpaths and won't clobber other project's routes, which you alluded to with the /brands route.