Implement Nuxt/Vue Micro-Service

Here I've explained the basics of micro-service architecture for the front end and how to choose your services.

Front-End MicroService Architecture

Farhad Mehryari ・ Apr 15 '21

#microservices #vue #nuxt #javascript

In this post, we consider a shopping website that has three main parts and we name it myshop.com.

• Account
• Shop
• Profile

Account service will mount on myshop.com/account that has the following routes

• /account/login
• /account/register
• /account/forget-password

Shop service will mount on myshop.com/shop that has the following routes

• /shop/products
• /shop/product/:id
• /shop/basket

Profile service will mount on myshop.com/profile that has the following routes

• /profile/orders
• /profile/edit-profile

As we discussed before each service will be a Nuxt project. for the first step, we will create 3 Nuxt projects.

I created in following directories

• /home/farhad/projects/nuxt-account
• /home/farhad/projects/nuxt-shop
• /home/farhad/projects/nuxt-profile

For the next step, we need a router to handle each request with desired Nuxt project.

I have developed this router and published it on npm.

let's install it and see how to use it.

create a new project
install geshniz-router package
create index.ts file and add the below code:

‍‍‍

import {NuxtService, App} from 'geshniz-router'

const app = new App(4000, '0.0.0.0')

const account = new NuxtService({
    evn: 'dev',
    name: 'Account',
    mountPath: '/account',
    rootPath: '/home/farhad/projects/nuxt-account/'
})

const shop = new NuxtService({
    env: 'dev',
    name: 'Shop',
    mountPath: '/shop',
    rootPath: '/home/farhad/projects/nuxt-shop'
})


const profile = new NuxtService({
    env: 'start',
    name: 'Profile',
    mountPath: '/profile',
    rootPath: '/home/farhad/projects/nuxt-profile'
})

app.registerService(account)
app.registerService(shop)
app.registerService(profile)

Then run it with

ts-node index.ts

or compile it with the tsc and run it with node.

Now If you check 127.0.0.1:4000/profile/orders, the response comes from the nuxt-profile project and as well as other requests.

let's explain App class and NuxtService class

App class instance accepts two parameters for creating a web server, Ports and hosts, respectively and has one method for registering NuxtService instance class in routes.

new NuxtService({
    env: '', // dev or start
    name: 'Profile', // only a name
    mountPath: '/profile', 
    rootPath: '/home/farhad/projects/nuxt-profile'
})

If you are working only on one service you can set others to be in production mode by setting env property to be 'start'
also, nuxt projects could out main project's directory.

After registering the new Nuxt service instance with the App class, all incoming requests for the mountPath route will be handled by this service.

I took the cover photo myself, a beautiful park in Tabriz.

Comments

[cnacorp]

That's cool. But how do you maintain cookies, local storage, etc ?. I think that's more the problem :).

[Farhad Mehryari]

@cnacorp
I haven't tested but as All of the nuxt instances running under one domain (http server) cookies must be shared.
I'll test it and let you know.

[Farhad Mehryari]

That's same :)