BT

Facilitating the spread of knowledge and innovation in professional software development

Contribute

Topics

Choose your language

InfoQ Homepage News Micro-Frontends with single-spa

Micro-Frontends with single-spa

This item in japanese

Bookmarks

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.

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

  • Portlets

    by Javier Paniza,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    We used to call this concept Portlets. I hope this time the idea will success.

  • Re: Portlets

    by Richard Clayton,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    I may not remember correctly but didn't portlets (Java Portlets?) work from a single codebase (server installation/cluster)? The single SPA approach is supposed to be disparate web apps composed together as one single web app.

    The advantage of this approach (IMHO) is "independent releasability" of webapps. Teams can work on a section of the app without affecting other portions of a site. A well managed/organized team using feature flags could get away with a monolith.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.