Implement Nuxt/Vue Micro-Service

Farhad Mehryari — Sat, 08 May 2021 08:46:40 +0000

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.

Front-End MicroService Architecture

Farhad Mehryari — Thu, 15 Apr 2021 06:51:51 +0000

Whenever I read about MicroService Architecture, it was for the back-end but today I will explain how to implement this architecture in the front end.

What should be considered as Service?

The first principle about microservice architecture indicates that each service should be independent of others so the first step is to separate independent parts of our front-end. One of the good approaches that we can separate our independent parts is considering layouts.

For example, consider a simple shopping website. Most authentication layouts including login, register, forget the password, etc differ from the home page so authentication pages could be considered as one of our services.

We will create a new Nuxt project which has the below pages:
(all are under /auth scope)

/login
/register
/forget-password
/confirm-email

We will create another Nuxt project that has other pages of our shopping such as home page, basket, product, categories, etc.

Up to here, we were able to decomposite our front-end into two services still we can move one more step forward and consider all pages under profile scope to be another service so we will create a new Nuxt project including the below pages:

/orders
/orders/view/:id
/addresses
/addresses/:id
/info
/info/update

How to run 3 projects?

At this point, we have 3 Nuxt projects that could be developed by different people and we need a parent router to keep these projects under one HTTP server and allocate requests to the project based on defined routes.

For example, when the browser hits

http://127.0.0.1:3000/auth/login

the router will assign this request to the first Nuxt project and when the URL is

http://127.0.0.1:3000/profile/orders

the outer will give this request to the last Nuxt project to handle it.

I'm developing this router and after publishing at npm I'll write a new post to explain how to use it

Advantages

you won't face the memory leak of watching a large number of files in development.
services could be in development or production mode independently
each service has its own assets
better teamwork experience
work one service A while others are in production mode and running.

Disadvantages

If you don't have a different layout it is useless
Based on the UI, maybe you have repeated components in different services
Maybe you have repeated peace of codes or functions (i.e function to generate random int between 2 number)

Final Notes

Implementing microservice architecture is recommended IF your project is on a large scale.

Thanks for your reading, It's just architecture and how to implement it.

here is the part II (implementing in nuxt project)
Any comments or criticisms are welcome

DEV Community: Farhad Mehryari

Implement Nuxt/Vue Micro-Service

Front-End MicroService Architecture

Farhad Mehryari ・ Apr 15 '21

Front-End MicroService Architecture

What should be considered as Service?

How to run 3 projects?

Advantages

Disadvantages

Final Notes