Micro-frontend extends the concept of microservices to the frontend. The goal is to break down large single page applications (SPA) into smaller independent applications that can use different technologies and be developed and managed by separate teams. single-spa is a framework that helps developers achieve that goal by simplifying the composition of multiple front-end applications into a single product.
A single-spa project's architecture is usually composed out of three (or more) separate applications, each managed as a separate project using its own repository. These applications can either be configured manually or generated using the create-single-spa CLI tool provided.
The main part of every single-spa is the container or configuration project. It's a simple HTML/JavaScript application that orchestrates the individual micro-frontend projects' loading and unloading.
To manage the individual applications, developers can either use the built-in root-config.js and register each SPA to its designated route - or use the more advanced layout engine that enables more complex layout options.
The layout engine works very similarly to popular routing libraries, allowing developers to define a base template that contains multiple outlets, some of which can be constantly visible while others display based on the current route.
In the following example, taken from the official single-spa layout docs, you can see a common layout that demonstrates the different use cases with fixed header and footer SPAs as well as a dynamic container that changes the main content based on the URL.
<html>
<head>
<template id="single-spa-layout">
<single-spa-router>
<nav class="topnav">
<application name="@organization/nav"></application>
</nav>
<div class="main-content">
<route path="settings">
<application name="@organization/settings"></application>
</route>
<route path="clients">
<application name="@organization/clients"></application>
</route>
</div>
<footer>
<application name="@organization/footer"></application>
</footer>
</single-spa-router>
</template>
</head>
</html>
Static elements such as the footer and header can potentially integrate directly into the configuration application, though anything more complex should be managed as its own application.
The remaining SPAs can either be generated using the CLI tool, which currently supports Angular, React, Vue, and Svelte, or by manual configuring using the online guides.
The last step involves importing the new application within the configuration index.ejs file and adding (or uncommenting) any shared libraries that can be used across the different applications (such as zone.js for Angular applications).
Since single-app supports many different frameworks and setups, the installation process can be a little daunting, but the integration is quite smooth once the initial setup is complete.
Before implementing single-spa in production, it's recommended to read through the single-spa recommended setup that covers many of the pitfalls involving micro-frontends.
single-spa is open source software available under the MIT license. Contributions are welcome via the single-spa guidelines.
