Micro-frontends are the future of frontend web development. Inspired by microservices, which allow you to break up your backend into smaller pieces, micro-frontends allow you to build, test, and deploy pieces of your frontend app independently of each other. Depending on the micro-frontend framework you choose, you can even have multiple micro-frontend apps — written in React, Angular, Vue, or anything else — coexisting peacefully together in the same larger app!

In this article, we’re going to develop an app composed of micro-frontends using single-spa and deploy it to Heroku. We’ll set up continuous integration using Travis CI. Each CI pipeline will bundle the JavaScript for a micro-frontend app and then upload the resulting build artifacts to AWS S3. Finally, we’ll make an update to one of the micro-frontend apps and see how it can be deployed to production independently of the other micro-frontend apps.

---

Overview of the Demo App

Demo app — end result

Before we discuss the step-by-step instructions, let’s get a quick overview of what makes up the demo app. This app is composed of four sub-apps:

1. A container app that serves as the main page container and coordinates the mounting and unmounting of the micro-frontend apps
2. A micro-frontend navbar app that’s always present on the page
3. A micro-frontend “page 1” app that only shows when active
4. A micro-frontend “page 2” app that also only shows when active

These four apps all live in separate repos, available on GitHub, which I’ve linked to above.

The end result is fairly simple in terms of the user interface, but, to be clear, the user interface isn’t the point here. If you’re following along on your own machine, by the end of this article you too will have all the underlying infrastructure necessary to get started with your own micro-frontend app!

Alright, grab your scuba gear, because it’s time to dive in!

---

Creating the Container App

To generate the apps for this demo, we’re going to use a command-line interface (CLI) tool called create-single-spa. The version of create-single-spa at the time of writing is 1.10.0, and the version of single-spa installed via the CLI is 4.4.2.

We’ll follow these steps to create the container app (also sometimes called the root config):

mkdir single-spa-demo

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

We’ll then follow the CLI prompts:

1. Select “single spa root config”
2. Select “yarn” or “npm” (I chose “yarn”)
3. Enter an organization name (I used “thawkin3,” but it can be whatever you want)

Great! Now, if you check out the single-spa-demo-root-config directory, you should see a skeleton root config app. We’ll customize this in a bit, but first let’s also use the CLI tool to create our other three micro-frontend apps.

#programming #web-architecture #micro-frontends #software-engineering #javascript