Developing Micro Frontends With Single-Spa
See what Single-spa can do for you.
Join the DZone community and get the full member experience.Join For Free
In the process of building new or modernizing older applications, backend functionality is often broken down into multiple microservices. Without modular frontends though, applications often don’t gain the benefits of modern cloud-native architectures like continuous deliveries and the abilities to update components separately from each other.
In my previous article Using Micro Frontends in Microservices based Architectures, I explained how to modularize a sample e-commerce web application. This allows, for example, to add rating functionality to the catalog user experience without impacting other parts of the user interface.
The web application contains four user interface components (implemented with Vue.js) and two non-visible components.
Single-spa (which stands for single single page application) is a nice framework to build these modular web applications using a technique called micro frontends.
Single-spa is a rather lightweight framework. Let’s take a look at how it works.
In the index.html file, three essential things are done:
- Modules of the application are loaded
- Global dependencies are loaded
- The core layout of the application is defined
Additionally, the different user interface components of the application are registered.
The micro frontends can be implemented with basically all common web frameworks, vanilla JS or web components. Here is an example of how the navigator micro frontend has been built with Vue.js.
Definition of the public path:
Main.js file of the Vue.js application:
Single-spa comes with a built-in development tool. By default single-spa loads all components from the location defined in the index.html file. With the tool, you can also overwrite these locations.
This allows, for example, to load most parts of the application from object storage, file servers or web servers. The modules of the application developers are working on can be served locally via mechanisms like webpack.
The screenshot shows the development tool in the browser with which locations of modules can be overwritten.
In my next article, I’ll describe how modules in a Single-spa application can communicate via events.
To learn more about application modernization, check out my blog series in the GitHub repo.
Published at DZone with permission of Niklas Heidloff, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.