Skip to main content

Getting started with Micro-frontends Part 2

Creating a Micro-frontend application with a Single SPA framework

 

We will be discussing how to set up a micro frontend application using a framework called Single SPA in this article. 

Here the objective is to develop an application with the following three parts, Angular header, Vue page and React page.

 

SingleSPA framework

 

To start with SingleSPA framework you need to have Angular, Vue, and/or React development environments depending on the components you are using.

Let's start with running the following commands to create a folder called single-spa-demo and micro-root folder inside it. Then we will execute an npx command to start with single SPA.

 

mkdir single-spa-demo
cd single-spa-demo
mkdir micro-root
cd micro-root
npx create-single-spa

 

Now a directory for the new project will be asked for. I will choose the default directory by pressing enter. Here we are going to generate the application container or root config project inside the micro-root folder. So I will choose single-spa root config by using arrow keys. Then I have to choose a package manager. I will choose npm and use typescript as well by typing ‘y’. Later I’ll choose the single-spa Layout Engine by typing ‘y’. Then I have to give a name for the application. I will type single-spa-demo and continue.

 

 

Micro Frontends 2

 

After that, the relevant packages will be installed and we will be getting the following message indicating project initiation was successful.

 

                          

 

Now I will type npm install and later start the application by npm start command.

After starting the single spa root application, we can go to http://localhost:9000/ in the browser and the following screen will show up. That means root application is running properly.

 

 

Micro Frontends 4

 

 

Now we can create single spa micro applications and link them to root.

First, we will create a header component using the Angular framework. I will go to single-spa-demo folder and start the terminal from there. For Angular applications, there is no need to create a folder manually as the Angular command is creating a folder with the project name.

I will run single SPA by running;

 

npx create-single-spa.

 

At this juncture project directory will be the default and the type will be single-spa application / parcel. The framework can be selected as Angular and I will give micro-header as the project name. I will enforce stricter type checking by typing ‘y’. Since it is a simple application I will not use routing. So I will type ’n’.

Next, we can choose a stylesheet format. I will choose CSS. Then the application will be created with relevant packages. After that, it will ask whether to use anonymous data to improve. You can choose yes or no. Then it will ask whether you want to use Angular routing. I am saying "no". I am not using the browser animation either. 

 

 

Micro Frontends 5

 

 

 

Micro Frontends 6

 

 

After some time the following message will be displayed, indicating the project setup has been completed.

  

       

 

Now you can see a new folder named "micro-header" created inside the single-spa-demo folder. I will go there and run npm install. Now I have to run the following command to start the angular application. (not ng serve or npm start)

 

npm run serve:single-spa:micro-header

 

(If your 4200 port is already being used for any other application you can edit package.json to use another port. Then you have to use the correct port for the below URL). 

 

Now you can go to the above-mentioned URL using a browser to see the Angular application. For my case it is

http://single-spa-playground.org/playground/instant-test?name=micro-
header&url=%2F%2Flocalhost%3A4200%2Fmain.js&framework=angular

 

Now we will be redirected to our Angular application.

 

Micro Frontends 7

 

 

The next step is to register the header application in root-config. For that we need to access micro-root folder and add shared dependencies inside index.ejs file. Since we are using the angular framework we have to uncomment the following script line as the first step to load one instance of zoneJs file.

 

<!--

If you need to support Angular applications, uncomment the script tag
below to ensure only one instance of ZoneJS is loaded

Learn more about why at https://single-spa.js.org/docs/ecosystem-
angular/#zonejs

-->

<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/zone.min.js">
</script> -->

 

 

micro-root/index.ejs
                                                                                 micro-root/index.ejs

 

Then we can go to the Angular header application that we opened from the browser earlier, and click the Single-SPA icon in the bottom right corner.

 

                                                  

 

Here you can go to Root Configuration from the left menu and find the import script.

 

 

http://single-spa-playground.org/playground/root-config-guide
                                           http://single-spa-playground.org/playground/root-config-guide

 

 

Since we are in a development environment we can copy the link to the main.js file and add it to the imports in index.ejs file.

 

"micro-header": "//localhost:4200/main.js"

 

 

                                                                   micro-root/index.ejs

 

 

Now we can go to microfrontend-layout.html file and update the default route application to micro-header.

 

 

                        mirco-root/microfrontend-layout.html

 

At this moment if you go to http://localhost:9000/ you will see the Angular application is loaded successfully inside the SingleSPA container.

Now I will delete everything in app.component.html in the Angular application and paste the following code just to make a simple header row.

 

