Microfrontend

🏃‍♂️ To give everyone the context this post will be based on the experiments which I used to run the multiple front-end applications under a vanilla js container app.

What is a Micro-frontend application?

This application is based on a single-spa framework that allows you to run multiple front-end applications under the same route. Things to notice related to the Micro-frontend app

  • Deploy the micro front-end applications independently.
  • Without re-writing the existing application, you can create a new application with the new framework.
  • Lazy loading the code base for improved performance.

Pre-requisites

  • Knowledge of any JavaScript framework
  • JavaScript
  • single-spa should be globally installed in your machine

Build the application

We will create three applications using the single-spa framework that are as follow:-

We will render the react and angular apps based on the routes. So if the route is

  • /react then react app will load
  • /angular then the angular app will load

Step 1:

Create a folder where you want to put all three applications together. Navigate to the root of the folder and run the following command and follow the instructions as provided in the image: https://gist.github.com/3bc8f0712107589dd7eeafa14acec987

The root-config setup will complete in sometime.

Step 2:

Now we will create a react application using the single-spa. So in the same root folder run the following command and follow the instructions as provided in the image: https://gist.github.com/055318e5259ea02713f9f6070b7d3d26

Step 3:

Now we will create a angular application using the single-spa. So in the same root folder run the following command and follow the instructions as provided in the image: https://gist.github.com/2e2ffb596ece8d10fccb5a2c5d5a848c

Few more agreements for the angular app 😀

You need to additionally install few dependencies for the angular project https://gist.github.com/8a4e6fda619ecdc8ab323dad21e1a44f

Step 4:

Now we will add few minor tweaks in the files present in our newly created projects :-

Step 5:

Run the applications

The root-config app will be running on http://localhost:9000

The react-app will be running on http://locahost:8080

The angular-app will be running on http://localhost:4200

Now when you navigate to http://localhost:9000 you should see

When you click on React you should see

When you click on Angular you should see

When the route changes the new application mounts and the previously loaded application unmounts.

GitHub Repositories for different applications

Resources to catch up with single-spa

Do let me know about your experience with single-spa, till then keep on learning new stuff and enjoy!!! 📖

Originally published at http://github.com.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nitin Reddy

Nitin Reddy

Seasoned JavaScript Developer who loves to explore other programming languages like Python. A problem solver, tech lover by heart🤩🚀🔬