Skip to main content

Microfrontends

Our technical stack includes the following technologies:

  • Frontend: ReactJS, Single SPA, React-Query, Connect, Zustan
  • Communication between Game Client, Frontend & Backend: gRPC-Web
  • Recommended IDE: VS Code
  • CLI: pnpm and fkit (Back Office KIT)

Architecture​

We built our Back Office on micro-frontend model via Single-SPA (A javascript router for front-end microservices)

First of all, you need to know some concepts:

And we need to know, The layout is built at our Back Office as below. Component We have 3 parts and we will build it to 3 independent components. Component Here, The 2 components: @nautilus/sidebar and @nautilus/header do not changed when route changes and only @nautilus/dashboard change.

Example:

  • Route: /dashboard -> load component @nautilus/dashboard
  • Route: /report -> load component @nautilus/report
  • Route: /games -> load component @nautilus/games

You can check it at this repo (we use JSON DOM Nodes to setup this layout for Back Office)

Goal​

Goal

We need a shell app, It's exists only to start up the single-spa applications.

To do this, the app has to:

  • Load applications from config
  • Register loaded applications with single-spa
  • Layout them with single-spa-layout

At BackOffice Repository, We have 2 repos which are shell app as: ibo and bo and a lot of other repos as Component

Goal

How to develop, test and debug component

The first, We need install some libs

Next, We need enable debug mode of import map, cause we will override component (module) in here. Open console on browser and run localStorage.setItem('devtools', true);. Then, Please reload the page. enable import map override

Create a new source code​

To a new source code, We will create a folder with a name (Ex: mypost). At mypost folder, we run: fkit

  • Choose app-spa
  • Input app name: mypost
  • Organization: nautilus
  • Run: pnpm i to install packages
  • Then, run: pnpm start to start project
  • Access to URL: http://localhost:8081 and check 2 places: URL and module name. Copy it.

Goal

Apply new module to Back Office​

Return Back Office page, open debug mode of import map. And click Add New module button. We add module name and URL on popup. Finally, click Apply button to apply it.

Goal

Run new module on Back Office​

To run the module after adding it. We add module name into layout of single-spa at shell app.

Goal

After that, We run project with comment: pnpm start. Add add URL of shell app to import map. Open debug mode of import map, find module name ibo and override this url: http://localhost:9000/nautilus-ibo.js

Goal

Finally, We reload page and result:

Goal