Member-only story
Implementing Micro Frontends Using Single SPA
In my previous article, I explained what micro frontends are and how they are useful. In this article, I will explain how we get to implement micro frontends to display various components in a single page using Single SPA, which is an MFE (micro frontend) framework.
What Is Single SPA?
Single SPA is a framework for bringing together multiple JavaScript MFEs in a frontend application. There are a lot of frameworks present, but this is one of the most popular micro frontends open source projects.
What Are We Going to Implement?
We’ll be implementing a simple application that consists of three apps, Vanilla JS, React, and Vue app, where each app performs incrementing and decrementing operations. We’ll also make sure we communicate between these apps, i.e., whenever we make changes in any app, the changes get reflected in the other apps as well. Keep in mind that when using MFE frameworks we should always make sure to use DOM/globals to interact, and not any Pub-Sub method.
Let's Dive In
Assuming that you already have nodeand npm installed in your machine, let’s proceed with the following steps.
Installing required packages
In order to run a server using npm scripts, I’ll first initialize my project directory with this command
npm init -yThis in turn will provide me a package.json file. We will not be creating a React app or Vue app using the CLI methods. Instead, we’ll implement everything manually.
To implement micro frontends, single-spa is one of the major packages required. For React, we’ll be requiring packages such as react, react-dom, single-spa-react. For Vue, we require two packages vue and single-spa-vue. And finally, we would require single-spa-html for vanilla JS. There are plenty of packages provided by single-spa. For our app, these packages will be sufficient. Run this command to install these dependencies.
npm install react react-dom single-spa single-spa-react single-spa-vue vue single-spa-html
