React Micro-Frontend using monorepo and Single-SPA

Today, we will delve into the world of micro frontends and embark on crafting a straightforward micro frontend mono repo.

Micro frontend architecture is an innovative design approach wherein a frontend application is deconstructed into discrete, semi-independent "micro apps" that collaborate loosely. This concept of micro frontends draws inspiration from and is aptly named after the principles of microservices.

Benefits of Micro Frontends:

1. Sustained Adaptability Over Time and Compatibility with Emerging Technologies.
2. Empowerment of Autonomous, Team-Based Development.
3. Mitigation of Maintenance Burden on Frontend Applications.
4. Accelerated and More Reliable Application Testing.

Why Opt for a Monorepo?

Utilizing a mono repo simplifies the management process, as it requires only a single repository to house all micro frontends and microservices. This approach also facilitates code sharing among these micro frontends and ensures the use of a standard set of node modules for all micro frontends and microservices.

Let's commence the development process. Before you get into the detailed instructions, it's essential to provide a brief overview of the components of the demo app. This application comprises five sub-modules:

1. The micro-frontend-container functions as the primary page container and manages the mounting and unmounting of the micro-frontend apps.
2. The micro-frontend account is visible only when activated.
3. The micro-frontend product is visible only when activated.
4. The micro-frontend order is visible only when activated.
5. The micro-frontend-payment was visible only when activated.

Here are the step-by-step instructions:

1. You can install Node.js and npm on your system, with Node version v14.17.2 and npm version 6.14.13.
2. Globally install the 'lerna' package using the 'npm i -g lerna' command.
3. Create a new folder named 'Micro-Frontend_MonoRepo_SPA.'
4. You can just navigate to the 'Micro-Frontend_MonoRepo_SPA' folder.
5. Initialize 'lerna' within this folder.

After completing these steps, your folder structure should resemble the following.

6. We need to tell Lerna we’re using npm with workspaces, so add these one lines to lerna.json:

7. Creating Root Config:

To create a microfrontend app for this demo, we’re going to use a command-line interface (CLI) tool called create-single-spa.

Framework for bringing together multiple JavaScript microfontends in a frontend application

Run the command:

npx create-single-spa

And answer it like the following:

single-spa root config — App that contains the HTML (EJS) shared between the whole application and register apps. Is the one that orchestrates the micro frontend.

Next we’ll add a version to the /packages/container/package.json:

Add your organization name to the root’s /package.json file and add the following scripts:

following scripts:

8. npm run bootstrap

9. npm run start

Excellent! You will observe the default user interface as per the single-spa root configuration. Now, please pause the server and let's continue. You've created the container app, which serves as the default page. The container app will dynamically load various micro-frontends based on requirements."

10. Creating the Micro-Frontend Apps — accounts

Let’s, again, from the root directory, run:

npx create-single-spa

This time our answers will be:

Next add version & modify the start script of the new /packages/micro-frontend-account/package.json to include the port:

Now we have to inform our microfrontend-container that it should run this project. For that, we’ll add this line to the packages/container/src/index.ejs:

Next modify in ‘packages\container\src\microfrontend-layout.html’ change the application to our apps name

Update text in ‘packages\micro-frontend-account\src\root.component.tsx’ :

Ok, let’s try: npm run start

OutPut :

if you did everything right, you should be able to see your default page from mf-account.

if you try to open http://localhost:9001 you will see:

11. Creating the Micro-Frontend Apps — product

Let’s, create another micro-frontend mf-product with the same flow:

A. npx create-single-spa

B. Update \packages\container\src\index.ejs :

C. Update -/packages\micro-frontend-product\package.json :

D. Update -/packages\container\src\microfrontend-layout.html :

E. Update : /packages\micro-frontend-product\src\root.component.tsx :

F. Run : npm run start

G. Check — http://localhost:9000/product

12. Creating the Micro-Frontend Apps — order

Let’s, create another micro-frontend mf-order with the same flow:

A. npx create-single-spa

B. Update \packages\container\src\index.ejs :

C. Update -/packages\micro-frontend-order\package.json :

D. Update -/packages\container\src\microfrontend-layout.html :

E. Update : /packages\micro-frontend-order\src\root.component.tsx :

F. Run : npm run start

G. Check — http://localhost:9000/order

13. Final step — Adding routes in mf-account to load other micro-frontend :

A. first we need to install react-router-dom for a specific package => mf-account

lerna add react-router-dom — scope=@shopping/mf-account

C. Update code in \packages\micro-frontend-account\src\root.component.tsx :

D. Create file in C:\Users\DebasisDas\Desktop\Personal\Frontend\1.React\2.Micro-Frontend_MonoRepo_SPA\packages\micro-frontend-account\src:

\pages\home\index.tsx

E. Update code in packages\micro-frontend-account\src\pages\home\index.tsx:

F. Run project — npm run start: all micro frontend running now

G. http://localhost:9000/

• Default micro-frontend is container app.
• Container app will load micro-frontend depend on requirement.
• By default container app will load mf-account.
• <Go to product page> -> Will load mf-product
• <Go to order page> -> Will load mf-order
• <Go to payment page> -> Will load mf-payment

Congratulation …… you have developed micro-frontend web application.

Thanks