<div style="width: 100%; text-align: center; padding: 20px 0;
background-color: #D6002F; color: #ffffff;"> Header</div>

 

                            single-spa-demo/micro-header/src/app/app.component.html

 

 

Then refreshing the browser you will see the Angular header is loaded successfully.

 

 

 

 

Now we have to create two more applications, page-one and page-two. I will go to single-spa-demo folder and open the terminal from there. Here we will create page one as a Vue application. Since Vue does not create a folder, we have to create a folder manually. Therefore I will create a folder using mkdir and run the npx command again.

mkdir micro-page-one
cd micro-page-one
npx create-single-spa

I will use the default directory, ‘single-spa application / parcel’ and Vue. Then Organisation name can be given as ‘micro-page-one’. then I will choose merge from the target directory exists message and later choose default preset.

 

 

After a moment we will be getting the following message:

 

 

Now I will do npm install and run the application using given command.

 

npm install
npm run serve

 

If you go to the singleSPA playground URL mentioned just after creating the Vue app, you can see Vue app runs successfully.

(Default port for Vue app is port 8080. If this port is used for another application in your development environment it will run on a different port and that port will be shown just after running the serve command. You have to use the correct port in the playground URL. Here my Vue app is running on port 8081 so I will update the port in URL to 8081)

 

 



http://single-spa-playground.org/playground/instant-test?name=@micro-
page-one/micro-page-one&url=%2F%2Flocalhost%3A8081%2Fjs%2Fapp.js&framework=vue

 

Now we have to register the Vue app as well. We can go to root configuration from Single SPA playground and find the import script in the same way we found it in the Angular application. Then that import statement needs to be added to index.ejs in micro-root folder.

 

                          http://single-spa-playground.org/playground/root-config-guide

 

 

                                                                    micro-root/index.ejs

 

The next step is to place the application in the layout. For that, I will go to microfrontend-layout.html and place the application just below the micro header in the default route as I need to show page-one in the default route.

 

                                   micro-root/microfrontend-layout.html

 

Now we can see the Angular header and Vue body in http://localhost:9000/. I will delete everything and paste the following code in App.vue file in the micro-page-one just to make page one clearer; 

 

<template>

<div style="width: 100%; text-align: center; padding: 100px 0; background-color: #3FB27F; color: #ffffff;"> PAGE ONE</div>

</template>

 

 

                                                      single-spa-demo/micro-page-one

 

At this moment you will be able to see the Angular header and Vue page one in the default route.

 

 

The next part is to create the react application. React does not create a separate folder, therefore we need to create a folder manually. I will start the terminal from single-spa-demo folder and follow the same path and select react application.

mkdir micro-page-two
cd micro-page-two
npx create-single-spa

 

 

Later the following message will be displayed. 

 

 

Now I will run npm install and the run

 

npm start --port 8500

 

After that, I can go to the above-mentioned URL and see the react application. In my case it is,

http://single-spa-playground.org/playground/instant-test?name=@micro-
page-two/micro-page-two&url=8500

 

I will do a small modification in the root.component.tsx file to make it more clear. I just add the following line to the return statement.

return <section><div style={{ width: "100%", backgroundColor: 
"#18A1C6", padding: "100px 0", color: "#ffffff", textAlign:"center"
}} > Page Two</div></section>;

 

 

                                       ingle-spa-demo\micro-page-two\ root.component.tsx

 

 

Before registering the react application we need to add the following lines to the import statement in the index.ejs file

 

"react": 
"https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js",
"react-dom": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js",

 

We can add the application import statement as well by getting them in the same way as we did for Angular and Vue applications.

 

 

 

 

                                                                    micro-root/index.ejs

 

Now I will go to the microfrontend-layout.html and create a new route called page-two and add ‘header’ with ‘page two’ by the following code.

<route path="page-two">
<application name="micro-header"></application>
<application name="@micro-page-two/micro-page-two"></application>
</route>

 

                               micro-root/microfrontend-layout.html

 

The new path is added to the application and you can go to http://localhost:9000/page-two to see the second page.

 

 

 

Finally, we have Angular, Vue, and react projects inside the same application which are independent of each other. You can use this concept in any kind of micro frontend application development.

 

 

Conclusion

It is easy to stay with a monolith frontend for a simple project but when you are building a high complex frontend application in a distributed manner you can choose to go with micro frontends. It has a massive amount of benefits for such an application as mentioned above.

Thanks for reading! 😊


LEAVE A COMMENT







POST COMMENTS


© 2021 Creative Software. All Rights Reserved | Privacy | Terms of Use