From 59556d88866b62fa7091e022869a5b5cb50fa7ef Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 19 Mar 2024 20:22:41 +0000
Subject: [PATCH] deploy: d8cbffa8c03afe7676e6f1d4e1cb3b0b798232c8

---
 404.html                                                    | 2 +-
 assets/js/8ad4811d.241ae99a.js                              | 1 +
 assets/js/8ad4811d.cf78ded4.js                              | 1 -
 assets/js/b2f554cd.688862fe.js                              | 1 -
 assets/js/b2f554cd.d3168130.js                              | 1 +
 assets/js/fc03b22f.12f50ff3.js                              | 1 +
 assets/js/fc03b22f.1f91bdd5.js                              | 1 -
 .../{runtime~main.a89dcf8a.js => runtime~main.a280dc7d.js}  | 2 +-
 blog/2016/02/26/a-case-for-soa-in-the-browser/index.html    | 2 +-
 .../12/16/a-step-by-step-guide-to-single-spa/index.html     | 2 +-
 blog/2018/06/19/single-spa-parcels-explained/index.html     | 2 +-
 blog/2019/02/20/single-spa-inspector/index.html             | 2 +-
 blog/2020/02/24/single-spa-5/index.html                     | 2 +-
 blog/2023/08/22/single-spa-core-is-expanding/index.html     | 2 +-
 .../introducing-single-spa-new-core-team-members/index.html | 2 +-
 blog/2023/11/07/core-team-meeting-notes/index.html          | 2 +-
 blog/2023/11/27/single-spa-6/index.html                     | 2 +-
 blog/2023/12/12/core-team-meeting-notes/index.html          | 2 +-
 blog/2024/01/03/core-team-meeting-notes/index.html          | 2 +-
 blog/2024/02/14/core-team-meeting-notes/index.html          | 2 +-
 blog/2024/03/12/core-team-meeting-notes/index.html          | 2 +-
 .../03/18/top-5-microfrontend-hosting-solutions/index.html  | 6 +++---
 blog/archive/index.html                                     | 2 +-
 blog/atom.xml                                               | 4 ----
 blog/index.html                                             | 4 ++--
 blog/page/2/index.html                                      | 2 +-
 contributors/index.html                                     | 2 +-
 docs/4.x/api/index.html                                     | 2 +-
 docs/4.x/building-applications/index.html                   | 2 +-
 docs/4.x/code-of-conduct/index.html                         | 2 +-
 docs/4.x/configuration/index.html                           | 2 +-
 docs/4.x/contributing-overview/index.html                   | 2 +-
 docs/4.x/ecosystem-angular/index.html                       | 2 +-
 docs/4.x/ecosystem-angularjs/index.html                     | 2 +-
 docs/4.x/ecosystem-backbone/index.html                      | 2 +-
 docs/4.x/ecosystem-cycle/index.html                         | 2 +-
 docs/4.x/ecosystem-ember/index.html                         | 2 +-
 docs/4.x/ecosystem-html-web-components/index.html           | 2 +-
 docs/4.x/ecosystem-inferno/index.html                       | 2 +-
 docs/4.x/ecosystem-leaked-globals/index.html                | 2 +-
 docs/4.x/ecosystem-preact/index.html                        | 2 +-
 docs/4.x/ecosystem-react/index.html                         | 2 +-
 docs/4.x/ecosystem-riot/index.html                          | 2 +-
 docs/4.x/ecosystem-svelte/index.html                        | 2 +-
 docs/4.x/ecosystem-vue/index.html                           | 2 +-
 docs/4.x/ecosystem/index.html                               | 2 +-
 docs/4.x/examples/index.html                                | 2 +-
 docs/4.x/faq/index.html                                     | 2 +-
 docs/4.x/getting-started-overview/index.html                | 2 +-
 docs/4.x/glossary/index.html                                | 2 +-
 docs/4.x/migrating-angularJS-tutorial/index.html            | 2 +-
 docs/4.x/migrating-existing-spas/index.html                 | 2 +-
 docs/4.x/migrating-react-tutorial/index.html                | 2 +-
 docs/4.x/parcels-api/index.html                             | 2 +-
 docs/4.x/parcels-overview/index.html                        | 2 +-
 docs/4.x/separating-applications/index.html                 | 2 +-
 docs/4.x/starting-from-scratch/index.html                   | 2 +-
 docs/5.x/api/index.html                                     | 2 +-
 docs/5.x/building-applications/index.html                   | 2 +-
 docs/5.x/code-of-conduct/index.html                         | 2 +-
 docs/5.x/configuration/index.html                           | 2 +-
 docs/5.x/contributing-overview/index.html                   | 2 +-
 docs/5.x/create-single-spa/index.html                       | 2 +-
 docs/5.x/devtools/index.html                                | 2 +-
 docs/5.x/ecosystem-alpinejs/index.html                      | 2 +-
 docs/5.x/ecosystem-angular/index.html                       | 2 +-
 docs/5.x/ecosystem-angularjs/index.html                     | 2 +-
 docs/5.x/ecosystem-backbone/index.html                      | 2 +-
 docs/5.x/ecosystem-css/index.html                           | 2 +-
 docs/5.x/ecosystem-cycle/index.html                         | 2 +-
 docs/5.x/ecosystem-dojo/index.html                          | 2 +-
 docs/5.x/ecosystem-ember/index.html                         | 2 +-
 docs/5.x/ecosystem-html-web-components/index.html           | 2 +-
 docs/5.x/ecosystem-inferno/index.html                       | 2 +-
 docs/5.x/ecosystem-leaked-globals/index.html                | 2 +-
 docs/5.x/ecosystem-preact/index.html                        | 2 +-
 docs/5.x/ecosystem-react/index.html                         | 2 +-
 docs/5.x/ecosystem-riot/index.html                          | 2 +-
 docs/5.x/ecosystem-snowpack/index.html                      | 2 +-
 docs/5.x/ecosystem-svelte/index.html                        | 2 +-
 docs/5.x/ecosystem-vite/index.html                          | 2 +-
 docs/5.x/ecosystem-vue/index.html                           | 2 +-
 docs/5.x/ecosystem/index.html                               | 2 +-
 docs/5.x/examples/index.html                                | 2 +-
 docs/5.x/faq/index.html                                     | 2 +-
 docs/5.x/getting-started-overview/index.html                | 2 +-
 docs/5.x/glossary/index.html                                | 2 +-
 docs/5.x/layout-api/index.html                              | 2 +-
 docs/5.x/layout-definition/index.html                       | 2 +-
 docs/5.x/layout-overview/index.html                         | 2 +-
 docs/5.x/microfrontends-concept/index.html                  | 2 +-
 docs/5.x/migrating-existing-spas/index.html                 | 2 +-
 docs/5.x/module-types/index.html                            | 2 +-
 docs/5.x/parcels-api/index.html                             | 2 +-
 docs/5.x/parcels-overview/index.html                        | 2 +-
 docs/5.x/recommended-setup/index.html                       | 2 +-
 docs/5.x/separating-applications/index.html                 | 2 +-
 docs/5.x/shared-webpack-configs/index.html                  | 2 +-
 docs/5.x/single-spa-playground/index.html                   | 2 +-
 docs/5.x/ssr-overview/index.html                            | 2 +-
 docs/5.x/testing/e2e/index.html                             | 2 +-
 docs/5.x/testing/units/index.html                           | 2 +-
 docs/5.x/videos/index.html                                  | 2 +-
 docs/api/index.html                                         | 2 +-
 docs/building-applications/index.html                       | 2 +-
 docs/code-of-conduct/index.html                             | 2 +-
 docs/configuration/index.html                               | 2 +-
 docs/contributing-overview/index.html                       | 2 +-
 docs/create-single-spa/index.html                           | 2 +-
 docs/devtools/index.html                                    | 2 +-
 docs/ecosystem-alpinejs/index.html                          | 2 +-
 docs/ecosystem-angular/index.html                           | 2 +-
 docs/ecosystem-angularjs/index.html                         | 2 +-
 docs/ecosystem-backbone/index.html                          | 2 +-
 docs/ecosystem-css/index.html                               | 2 +-
 docs/ecosystem-cycle/index.html                             | 2 +-
 docs/ecosystem-dojo/index.html                              | 2 +-
 docs/ecosystem-ember/index.html                             | 2 +-
 docs/ecosystem-html-web-components/index.html               | 2 +-
 docs/ecosystem-inferno/index.html                           | 2 +-
 docs/ecosystem-leaked-globals/index.html                    | 2 +-
 docs/ecosystem-preact/index.html                            | 2 +-
 docs/ecosystem-react/index.html                             | 2 +-
 docs/ecosystem-riot/index.html                              | 2 +-
 docs/ecosystem-snowpack/index.html                          | 2 +-
 docs/ecosystem-svelte/index.html                            | 2 +-
 docs/ecosystem-vite/index.html                              | 2 +-
 docs/ecosystem-vue/index.html                               | 2 +-
 docs/ecosystem/index.html                                   | 2 +-
 docs/examples/index.html                                    | 2 +-
 docs/faq/index.html                                         | 2 +-
 docs/getting-started-overview/index.html                    | 2 +-
 docs/glossary/index.html                                    | 2 +-
 docs/index.html                                             | 2 +-
 docs/layout-api/index.html                                  | 2 +-
 docs/layout-definition/index.html                           | 2 +-
 docs/layout-overview/index.html                             | 2 +-
 docs/microfrontends-concept/index.html                      | 2 +-
 docs/migrating-existing-spas/index.html                     | 2 +-
 docs/module-types/index.html                                | 2 +-
 docs/next/index.html                                        | 2 +-
 docs/parcels-api/index.html                                 | 2 +-
 docs/parcels-overview/index.html                            | 2 +-
 docs/recommended-setup/index.html                           | 2 +-
 docs/separating-applications/index.html                     | 2 +-
 docs/shared-webpack-configs/index.html                      | 2 +-
 docs/single-spa-playground/index.html                       | 2 +-
 docs/ssr-overview/index.html                                | 2 +-
 docs/testing/e2e/index.html                                 | 2 +-
 docs/testing/units/index.html                               | 2 +-
 docs/videos/index.html                                      | 2 +-
 error/index.html                                            | 2 +-
 help/index.html                                             | 2 +-
 index.html                                                  | 2 +-
 languages/index.html                                        | 2 +-
 privacy/single-spa-inspector-privacy-policy/index.html      | 2 +-
 search/index.html                                           | 2 +-
 sponsors/index.html                                         | 2 +-
 users/index.html                                            | 2 +-
 versions/index.html                                         | 2 +-
 160 files changed, 159 insertions(+), 163 deletions(-)
 create mode 100644 assets/js/8ad4811d.241ae99a.js
 delete mode 100644 assets/js/8ad4811d.cf78ded4.js
 delete mode 100644 assets/js/b2f554cd.688862fe.js
 create mode 100644 assets/js/b2f554cd.d3168130.js
 create mode 100644 assets/js/fc03b22f.12f50ff3.js
 delete mode 100644 assets/js/fc03b22f.1f91bdd5.js
 rename assets/js/{runtime~main.a89dcf8a.js => runtime~main.a280dc7d.js} (98%)

diff --git a/404.html b/404.html
index 2478d7557..bf4e5a643 100644
--- a/404.html
+++ b/404.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/assets/js/8ad4811d.241ae99a.js b/assets/js/8ad4811d.241ae99a.js
new file mode 100644
index 000000000..5b7d54028
--- /dev/null
+++ b/assets/js/8ad4811d.241ae99a.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[3904],{7203:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>d,contentTitle:()=>o,default:()=>h,frontMatter:()=>r,metadata:()=>l,toc:()=>a});var i=s(4848),t=s(8453);const r={title:"Top 5 Microfrontend Hosting Solutions"},o="Top 5 Microfrontend Hosting Solutions",l={permalink:"/blog/2024/03/18/top-5-microfrontend-hosting-solutions",source:"@site/blog/2024-03-18-top-5-microfrontend-hosting-solutions.md",title:"Top 5 Microfrontend Hosting Solutions",description:"With rapid growth in recent years, microfrontends have become a popular solution with many companies, from large software organizations to small independent dev teams. Microfrontend hosting can get complicated quickly but it is a crucial aspect of scaling software organizations' development cycle. Whether companies are using single-spa, module federation, or any other microfrontends tools, the management of CI/CD pipelines, deployments, CDNs, and service discovery is something all companies will have to solve.",date:"2024-03-18T00:00:00.000Z",formattedDate:"March 18, 2024",tags:[],readingTime:7.18,hasTruncateMarker:!1,authors:[],frontMatter:{title:"Top 5 Microfrontend Hosting Solutions"},unlisted:!1,nextItem:{title:"March 2024 Core Team Meeting",permalink:"/blog/2024/03/12/core-team-meeting-notes"}},d={authorsImageUrls:[]},a=[{value:"Server-side versus client-side rendering",id:"server-side-versus-client-side-rendering",level:2},{value:"Low-level vs high-level hosting solutions",id:"low-level-vs-high-level-hosting-solutions",level:2},{value:"Solution comparison",id:"solution-comparison",level:2},{value:"1. Baseplate Cloud",id:"1-baseplate-cloud",level:2},{value:"2. Zephyr Cloud",id:"2-zephyr-cloud",level:2},{value:"3. AWS S3 + Cloudfront",id:"3-aws-s3--cloudfront",level:2},{value:"4. GCP Storage + Cloud CDN",id:"4-gcp-storage--cloud-cdn",level:2},{value:"5. Azure Storage + CDN",id:"5-azure-storage--cdn",level:2}];function c(e){const n={a:"a",code:"code",em:"em",h2:"h2",li:"li",ol:"ol",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.p,{children:"With rapid growth in recent years, microfrontends have become a popular solution with many companies, from large software organizations to small independent dev teams. Microfrontend hosting can get complicated quickly but it is a crucial aspect of scaling software organizations' development cycle. Whether companies are using single-spa, module federation, or any other microfrontends tools, the management of CI/CD pipelines, deployments, CDNs, and service discovery is something all companies will have to solve."}),"\n",(0,i.jsx)(n.p,{children:"So what\u2019s the most effective solution? Because microfrontend hosting is a relatively new space, most companies have a hard time knowing where to start. Fortunately, there are very good options out there, and unless you have a good reason to, you don\u2019t have to build it out yourself. Here you\u2019ll find a list of the best hosting solutions and the important factors you\u2019ll need to consider to make the decision."}),"\n",(0,i.jsx)(n.h2,{id:"server-side-versus-client-side-rendering",children:"Server-side versus client-side rendering"}),"\n",(0,i.jsxs)(n.p,{children:["This article focuses on hosting solutions for client-side rendered microfrontends, since the majority of microfrontend implementations rely solely on ",(0,i.jsx)(n.a,{href:"https://ferie.medium.com/what-is-the-client-side-rendering-and-how-it-works-c90210e2cd14",children:"client-side rendering"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://www.heavy.ai/technical-glossary/server-side-rendering",children:"Server-side rendering"})," of microfrontends often involves one or more docker containers that run ",(0,i.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/Node.js",children:"NodeJS"})," to render ",(0,i.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/React_(software)",children:"React"}),", ",(0,i.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/Angular_(web_framework)",children:"Angular"}),", or ",(0,i.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/Vue.js",children:"Vue"})," applications. For optimal performance, ",(0,i.jsx)(n.a,{href:"/docs/ssr-overview",children:"single-spa server rendering"})," also supports a single NodeJS runtime (rather than network requests between docker containers)."]}),"\n",(0,i.jsx)(n.p,{children:"If your organization uses server-side rendering, the following rankings will still apply but may require some additional consideration that isn\u2019t covered here."}),"\n",(0,i.jsx)(n.h2,{id:"low-level-vs-high-level-hosting-solutions",children:"Low-level vs high-level hosting solutions"}),"\n",(0,i.jsx)(n.p,{children:"Hosting microfrontends can be accomplished with lower-level cloud services (AWS, GCP, Azure, etc) or via microfrontend-specific cloud hosting solutions such as Baseplate Cloud and Zephyr Cloud. Lower-level services may be more affordable but require much more initial setup and ongoing maintenance. Higher-level microfrontend hosting solutions provide targeted features to streamline the hosting and development process."}),"\n",(0,i.jsx)(n.p,{children:"Companies who wish for sensible defaults and a straightforward implementation path may choose higher-level hosting solutions to save on DevOps and system admin costs. The additional built-in features of higher-level hosting solutions often reduce implementation time for companies migrating to or starting with microfrontends."}),"\n",(0,i.jsx)(n.h2,{id:"solution-comparison",children:"Solution comparison"}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.a,{href:"https://baseplate.cloud",children:"Baseplate Cloud"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.a,{href:"https://zephyr-cloud.io/",children:"Zephyr Cloud"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.a,{href:"https://aws.amazon.com/blogs/networking-and-content-delivery/amazon-s3-amazon-cloudfront-a-match-made-in-the-cloud/",children:"S3 + Cloudfront"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.a,{href:"https://cloud.google.com/cdn/docs/overview",children:"GCP Storage + Cloud CDN"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.a,{href:"https://learn.microsoft.com/en-us/azure/cdn/cdn-create-a-storage-account-with-cdn",children:"Azure Storage + CDN"})})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"Global availability"}),(0,i.jsx)(n.td,{children:"\u2713 (via Cloudflare)"}),(0,i.jsx)(n.td,{children:"\u2713 (Cloudflare / Netlify)"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsxs)(n.td,{children:["Web app hosting ",(0,i.jsx)("sup",{children:"1"})]}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsxs)(n.td,{children:["Environments support ",(0,i.jsx)("sup",{children:"2"})]}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsxs)(n.td,{children:["Autogenerated CI pipelines ",(0,i.jsx)("sup",{children:"3"})]}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"(planned)"}),(0,i.jsx)(n.td,{children:"\u2717"}),(0,i.jsx)(n.td,{children:"\u2717"}),(0,i.jsx)(n.td,{children:"\u2717"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"Automated microfrontend creation"}),(0,i.jsx)(n.td,{children:"\u2713 (via API and CLI)"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"Custom domains"}),(0,i.jsx)(n.td,{children:"\u2713 (via DNS records)"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsxs)(n.td,{children:["Route / layout management ",(0,i.jsx)("sup",{children:"4"})]}),(0,i.jsxs)(n.td,{children:["\u2713 (",(0,i.jsx)(n.a,{href:"/docs/layout-definition",children:"single-spa-layout template"}),")"]}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsxs)(n.td,{children:["Self-owned assets storage ",(0,i.jsx)("sup",{children:"5"})]}),(0,i.jsx)(n.td,{children:"\u2713 (optional bring-your-own-s3-bucket)"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsxs)(n.td,{children:["Edge-side HTML rendering optimizations ",(0,i.jsx)("sup",{children:"6"})]}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"(planned)"}),(0,i.jsx)(n.td,{children:"\u2717"}),(0,i.jsx)(n.td,{children:"\u2717"}),(0,i.jsx)(n.td,{children:"\u2717"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsxs)(n.td,{children:["Service discovery ",(0,i.jsx)("sup",{children:"7"})]}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"CORS / CSP / Cache Control"}),(0,i.jsx)(n.td,{children:"\u2713 (sensible defaults, fully customizable)"}),(0,i.jsx)(n.td,{children:"(planned)"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"Usage metrics"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"(planned)"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsxs)(n.td,{children:["Full audit trail ",(0,i.jsx)("sup",{children:"8"})]}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"Permissions management"}),(0,i.jsx)(n.td,{children:"\u2713 (comprehensive, including microfrontend ownership)"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsxs)(n.td,{children:["Shared dependency management ",(0,i.jsx)("sup",{children:"9"})]}),(0,i.jsx)(n.td,{children:"(planned)"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"Server rendering support"}),(0,i.jsx)(n.td,{children:"(planned)"}),(0,i.jsx)(n.td,{children:"(planned)"}),(0,i.jsx)(n.td,{children:"\u2717"}),(0,i.jsx)(n.td,{children:"\u2717"}),(0,i.jsx)(n.td,{children:"\u2717"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsxs)(n.td,{children:["Microfrontend marketplace ",(0,i.jsx)("sup",{children:"10"})]}),(0,i.jsx)(n.td,{children:"(planned)"}),(0,i.jsx)(n.td,{children:"(planned)"}),(0,i.jsx)(n.td,{children:"\u2717"}),(0,i.jsx)(n.td,{children:"\u2717"}),(0,i.jsx)(n.td,{children:"\u2717"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsxs)(n.td,{children:["Rolling deployments ",(0,i.jsx)("sup",{children:"11"})]}),(0,i.jsx)(n.td,{children:"(planned)"}),(0,i.jsx)(n.td,{children:"(planned)"}),(0,i.jsx)(n.td,{children:"\u2717"}),(0,i.jsx)(n.td,{children:"\u2717"}),(0,i.jsx)(n.td,{children:"\u2717"})]})]})]}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.em,{children:"Web apps hosting"})," refers to hosting the parent/root HTML file that initializes the microfrontends necessary for client-side rendering."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.em,{children:"Environment support"})," refers to hosting each microfrontend and web app on both internal test environments and live production environments. CI/CD Pipelines are configured to deploy to environments sequentially."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.em,{children:"Auto-generated CI pipelines"})," refers to generating configuration files for ",(0,i.jsx)(n.a,{href:"https://docs.github.com/en/actions/using-workflows",children:"Github workflow"}),", ",(0,i.jsx)(n.a,{href:"https://azure.microsoft.com/en-us/products/devops/pipelines",children:"Azure Pipelines"}),", ",(0,i.jsx)(n.a,{href:"https://docs.gitlab.com/ee/ci/",children:"Gitlab CI"})," and other CI/CD tools."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.em,{children:"Route / layout management"})," refers to managing the in-browser URL routes and DOM layout for microfrontends."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.em,{children:"Self-owned assets storage"})," refers to JS, CSS, HTML, font, and image files being stored within a bucket owned by the company implementing microfrontends, rather than by cloud hosting service."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.em,{children:"Edge-side HTML rendering optimizations"})," refers to dynamically changing the HTML file for a web app via code that runs in ",(0,i.jsx)(n.a,{href:"https://www.macrometa.com/articles/what-is-edge-side-rendering",children:"edge locations"}),". Since edge locations are physically closer to most users than an origin server, this provides maximum performance beneifts. Performance benefits include inlining import maps, ",(0,i.jsx)(n.code,{children:"<link rel=preload>"}),", and ",(0,i.jsx)(n.code,{children:"<script>"})," elements so that the browser begins downloading the necessary resources for the current URL as quickly as possible."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.em,{children:"Service discovery"})," refers to all available microfrontends easily cross-communicating with each other. This is often done via ",(0,i.jsx)(n.a,{href:"https://github.com/WICG/import-maps",children:"import maps"})," or other manifest files."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.em,{children:"Full audit trail"})," refers to logs for all deployments, infrastructure changes, and configuration changes within the microfrontends system."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.em,{children:"Shared dependency management"})," refers to externalizing or federating shared npm packages between microfrontends, to improve performance by only downloading and executing the code for them once within a web page."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.em,{children:"Microfrontend marketplace"})," refers to purchasing or installing pre-made microfrontends into a company's system."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.em,{children:"Rolling deployments"})," refers to introducing new code changes to a microfrontend to only a fraction of the userbase, to minimize impact of releasing bad code."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"1-baseplate-cloud",children:"1. Baseplate Cloud"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://baseplate.cloud/",children:"Baseplate Cloud"})," tops the list for its ease of use and specific focus on single-spa hosting. Because it was made by the creator of single-spa, Baseplate's features have been informed by years of microfrontend and single-spa consultancies, making it the easiest microfrontend hosting choice for single-spa. Everything about the product simplifies and automates as much of the complexity as possible, and it\u2019s hard to find advantages in other solutions that beat this fact. Baseplate will probably be the best choice for any company that is prioritizing a streamlined cloud hosting experience."]}),"\n",(0,i.jsx)(n.p,{children:"Baseplate's feature set automates the job functions of multiple software developers and frees up a lot of development resources without increasing the size of the development team. This easily offsets the cost of Baseplate's services."}),"\n",(0,i.jsx)(n.p,{children:"Baseplate supports the following features:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Web apps hosting"}),"\n",(0,i.jsx)(n.li,{children:"Custom domains for web apps and static assets"}),"\n",(0,i.jsx)(n.li,{children:"Unlimited deployable environments"}),"\n",(0,i.jsx)(n.li,{children:"Unlimited microfrontends"}),"\n",(0,i.jsx)(n.li,{children:"Autogenerated CI/CD pipelines"}),"\n",(0,i.jsx)(n.li,{children:"Full audit trail"}),"\n",(0,i.jsx)(n.li,{children:"Microfrontend-specific usage metrics"}),"\n",(0,i.jsx)(n.li,{children:"CORS, CSP, and Cache-Control configuration"}),"\n",(0,i.jsx)(n.li,{children:"Edge-side performance optimizations"}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Also of note, ",(0,i.jsx)(n.a,{href:"https://baseplate.cloud/docs/cdn/assets",children:"Baseplate CDN"})," is a source-available ",(0,i.jsx)(n.a,{href:"https://developers.cloudflare.com/workers/",children:"Cloudflare worker"})," designed for maximum performance and best practices. It is globally available at all ",(0,i.jsx)(n.a,{href:"https://www.cloudflare.com/network/",children:"Cloudflare edge locations"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"2-zephyr-cloud",children:"2. Zephyr Cloud"}),"\n",(0,i.jsxs)(n.p,{children:["From the creators of Module Federation, ",(0,i.jsx)(n.a,{href:"https://zephyr-cloud.io/",children:"Zephyr Cloud"})," is the premier hosting solution for module-federation-based microfrontends. It is currently in closed alpha with little publicly documented about its features."]}),"\n",(0,i.jsx)(n.h2,{id:"3-aws-s3--cloudfront",children:"3. AWS S3 + Cloudfront"}),"\n",(0,i.jsxs)(n.p,{children:["Amazon Web Services (AWS) offers the low-level cloud services necessary for companies to set up a microfrontends hosting solution. The most common microfrontends hosting solution within AWS often involves a ",(0,i.jsx)(n.a,{href:"https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-overview.html",children:"Cloudflare distribution"})," that acts as a public ",(0,i.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/Content_delivery_network",children:"CDN"}),", with a private ",(0,i.jsx)(n.a,{href:"https://aws.amazon.com/s3/",children:"S3 bucket"})," as the origin containing all static web files (Javascript, CSS, HTML) needed."]}),"\n",(0,i.jsx)(n.p,{children:"The advantage of using lower-level cloud hosting services is their initial lower costs\u2014however, that comes at the expense of increased setup and maintenance complexity compared to microfrontend-specific cloud hosting solutions."}),"\n",(0,i.jsx)(n.p,{children:"Implementation details will vary from company to company. It's common for each microfrontend's files to be stored within a (virtual) folder within the s3 bucket and the manifest or import map listing all microfrontends made available in a JSON file. Web apps using the microfrontends may have their own S3 bucket or be within the same S3 bucket."}),"\n",(0,i.jsx)(n.h2,{id:"4-gcp-storage--cloud-cdn",children:"4. GCP Storage + Cloud CDN"}),"\n",(0,i.jsxs)(n.p,{children:["Google Cloud Platform provides equivalent low-level cloud services to AWS. The same technical details that apply to AWS S3 + Cloudfront also apply to ",(0,i.jsx)(n.a,{href:"https://cloud.google.com/storage?hl=en",children:"GCP Cloud Storage"})," and ",(0,i.jsx)(n.a,{href:"https://cloud.google.com/cdn/docs/overview",children:"GCP Cloud CDN"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"5-azure-storage--cdn",children:"5. Azure Storage + CDN"}),"\n",(0,i.jsxs)(n.p,{children:["Azure Storage provides equivalent low-level cloud services to AWS. The same technical details that apply to AWS S3 + Cloudfront also apply to ",(0,i.jsx)(n.a,{href:"https://azure.microsoft.com/en-us/products/category/storage",children:"Azure Storage"})," and ",(0,i.jsx)(n.a,{href:"https://azure.microsoft.com/en-us/products/cdn",children:"GCP Cloud CDN"}),"."]})]})}function h(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>o,x:()=>l});var i=s(6540);const t={},r=i.createContext(t);function o(e){const n=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),i.createElement(r.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/8ad4811d.cf78ded4.js b/assets/js/8ad4811d.cf78ded4.js
deleted file mode 100644
index c8d768a52..000000000
--- a/assets/js/8ad4811d.cf78ded4.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[3904],{7203:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>d,contentTitle:()=>o,default:()=>h,frontMatter:()=>r,metadata:()=>l,toc:()=>a});var t=s(4848),i=s(8453);const r={title:"Top 5 Microfrontend Hosting Solutions",author:"Joel Denning",authorURL:"https://x.com/joelbdenning",authorImageURL:"https://avatars.githubusercontent.com/u/5524384"},o="Top 5 Microfrontend Hosting Solutions",l={permalink:"/blog/2024/03/18/top-5-microfrontend-hosting-solutions",source:"@site/blog/2024-03-18-top-5-microfrontend-hosting-solutions.md",title:"Top 5 Microfrontend Hosting Solutions",description:"With rapid growth in recent years, microfrontends have become a popular solution with many companies, from large software organizations to small independent dev teams. Microfrontend hosting can get complicated quickly but it is a crucial aspect of scaling software organizations' development cycle. Whether companies are using single-spa, module federation, or any other microfrontends tools, the management of CI/CD pipelines, deployments, CDNs, and service discovery is something all companies will have to solve.",date:"2024-03-18T00:00:00.000Z",formattedDate:"March 18, 2024",tags:[],readingTime:7.18,hasTruncateMarker:!1,authors:[{name:"Joel Denning",url:"https://x.com/joelbdenning",imageURL:"https://avatars.githubusercontent.com/u/5524384"}],frontMatter:{title:"Top 5 Microfrontend Hosting Solutions",author:"Joel Denning",authorURL:"https://x.com/joelbdenning",authorImageURL:"https://avatars.githubusercontent.com/u/5524384"},unlisted:!1,nextItem:{title:"March 2024 Core Team Meeting",permalink:"/blog/2024/03/12/core-team-meeting-notes"}},d={authorsImageUrls:[void 0]},a=[{value:"Server-side versus client-side rendering",id:"server-side-versus-client-side-rendering",level:2},{value:"Low-level vs high-level hosting solutions",id:"low-level-vs-high-level-hosting-solutions",level:2},{value:"Solution comparison",id:"solution-comparison",level:2},{value:"1. Baseplate Cloud",id:"1-baseplate-cloud",level:2},{value:"2. Zephyr Cloud",id:"2-zephyr-cloud",level:2},{value:"3. AWS S3 + Cloudfront",id:"3-aws-s3--cloudfront",level:2},{value:"4. GCP Storage + Cloud CDN",id:"4-gcp-storage--cloud-cdn",level:2},{value:"5. Azure Storage + CDN",id:"5-azure-storage--cdn",level:2}];function c(e){const n={a:"a",code:"code",em:"em",h2:"h2",li:"li",ol:"ol",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:"With rapid growth in recent years, microfrontends have become a popular solution with many companies, from large software organizations to small independent dev teams. Microfrontend hosting can get complicated quickly but it is a crucial aspect of scaling software organizations' development cycle. Whether companies are using single-spa, module federation, or any other microfrontends tools, the management of CI/CD pipelines, deployments, CDNs, and service discovery is something all companies will have to solve."}),"\n",(0,t.jsx)(n.p,{children:"So what\u2019s the most effective solution? Because microfrontend hosting is a relatively new space, most companies have a hard time knowing where to start. Fortunately, there are very good options out there, and unless you have a good reason to, you don\u2019t have to build it out yourself. Here you\u2019ll find a list of the best hosting solutions and the important factors you\u2019ll need to consider to make the decision."}),"\n",(0,t.jsx)(n.h2,{id:"server-side-versus-client-side-rendering",children:"Server-side versus client-side rendering"}),"\n",(0,t.jsxs)(n.p,{children:["This article focuses on hosting solutions for client-side rendered microfrontends, since the majority of microfrontend implementations rely solely on ",(0,t.jsx)(n.a,{href:"https://ferie.medium.com/what-is-the-client-side-rendering-and-how-it-works-c90210e2cd14",children:"client-side rendering"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://www.heavy.ai/technical-glossary/server-side-rendering",children:"Server-side rendering"})," of microfrontends often involves one or more docker containers that run ",(0,t.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/Node.js",children:"NodeJS"})," to render ",(0,t.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/React_(software)",children:"React"}),", ",(0,t.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/Angular_(web_framework)",children:"Angular"}),", or ",(0,t.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/Vue.js",children:"Vue"})," applications. For optimal performance, ",(0,t.jsx)(n.a,{href:"/docs/ssr-overview",children:"single-spa server rendering"})," also supports a single NodeJS runtime (rather than network requests between docker containers)."]}),"\n",(0,t.jsx)(n.p,{children:"If your organization uses server-side rendering, the following rankings will still apply but may require some additional consideration that isn\u2019t covered here."}),"\n",(0,t.jsx)(n.h2,{id:"low-level-vs-high-level-hosting-solutions",children:"Low-level vs high-level hosting solutions"}),"\n",(0,t.jsx)(n.p,{children:"Hosting microfrontends can be accomplished with lower-level cloud services (AWS, GCP, Azure, etc) or via microfrontend-specific cloud hosting solutions such as Baseplate Cloud and Zephyr Cloud. Lower-level services may be more affordable but require much more initial setup and ongoing maintenance. Higher-level microfrontend hosting solutions provide targeted features to streamline the hosting and development process."}),"\n",(0,t.jsx)(n.p,{children:"Companies who wish for sensible defaults and a straightforward implementation path may choose higher-level hosting solutions to save on DevOps and system admin costs. The additional built-in features of higher-level hosting solutions often reduce implementation time for companies migrating to or starting with microfrontends."}),"\n",(0,t.jsx)(n.h2,{id:"solution-comparison",children:"Solution comparison"}),"\n",(0,t.jsxs)(n.table,{children:[(0,t.jsx)(n.thead,{children:(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.th,{}),(0,t.jsx)(n.th,{children:(0,t.jsx)(n.a,{href:"https://baseplate.cloud",children:"Baseplate Cloud"})}),(0,t.jsx)(n.th,{children:(0,t.jsx)(n.a,{href:"https://zephyr-cloud.io/",children:"Zephyr Cloud"})}),(0,t.jsx)(n.th,{children:(0,t.jsx)(n.a,{href:"https://aws.amazon.com/blogs/networking-and-content-delivery/amazon-s3-amazon-cloudfront-a-match-made-in-the-cloud/",children:"S3 + Cloudfront"})}),(0,t.jsx)(n.th,{children:(0,t.jsx)(n.a,{href:"https://cloud.google.com/cdn/docs/overview",children:"GCP Storage + Cloud CDN"})}),(0,t.jsx)(n.th,{children:(0,t.jsx)(n.a,{href:"https://learn.microsoft.com/en-us/azure/cdn/cdn-create-a-storage-account-with-cdn",children:"Azure Storage + CDN"})})]})}),(0,t.jsxs)(n.tbody,{children:[(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:"Global availability"}),(0,t.jsx)(n.td,{children:"\u2713 (via Cloudflare)"}),(0,t.jsx)(n.td,{children:"\u2713 (Cloudflare / Netlify)"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{children:["Web app hosting ",(0,t.jsx)("sup",{children:"1"})]}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{children:["Environments support ",(0,t.jsx)("sup",{children:"2"})]}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{children:["Autogenerated CI pipelines ",(0,t.jsx)("sup",{children:"3"})]}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"(planned)"}),(0,t.jsx)(n.td,{children:"\u2717"}),(0,t.jsx)(n.td,{children:"\u2717"}),(0,t.jsx)(n.td,{children:"\u2717"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:"Automated microfrontend creation"}),(0,t.jsx)(n.td,{children:"\u2713 (via API and CLI)"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:"Custom domains"}),(0,t.jsx)(n.td,{children:"\u2713 (via DNS records)"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{children:["Route / layout management ",(0,t.jsx)("sup",{children:"4"})]}),(0,t.jsxs)(n.td,{children:["\u2713 (",(0,t.jsx)(n.a,{href:"/docs/layout-definition",children:"single-spa-layout template"}),")"]}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{children:["Self-owned assets storage ",(0,t.jsx)("sup",{children:"5"})]}),(0,t.jsx)(n.td,{children:"\u2713 (optional bring-your-own-s3-bucket)"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{children:["Edge-side HTML rendering optimizations ",(0,t.jsx)("sup",{children:"6"})]}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"(planned)"}),(0,t.jsx)(n.td,{children:"\u2717"}),(0,t.jsx)(n.td,{children:"\u2717"}),(0,t.jsx)(n.td,{children:"\u2717"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{children:["Service discovery ",(0,t.jsx)("sup",{children:"7"})]}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:"CORS / CSP / Cache Control"}),(0,t.jsx)(n.td,{children:"\u2713 (sensible defaults, fully customizable)"}),(0,t.jsx)(n.td,{children:"(planned)"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:"Usage metrics"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"(planned)"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{children:["Full audit trail ",(0,t.jsx)("sup",{children:"8"})]}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:"Permissions management"}),(0,t.jsx)(n.td,{children:"\u2713 (comprehensive, including microfrontend ownership)"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{children:["Shared dependency management ",(0,t.jsx)("sup",{children:"9"})]}),(0,t.jsx)(n.td,{children:"(planned)"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:"Server rendering support"}),(0,t.jsx)(n.td,{children:"(planned)"}),(0,t.jsx)(n.td,{children:"(planned)"}),(0,t.jsx)(n.td,{children:"\u2717"}),(0,t.jsx)(n.td,{children:"\u2717"}),(0,t.jsx)(n.td,{children:"\u2717"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{children:["Microfrontend marketplace ",(0,t.jsx)("sup",{children:"10"})]}),(0,t.jsx)(n.td,{children:"(planned)"}),(0,t.jsx)(n.td,{children:"(planned)"}),(0,t.jsx)(n.td,{children:"\u2717"}),(0,t.jsx)(n.td,{children:"\u2717"}),(0,t.jsx)(n.td,{children:"\u2717"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{children:["Rolling deployments ",(0,t.jsx)("sup",{children:"11"})]}),(0,t.jsx)(n.td,{children:"(planned)"}),(0,t.jsx)(n.td,{children:"(planned)"}),(0,t.jsx)(n.td,{children:"\u2717"}),(0,t.jsx)(n.td,{children:"\u2717"}),(0,t.jsx)(n.td,{children:"\u2717"})]})]})]}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"Web apps hosting"})," refers to hosting the parent/root HTML file that initializes the microfrontends necessary for client-side rendering."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"Environment support"})," refers to hosting each microfrontend and web app on both internal test environments and live production environments. CI/CD Pipelines are configured to deploy to environments sequentially."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"Auto-generated CI pipelines"})," refers to generating configuration files for ",(0,t.jsx)(n.a,{href:"https://docs.github.com/en/actions/using-workflows",children:"Github workflow"}),", ",(0,t.jsx)(n.a,{href:"https://azure.microsoft.com/en-us/products/devops/pipelines",children:"Azure Pipelines"}),", ",(0,t.jsx)(n.a,{href:"https://docs.gitlab.com/ee/ci/",children:"Gitlab CI"})," and other CI/CD tools."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"Route / layout management"})," refers to managing the in-browser URL routes and DOM layout for microfrontends."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"Self-owned assets storage"})," refers to JS, CSS, HTML, font, and image files being stored within a bucket owned by the company implementing microfrontends, rather than by cloud hosting service."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"Edge-side HTML rendering optimizations"})," refers to dynamically changing the HTML file for a web app via code that runs in ",(0,t.jsx)(n.a,{href:"https://www.macrometa.com/articles/what-is-edge-side-rendering",children:"edge locations"}),". Since edge locations are physically closer to most users than an origin server, this provides maximum performance beneifts. Performance benefits include inlining import maps, ",(0,t.jsx)(n.code,{children:"<link rel=preload>"}),", and ",(0,t.jsx)(n.code,{children:"<script>"})," elements so that the browser begins downloading the necessary resources for the current URL as quickly as possible."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"Service discovery"})," refers to all available microfrontends easily cross-communicating with each other. This is often done via ",(0,t.jsx)(n.a,{href:"https://github.com/WICG/import-maps",children:"import maps"})," or other manifest files."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"Full audit trail"})," refers to logs for all deployments, infrastructure changes, and configuration changes within the microfrontends system."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"Shared dependency management"})," refers to externalizing or federating shared npm packages between microfrontends, to improve performance by only downloading and executing the code for them once within a web page."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"Microfrontend marketplace"})," refers to purchasing or installing pre-made microfrontends into a company's system."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"Rolling deployments"})," refers to introducing new code changes to a microfrontend to only a fraction of the userbase, to minimize impact of releasing bad code."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"1-baseplate-cloud",children:"1. Baseplate Cloud"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://baseplate.cloud/",children:"Baseplate Cloud"})," tops the list for its ease of use and specific focus on single-spa hosting. Because it was made by the creator of single-spa, Baseplate's features have been informed by years of microfrontend and single-spa consultancies, making it the easiest microfrontend hosting choice for single-spa. Everything about the product simplifies and automates as much of the complexity as possible, and it\u2019s hard to find advantages in other solutions that beat this fact. Baseplate will probably be the best choice for any company that is prioritizing a streamlined cloud hosting experience."]}),"\n",(0,t.jsx)(n.p,{children:"Baseplate's feature set automates the job functions of multiple software developers and frees up a lot of development resources without increasing the size of the development team. This easily offsets the cost of Baseplate's services."}),"\n",(0,t.jsx)(n.p,{children:"Baseplate supports the following features:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Web apps hosting"}),"\n",(0,t.jsx)(n.li,{children:"Custom domains for web apps and static assets"}),"\n",(0,t.jsx)(n.li,{children:"Unlimited deployable environments"}),"\n",(0,t.jsx)(n.li,{children:"Unlimited microfrontends"}),"\n",(0,t.jsx)(n.li,{children:"Autogenerated CI/CD pipelines"}),"\n",(0,t.jsx)(n.li,{children:"Full audit trail"}),"\n",(0,t.jsx)(n.li,{children:"Microfrontend-specific usage metrics"}),"\n",(0,t.jsx)(n.li,{children:"CORS, CSP, and Cache-Control configuration"}),"\n",(0,t.jsx)(n.li,{children:"Edge-side performance optimizations"}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["Also of note, ",(0,t.jsx)(n.a,{href:"https://baseplate.cloud/docs/cdn/assets",children:"Baseplate CDN"})," is a source-available ",(0,t.jsx)(n.a,{href:"https://developers.cloudflare.com/workers/",children:"Cloudflare worker"})," designed for maximum performance and best practices. It is globally available at all ",(0,t.jsx)(n.a,{href:"https://www.cloudflare.com/network/",children:"Cloudflare edge locations"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"2-zephyr-cloud",children:"2. Zephyr Cloud"}),"\n",(0,t.jsxs)(n.p,{children:["From the creators of Module Federation, ",(0,t.jsx)(n.a,{href:"https://zephyr-cloud.io/",children:"Zephyr Cloud"})," is the premier hosting solution for module-federation-based microfrontends. It is currently in closed alpha with little publicly documented about its features."]}),"\n",(0,t.jsx)(n.h2,{id:"3-aws-s3--cloudfront",children:"3. AWS S3 + Cloudfront"}),"\n",(0,t.jsxs)(n.p,{children:["Amazon Web Services (AWS) offers the low-level cloud services necessary for companies to set up a microfrontends hosting solution. The most common microfrontends hosting solution within AWS often involves a ",(0,t.jsx)(n.a,{href:"https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-overview.html",children:"Cloudflare distribution"})," that acts as a public ",(0,t.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/Content_delivery_network",children:"CDN"}),", with a private ",(0,t.jsx)(n.a,{href:"https://aws.amazon.com/s3/",children:"S3 bucket"})," as the origin containing all static web files (Javascript, CSS, HTML) needed."]}),"\n",(0,t.jsx)(n.p,{children:"The advantage of using lower-level cloud hosting services is their initial lower costs\u2014however, that comes at the expense of increased setup and maintenance complexity compared to microfrontend-specific cloud hosting solutions."}),"\n",(0,t.jsx)(n.p,{children:"Implementation details will vary from company to company. It's common for each microfrontend's files to be stored within a (virtual) folder within the s3 bucket and the manifest or import map listing all microfrontends made available in a JSON file. Web apps using the microfrontends may have their own S3 bucket or be within the same S3 bucket."}),"\n",(0,t.jsx)(n.h2,{id:"4-gcp-storage--cloud-cdn",children:"4. GCP Storage + Cloud CDN"}),"\n",(0,t.jsxs)(n.p,{children:["Google Cloud Platform provides equivalent low-level cloud services to AWS. The same technical details that apply to AWS S3 + Cloudfront also apply to ",(0,t.jsx)(n.a,{href:"https://cloud.google.com/storage?hl=en",children:"GCP Cloud Storage"})," and ",(0,t.jsx)(n.a,{href:"https://cloud.google.com/cdn/docs/overview",children:"GCP Cloud CDN"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"5-azure-storage--cdn",children:"5. Azure Storage + CDN"}),"\n",(0,t.jsxs)(n.p,{children:["Azure Storage provides equivalent low-level cloud services to AWS. The same technical details that apply to AWS S3 + Cloudfront also apply to ",(0,t.jsx)(n.a,{href:"https://azure.microsoft.com/en-us/products/category/storage",children:"Azure Storage"})," and ",(0,t.jsx)(n.a,{href:"https://azure.microsoft.com/en-us/products/cdn",children:"GCP Cloud CDN"}),"."]})]})}function h(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>o,x:()=>l});var t=s(6540);const i={},r=t.createContext(i);function o(e){const n=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/b2f554cd.688862fe.js b/assets/js/b2f554cd.688862fe.js
deleted file mode 100644
index f5ad4b23e..000000000
--- a/assets/js/b2f554cd.688862fe.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[3513],{3661:e=>{e.exports=JSON.parse('{"blogPosts":[{"id":"/2024/03/18/top-5-microfrontend-hosting-solutions","metadata":{"permalink":"/blog/2024/03/18/top-5-microfrontend-hosting-solutions","source":"@site/blog/2024-03-18-top-5-microfrontend-hosting-solutions.md","title":"Top 5 Microfrontend Hosting Solutions","description":"With rapid growth in recent years, microfrontends have become a popular solution with many companies, from large software organizations to small independent dev teams. Microfrontend hosting can get complicated quickly but it is a crucial aspect of scaling software organizations\' development cycle. Whether companies are using single-spa, module federation, or any other microfrontends tools, the management of CI/CD pipelines, deployments, CDNs, and service discovery is something all companies will have to solve.","date":"2024-03-18T00:00:00.000Z","formattedDate":"March 18, 2024","tags":[],"readingTime":7.18,"hasTruncateMarker":false,"authors":[{"name":"Joel Denning","url":"https://x.com/joelbdenning","imageURL":"https://avatars.githubusercontent.com/u/5524384"}],"frontMatter":{"title":"Top 5 Microfrontend Hosting Solutions","author":"Joel Denning","authorURL":"https://x.com/joelbdenning","authorImageURL":"https://avatars.githubusercontent.com/u/5524384"},"unlisted":false,"nextItem":{"title":"March 2024 Core Team Meeting","permalink":"/blog/2024/03/12/core-team-meeting-notes"}},"content":"With rapid growth in recent years, microfrontends have become a popular solution with many companies, from large software organizations to small independent dev teams. Microfrontend hosting can get complicated quickly but it is a crucial aspect of scaling software organizations\' development cycle. Whether companies are using single-spa, module federation, or any other microfrontends tools, the management of CI/CD pipelines, deployments, CDNs, and service discovery is something all companies will have to solve.\\n\\nSo what\u2019s the most effective solution? Because microfrontend hosting is a relatively new space, most companies have a hard time knowing where to start. Fortunately, there are very good options out there, and unless you have a good reason to, you don\u2019t have to build it out yourself. Here you\u2019ll find a list of the best hosting solutions and the important factors you\u2019ll need to consider to make the decision.\\n\\n## Server-side versus client-side rendering\\n\\nThis article focuses on hosting solutions for client-side rendered microfrontends, since the majority of microfrontend implementations rely solely on [client-side rendering](https://ferie.medium.com/what-is-the-client-side-rendering-and-how-it-works-c90210e2cd14).\\n\\n[Server-side rendering](https://www.heavy.ai/technical-glossary/server-side-rendering) of microfrontends often involves one or more docker containers that run [NodeJS](https://en.wikipedia.org/wiki/Node.js) to render [React](https://en.wikipedia.org/wiki/React_(software)), [Angular](https://en.wikipedia.org/wiki/Angular_(web_framework)), or [Vue](https://en.wikipedia.org/wiki/Vue.js) applications. For optimal performance, [single-spa server rendering](/docs/ssr-overview) also supports a single NodeJS runtime (rather than network requests between docker containers).\\n\\nIf your organization uses server-side rendering, the following rankings will still apply but may require some additional consideration that isn\u2019t covered here. \\n\\n## Low-level vs high-level hosting solutions\\n\\nHosting microfrontends can be accomplished with lower-level cloud services (AWS, GCP, Azure, etc) or via microfrontend-specific cloud hosting solutions such as Baseplate Cloud and Zephyr Cloud. Lower-level services may be more affordable but require much more initial setup and ongoing maintenance. Higher-level microfrontend hosting solutions provide targeted features to streamline the hosting and development process.\\n\\nCompanies who wish for sensible defaults and a straightforward implementation path may choose higher-level hosting solutions to save on DevOps and system admin costs. The additional built-in features of higher-level hosting solutions often reduce implementation time for companies migrating to or starting with microfrontends.\\n\\n## Solution comparison\\n\\n|                    | [Baseplate Cloud](https://baseplate.cloud) | [Zephyr Cloud](https://zephyr-cloud.io/) | [S3 + Cloudfront](https://aws.amazon.com/blogs/networking-and-content-delivery/amazon-s3-amazon-cloudfront-a-match-made-in-the-cloud/) | [GCP Storage + Cloud CDN](https://cloud.google.com/cdn/docs/overview) | [Azure Storage + CDN](https://learn.microsoft.com/en-us/azure/cdn/cdn-create-a-storage-account-with-cdn) |\\n| ------------ | ---------------- | ----------- | --------- | --------- | ----- |\\n| Global availability | \u2713 (via Cloudflare) | \u2713 (Cloudflare / Netlify) | \u2713 | \u2713 | \u2713 |\\n| Web app hosting <sup>1</sup> | \u2713 | \u2713 | \u2713 | \u2713 | \u2713 |\\n| Environments support <sup>2</sup> | \u2713 | \u2713 | (manual) | (manual) | (manual) |\\n| Autogenerated CI pipelines <sup>3</sup> | \u2713 | (planned)  | \u2717 | \u2717 | \u2717 |\\n| Automated microfrontend creation | \u2713 (via API and CLI) | \u2713 | (manual) | (manual) | (manual) |\\n| Custom domains | \u2713 (via DNS records) | \u2713 | \u2713 | \u2713 | \u2713 | \u2713 |\\n| Route / layout management <sup>4</sup> | \u2713 ([single-spa-layout template](/docs/layout-definition)) | (manual) | (manual) | (manual) | (manual) | (manual) |\\n| Self-owned assets storage <sup>5</sup> | \u2713 (optional bring-your-own-s3-bucket) | \u2713 | \u2713 | \u2713 | \u2713 |\\n| Edge-side HTML rendering optimizations <sup>6</sup> | \u2713 | (planned) | \u2717 | \u2717 | \u2717 |\\n| Service discovery <sup>7</sup> | \u2713 | \u2713 | (manual) | (manual) | (manual) |\\n| CORS / CSP / Cache Control | \u2713 (sensible defaults, fully customizable) | (planned)  | \u2713 | \u2713 | \u2713 |\\n| Usage metrics | \u2713 | (planned) | (manual) | (manual) | (manual) |\\n| Full audit trail <sup>8</sup> | \u2713 | \u2713 | (manual) | (manual) | (manual) |\\n| Permissions management | \u2713 (comprehensive, including microfrontend ownership) | \u2713 | \u2713 | \u2713 | \u2713 |\\n| Shared dependency management <sup>9</sup> | (planned) | \u2713 | (manual) | (manual) | (manual) |\\n| Server rendering support | (planned) | (planned) | \u2717 | \u2717 | \u2717 |\\n| Microfrontend marketplace <sup>10</sup> | (planned) | (planned) | \u2717 | \u2717 | \u2717 |\\n| Rolling deployments <sup>11</sup> | (planned) | (planned) | \u2717 | \u2717 | \u2717 |\\n\\n1. *Web apps hosting* refers to hosting the parent/root HTML file that initializes the microfrontends necessary for client-side rendering.\\n2. *Environment support* refers to hosting each microfrontend and web app on both internal test environments and live production environments. CI/CD Pipelines are configured to deploy to environments sequentially.\\n3. *Auto-generated CI pipelines* refers to generating configuration files for [Github workflow](https://docs.github.com/en/actions/using-workflows), [Azure Pipelines](https://azure.microsoft.com/en-us/products/devops/pipelines), [Gitlab CI](https://docs.gitlab.com/ee/ci/) and other CI/CD tools.\\n4. *Route / layout management* refers to managing the in-browser URL routes and DOM layout for microfrontends.\\n5. *Self-owned assets storage* refers to JS, CSS, HTML, font, and image files being stored within a bucket owned by the company implementing microfrontends, rather than by cloud hosting service.\\n6. *Edge-side HTML rendering optimizations* refers to dynamically changing the HTML file for a web app via code that runs in [edge locations](https://www.macrometa.com/articles/what-is-edge-side-rendering). Since edge locations are physically closer to most users than an origin server, this provides maximum performance beneifts. Performance benefits include inlining import maps, `<link rel=preload>`, and `<script>` elements so that the browser begins downloading the necessary resources for the current URL as quickly as possible.\\n7. *Service discovery* refers to all available microfrontends easily cross-communicating with each other. This is often done via [import maps](https://github.com/WICG/import-maps) or other manifest files.\\n8. *Full audit trail* refers to logs for all deployments, infrastructure changes, and configuration changes within the microfrontends system.\\n9. *Shared dependency management* refers to externalizing or federating shared npm packages between microfrontends, to improve performance by only downloading and executing the code for them once within a web page.\\n10. *Microfrontend marketplace* refers to purchasing or installing pre-made microfrontends into a company\'s system.\\n11. *Rolling deployments* refers to introducing new code changes to a microfrontend to only a fraction of the userbase, to minimize impact of releasing bad code.\\n\\n\\n## 1. Baseplate Cloud\\n\\n[Baseplate Cloud](https://baseplate.cloud/) tops the list for its ease of use and specific focus on single-spa hosting. Because it was made by the creator of single-spa, Baseplate\'s features have been informed by years of microfrontend and single-spa consultancies, making it the easiest microfrontend hosting choice for single-spa. Everything about the product simplifies and automates as much of the complexity as possible, and it\u2019s hard to find advantages in other solutions that beat this fact. Baseplate will probably be the best choice for any company that is prioritizing a streamlined cloud hosting experience.\\n\\nBaseplate\'s feature set automates the job functions of multiple software developers and frees up a lot of development resources without increasing the size of the development team. This easily offsets the cost of Baseplate\'s services.\\n\\nBaseplate supports the following features:\\n\\n- Web apps hosting\\n- Custom domains for web apps and static assets\\n- Unlimited deployable environments\\n- Unlimited microfrontends\\n- Autogenerated CI/CD pipelines\\n- Full audit trail\\n- Microfrontend-specific usage metrics\\n- CORS, CSP, and Cache-Control configuration\\n- Edge-side performance optimizations\\n\\nAlso of note, [Baseplate CDN](https://baseplate.cloud/docs/cdn/assets) is a source-available [Cloudflare worker](https://developers.cloudflare.com/workers/) designed for maximum performance and best practices. It is globally available at all [Cloudflare edge locations](https://www.cloudflare.com/network/).\\n\\n## 2. Zephyr Cloud\\n\\nFrom the creators of Module Federation, [Zephyr Cloud](https://zephyr-cloud.io/) is the premier hosting solution for module-federation-based microfrontends. It is currently in closed alpha with little publicly documented about its features.\\n\\n## 3. AWS S3 + Cloudfront\\n\\nAmazon Web Services (AWS) offers the low-level cloud services necessary for companies to set up a microfrontends hosting solution. The most common microfrontends hosting solution within AWS often involves a [Cloudflare distribution](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-overview.html) that acts as a public [CDN](https://en.wikipedia.org/wiki/Content_delivery_network), with a private [S3 bucket](https://aws.amazon.com/s3/) as the origin containing all static web files (Javascript, CSS, HTML) needed.\\n\\nThe advantage of using lower-level cloud hosting services is their initial lower costs\u2014however, that comes at the expense of increased setup and maintenance complexity compared to microfrontend-specific cloud hosting solutions.\\n\\nImplementation details will vary from company to company. It\'s common for each microfrontend\'s files to be stored within a (virtual) folder within the s3 bucket and the manifest or import map listing all microfrontends made available in a JSON file. Web apps using the microfrontends may have their own S3 bucket or be within the same S3 bucket.\\n\\n## 4. GCP Storage + Cloud CDN\\n\\nGoogle Cloud Platform provides equivalent low-level cloud services to AWS. The same technical details that apply to AWS S3 + Cloudfront also apply to [GCP Cloud Storage](https://cloud.google.com/storage?hl=en) and [GCP Cloud CDN](https://cloud.google.com/cdn/docs/overview).\\n\\n## 5. Azure Storage + CDN\\n\\nAzure Storage provides equivalent low-level cloud services to AWS. The same technical details that apply to AWS S3 + Cloudfront also apply to [Azure Storage](https://azure.microsoft.com/en-us/products/category/storage) and [GCP Cloud CDN](https://azure.microsoft.com/en-us/products/cdn)."},{"id":"/2024/03/12/core-team-meeting-notes","metadata":{"permalink":"/blog/2024/03/12/core-team-meeting-notes","source":"@site/blog/2024-03-12-core-team-meeting-notes.md","title":"March 2024 Core Team Meeting","description":"Attendees: Joel Denning, Milan Kovacic","date":"2024-03-12T00:00:00.000Z","formattedDate":"March 12, 2024","tags":[],"readingTime":1.685,"hasTruncateMarker":false,"authors":[],"frontMatter":{},"unlisted":false,"prevItem":{"title":"Top 5 Microfrontend Hosting Solutions","permalink":"/blog/2024/03/18/top-5-microfrontend-hosting-solutions"},"nextItem":{"title":"February 2024 Core Team Meeting","permalink":"/blog/2024/02/14/core-team-meeting-notes"}},"content":"Attendees: Joel Denning, Milan Kovacic\\n\\nDate: 2024-03-13\\n\\n## Meeting Agenda\\n\\n- Typescript migration: single-spa@7 - typescript, IE11, navigation cancelation\\n- Migration from SystemJS to native modules - use es-module-shims??\\n- Discuss creation of single-spa CLI\\n- Getting started documentation being updated by Milan\\n- Discuss future of shared dependency management\\n\\n### TypeScript Migration\\n\\nFifth typescript PR has been merged (https://github.com/single-spa/single-spa/pull/1202). Sixth one on the way\\n\\n### Migration to native modules\\n\\nDiscuss the limitations of native modules and import maps (external import maps, external import maps, etc). Discuss whether to use [import-map-injector](https://github.com/single-spa/import-map-injector) or [es-module-shims](https://github.com/guybedford/es-module-shims) or neither. Joel expressed concern about runtime parsing of modules, but Milan pointed out that Ruby on Rails as adopted es-module-shims. We looked at the performance benchmarks for es-module-shims, which show it\'s only a 5ms difference compared to native modules.\\n\\nWe also discussed possible collaboration with Zack Jackson on module federation\'s new runtime (called MFP) and whether that could help. Also discuss whether a [service worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) would be necessary or helpful to hook into the browser\'s loading of modules.\\n\\n### single-spa CLI\\n\\nSee [single-spa issue 1205](https://github.com/single-spa/single-spa/issues/1205) for Milan\'s proposal. Joel has hesitations about abstracting away bundler config and configuration files, but we decided to proceed with Milan\'s proposal, since developer experience is one of the main barriers to entry for developers and corporations who are used to managed configuration in other projects (NextJS, Vite, etc etc). The main concern is how to do it in a way where single-spa users don\'t have to go digging in node_modules regularly to be able to do what they need to do to their projects.\\n\\n### Shared dependencies management\\n\\nBaseplate Cloud plans to use [JSPM CDN](https://jspm.org/cdn/jspm-io) for native ES module shared dependencies. Managing the dependencies in the import map over time is important to do in a sensible way that avoids accidentally breaking production, while still allowing for incremental migration of dependencies on microfrontend at a time.\\n\\nWe didn\'t decide on anything concrete - just brainstormed solutions. Ideally the open source ecosystem can self-host shared dependencies as well."},{"id":"/2024/02/14/core-team-meeting-notes","metadata":{"permalink":"/blog/2024/02/14/core-team-meeting-notes","source":"@site/blog/2024-02-14-core-team-meeting-notes.md","title":"February 2024 Core Team Meeting","description":"Attendees: Joel Denning, Milan Kovacic, Ian Bacher, Jake Hayes","date":"2024-02-14T00:00:00.000Z","formattedDate":"February 14, 2024","tags":[],"readingTime":0.745,"hasTruncateMarker":false,"authors":[],"frontMatter":{},"unlisted":false,"prevItem":{"title":"March 2024 Core Team Meeting","permalink":"/blog/2024/03/12/core-team-meeting-notes"},"nextItem":{"title":"January 2024 Core Team Meeting","permalink":"/blog/2024/01/03/core-team-meeting-notes"}},"content":"Attendees: Joel Denning, Milan Kovacic, Ian Bacher, Jake Hayes\\n\\n## Meeting Agenda\\n\\n- TypeScript migration\\n  - single-spa\\n  - single-spa-react\\n- Maintenance update\\n- Baseplate\\n- Roadmap items\\n- Blog posts\\n\\n### TypeScript Migration\\n\\n1. Single-spa-layout broken types\\n2. New PR for migration [Single-spa](https://github.com/single-spa/single-spa/pull/1196)\\n\\n### Review other PR\'s\\n\\n1. Examination of an open [PR](https://github.com/single-spa/single-spa/pull/1189) to fix [Issue #1184](https://github.com/single-spa/single-spa/issues/1184)\\n   1. Discussed introducing a new [potential lifecycle hook](https://github.com/single-spa/single-spa/issues/1197)\\n\\n### Baseplate Pricing Feedback\\n\\n- Maybe indicate that GB storage is optional. It\'s possible to bring your own\\n- \\"The prices are not ridiculous\\" - Ian\\n- \\"The prices seem reasonable, and the descriptions make sense\\" - Jake\\n\\n### Roadmap Items\\n\\n- Removing default exports\\n- single-spa-playground was broken due to DNS records, Joel was able to fix that last week\\n- Look into CORS for single-spa-playground - @Ian will look into\\n\\n### Blog posts\\n\\n- Potentially adding Baseplate specific blog posts to single-spa"},{"id":"/2024/01/03/core-team-meeting-notes","metadata":{"permalink":"/blog/2024/01/03/core-team-meeting-notes","source":"@site/blog/2024-01-03-core-team-meeting-notes.md","title":"January 2024 Core Team Meeting","description":"Attendees: Joel Denning Jake Hayes, Milan Kovacic","date":"2024-01-03T00:00:00.000Z","formattedDate":"January 3, 2024","tags":[],"readingTime":0.78,"hasTruncateMarker":false,"authors":[],"frontMatter":{},"unlisted":false,"prevItem":{"title":"February 2024 Core Team Meeting","permalink":"/blog/2024/02/14/core-team-meeting-notes"},"nextItem":{"title":"December 2023 Core Team Meeting","permalink":"/blog/2023/12/12/core-team-meeting-notes"}},"content":"Attendees: Joel Denning Jake Hayes, Milan Kovacic\\n\\n## Achievements and Progress from December\\n\\n- Opened https://github.com/single-spa/create-single-spa/pull/393 to address create-single-spa dependencies\\n\\n## January 2024 Roadmap\\n\\n1. Migrate main `single-spa` project to typescript. See [issue 1185](https://github.com/single-spa/single-spa/issues/1185), [PR 1186](https://github.com/single-spa/single-spa/pull/1186) and [PR 1187](https://github.com/single-spa/single-spa/pull/1187).\\n2. Continue work on the consolidation and updates of the example projects\\n3. Review https://github.com/single-spa/create-single-spa/pull/393\\n\\n## Meeting Notes\\n\\n- Reviewed Typescript pull requests ([PR 1186](https://github.com/single-spa/single-spa/pull/1186) and [PR 1187](https://github.com/single-spa/single-spa/pull/1187))\\n- Discuss and update roadmap\\n- Baseplate Cloud update\\n- Review and comment on https://github.com/single-spa/single-spa/issues/1184\\n- Review https://github.com/single-spa/single-spa-react/issues/164\\n\\n## Initiatives and Goals\\n\\n- Adding unit tests to existing projects\\n- SystemJS -> ESM migration\\n- create-single-spa update (https://github.com/cruft/cruft)\\n- Release single-spa 6 as latest \u2705\\n- Improve shared dependencies management\\n- Autopublishes to npm\\n- Server rendering enhancements?\\n- Support for NextJS, NuxtJS, Remix, create-react-app, and other build tools\\n- Consolidate example projects \ud83d\udea7\\n- Feature voting\\n- Automated integration tests for popular frameworks\\n- Update create-single-spa dependencies \ud83d\udea7"},{"id":"/2023/12/12/core-team-meeting-notes","metadata":{"permalink":"/blog/2023/12/12/core-team-meeting-notes","source":"@site/blog/2023-12-12-core-team-meeting-notes.md","title":"December 2023 Core Team Meeting","description":"Attendees: Artur Androsovych, Ian Bacher, Jake Hayes, Milan Kovacic","date":"2023-12-12T00:00:00.000Z","formattedDate":"December 12, 2023","tags":[],"readingTime":0.725,"hasTruncateMarker":false,"authors":[],"frontMatter":{},"unlisted":false,"prevItem":{"title":"January 2024 Core Team Meeting","permalink":"/blog/2024/01/03/core-team-meeting-notes"},"nextItem":{"title":"single-spa 6","permalink":"/blog/2023/11/27/single-spa-6"}},"content":"Attendees: Artur Androsovych, Ian Bacher, Jake Hayes, Milan Kovacic\\n\\n## Achievements and Progress from November\\n\\n- Successfully released single-spa version 6, marking a significant milestone in the project\'s development\\n\\n## December 2023 Roadmap\\n\\n1. Update dependencies, and set up automation, starting with create-single-spa\\n2. Continue work on the consolidation and updates of the example projects\\n\\n## Meeting Notes\\n\\n- Welcomed Ian Bacher as a new addition to the core team.\\n- Reviewed single-spa roadmap\\n\\n## Initiatives and Goals\\n\\n- Adding unit tests to existing projects\\n- SystemJS -> ESM migration\\n- create-single-spa update (https://github.com/cruft/cruft)\\n- Release single-spa 6 as latest \u2705\\n- Improve shared dependencies management\\n- Autopublishes to npm\\n- Server rendering enhancements?\\n- Support for NextJS, NuxtJS, Remix, create-react-app, and other build tools\\n- Consolidate example projects \ud83d\udea7\\n- Feature voting\\n- Automated integration tests for popular frameworks\\n- Update create-single-spa dependencies \ud83d\udea7"},{"id":"/2023/11/27/single-spa-6","metadata":{"permalink":"/blog/2023/11/27/single-spa-6","source":"@site/blog/2023-11-27-single-spa-6.md","title":"single-spa 6","description":"We have released single-spa@6! The single-spa core team is committed to a stable single-spa runtime with very few breaking changes. We expect over 95% of single-spa users can upgrade easily without altering their changes!","date":"2023-11-27T00:00:00.000Z","formattedDate":"November 27, 2023","tags":[],"readingTime":9.505,"hasTruncateMarker":false,"authors":[{"name":"Joel Denning","url":"https://x.com/joelbdenning","imageURL":"https://avatars2.githubusercontent.com/u/5524384?s=460&v=4"}],"frontMatter":{"title":"single-spa 6","author":"Joel Denning","authorURL":"https://x.com/joelbdenning","authorImageURL":"https://avatars2.githubusercontent.com/u/5524384?s=460&v=4"},"unlisted":false,"prevItem":{"title":"December 2023 Core Team Meeting","permalink":"/blog/2023/12/12/core-team-meeting-notes"},"nextItem":{"title":"November 2023 Core Team Meeting","permalink":"/blog/2023/11/07/core-team-meeting-notes"}},"content":"We have released single-spa@6! The single-spa core team is committed to a stable single-spa runtime with very few breaking changes. We expect over 95% of single-spa users can upgrade easily without altering their changes!\\n\\n## Note from single-spa\'s creator\\n\\nOn September 22, 2015, I pushed single-spa\'s [initial commit](https://github.com/single-spa/single-spa/commit/1b885d783fde8000489cf19fc4db8e167aa55526). 8 years later, I am releasing single-spa@6. I am committed to this project and hope to improve and grow it for many years to come. The single-spa core team recently started monthly calls where we discuss important pull requests and roadmap (see first [meeting notes](https://single-spa.js.org/blog/2023/11/07/core-team-meeting-notes)). The future of microfrontends still includes single-spa.\\n\\nOn December 11, 2023, the company I founded is launching a product called [Baseplate Cloud](https://baseplate.cloud) that offers single-spa hosting. Baseplate Cloud is the single-spa hosting solution born from 4+ years of consulting with various companies who were implementing single-spa. [Baseplate CDN](https://baseplate.cloud/docs/cdn/intro) is a Cloudflare worker that proxies JS files from cloud storage, provides edge-side import map processing, auto-implements single-spa root configs, and more. Cloudflare edge-side processing provides many performance advantages while retaining the impressive scalability and security of Cloudflare. As a sign of good will towards the open source and single-spa communities, I have kept the [baseplate-cloudflare-worker](https://github.com/JustUtahCoders/baseplate-cloudflare-worker) public, with a \\"Commons Clause\\" + AGPL 3.0 license. Companies can use and contribute to baseplate-cloudflare-worker freely, as long as they don\'t try to sell it in competition to Baseplate Cloud. I would appreciate the community\'s backing and hope Baseplate becomes the way to financially sustain the single-spa project in the long term.\\n\\nIt would mean the world to me if your company or organization considered signing up for Baseplate\'s paid, private beta launch. We used the revenue the community gave us for [single-spa-workshop.com](https://single-spa-workshop.com) to create Baseplate, and plan to use Baseplate revenue to fund maintenance of single-spa\'s open source ecosystem. The Baseplate team is proudly a worker-owned business that has not sacrificed ownership of the company to outside investors. We built Baseplate with the revenue the community gave us via single-spa-workshop.com as the initial funding, which is only a few thousand dollars a month. The best Christmas present I could receive this year is a few dozen companies signing up immediately and putting Baseplate on their Q1 or Q2 roadmaps for 2024. I am asking for corporate partners to ensure long term financial sustainability so that single-spa will remain a good microfrontends solution for years to come.\\n\\n[Contact Baseplate Sales](mailto:sales@baseplate.cloud)\\n\\n## Summary\\n\\nsingle-spa@6 provides advanced features such as async navigation cancelation and parcel-only mode (via `patchHistoryApi`), while also updating the package configuration to use modern NodeJS and bundler features like [package entrypoints](https://nodejs.org/dist/latest-v16.x/docs/api/packages.html#packages_package_entry_points) and [`\\"type\\": \\"module\\"`](https://nodejs.org/dist/latest-v16.x/docs/api/packages.html#packages_type). We also updated `urlRerouteOnly` to default to `true`, as it boosts performance and we consider it to be a best practice to author applications that work when urlRerouteOnly is set to true.\\n\\n## Browser Support / IE11\\n\\n**We still support IE11** and the same versions of NodeJS (at least as old as Node 10). However, we\'ve changed our defaults such that IE11 is only supported with some additional configuration, as described in the IE11 Migration section below.\\n\\nFor the `single-spa` npm package, we plan single-spa@6 to be the last major version that supports IE11. In general, we\'ve released a major version of single-spa every 1-2 years. We do not have a concrete timeline or plans for single-spa@7, and will accept community contributions for any important patches to single-spa@6 after single-spa@7 is released.\\n\\nFor all surrounding packages (single-spa-react, single-spa-vue, systemjs-webpack-interop, single-spa-angular, etc) we may begin dropping IE11 support sooner than the single-spa@7 release. As we do so, we\'ll create documentation that lists the latest versions of packages that support IE11, and also accept community contributions to those versions for important updates.\\n\\nThe motivation for dropping IE11 support over time is to allow our core team to spend less time on supporting a nine year old browser and more time pushing the single-spa ecosystem forward. Also, we believe that the majority of end users should not suffer performance penalties because of a small percentage of users still using IE11. Slowly dropping IE11 also will also allow us to focus on a systemjs-less future for single-spa, where native browser modules are used rather than systemjs modules.\\n\\nWe understand and sympathize with companies who cannot drop IE11 support now, which is why we\'re supporting IE11 even though much of the ecosystem has already dropped it (Vue 3 does not support ie11, Angular only does after some effort, and even webpack 5 requires extra configuration to get it working in IE11). Many of single-spa\'s users are large financial institutions, large ecommerce companies, and other very large companies, where dropping IE11 support is a long process that involves many dozens of people from separate departments. We encourage single-spa users to start the conversations at your companies about dropping IE11 support, even if they take a long time or result in a decision to drop IE11 years in the future.\\n\\n## Migration\\n\\nWe think that >95% of single-spa users will be able to safely upgrade with no code changes. The breaking changes below are largely related to advanced features that most single-spa users do not use.\\n\\n### Steps\\n\\n1. If using SystemJS + import maps, change the URL of single-spa in your import map:\\n\\n```diff\\n<script type=\\"systemjs-importmap\\">\\n  {\\n    \\"imports\\": {\\n-     \\"single-spa\\": \\"https://cdn.jsdelivr.net/npm/single-spa@5.9.2/lib/system/single-spa.min.js\\"\\n+     \\"single-spa\\": \\"https://cdn.jsdelivr.net/npm/single-spa@6.0.0/lib/es2015/system/single-spa.min.js\\"\\n    }\\n  }\\n<\/script>\\n```\\n\\n2. In all your microfrontends (including root config), upgrade single-spa:\\n\\n```sh\\nnpm install single-spa@6\\nyarn add single-spa@6\\npnpm install single-spa@6\\n```\\n\\n3. Test things out.\\n4. If your app is not re-rendering during route transitions like it should (this is most common for Angular apps, but can happen in other frameworks to if you do a route transition without modifying the URL), change your root config\'s call to `start()`\\n\\n```diff\\nimport { start } from \'single-spa\';\\n\\n// DO NOT MAKE THIS CHANGE unless you are experiencing problems.\\n- start();\\n+ start({\\n+   urlRerouteOnly: false\\n+ });\\n```\\n\\nThat\'s it! If you experience other issues, let us know in Github issues.\\n\\n### IE11\\n\\nIf you support IE11, use the `es5` version of single-spa rather than `es2015`. The method of doing this depends on your configuration - some common ones are explained below:\\n\\n#### Import Maps\\n\\n```diff\\n<script type=\\"systemjs-importmap\\">\\n  {\\n    \\"imports\\": {\\n-     \\"single-spa\\": \\"https://cdn.jsdelivr.net/npm/single-spa@6.0.0/lib/es2015/system/single-spa.min.js\\"\\n+     \\"single-spa\\": \\"https://cdn.jsdelivr.net/npm/single-spa@6.0.0/lib/es5/system/single-spa.min.js\\"\\n    }\\n  }\\n<\/script>\\n```\\n\\n#### Webpack\\n\\nIf externalizing single-spa in your webpack config (very common, and the default with webpack-config-single-spa), you do not need to make the changes below. Otherwise, though, these changes will ensure you use the IE11-compatible version of single-spa.\\n\\n```js\\n// webpack.config.js\\nmodule.exports = {\\n  resolve: {\\n    alias: {\\n      \\"single-spa\\": require.resolve(\\"single-spa/lib/es5/esm/single-spa.min.js\\"),\\n    },\\n  },\\n};\\n```\\n\\n#### Rollup\\n\\nUse https://www.npmjs.com/package/@rollup/plugin-alias to alias the import similarly to webpack\\n\\n#### Import\\n\\nIf you do not wish to change bundler configuration, you can modify your import statements.\\n\\n```diff\\n- import { start } from \'single-spa\';\\n+ import { start } from \'single-spa/lib/es5/esm/single-spa.min.js\';\\n```\\n\\n## Breaking Changes\\n\\n- single-spa\'s package.json\'s `\\"main\\"` field now points to an es2015 version of single-spa that does not work in IE11. To support IE11, see section below.\\n- Delay patching history api until start() or patchHistoryApi() is called. [Github link](https://github.com/single-spa/single-spa/pull/827)\\n- Do not show start() warning when registerApplication hasn\'t been called (for parcel-only use cases) [Github link](https://github.com/single-spa/single-spa/pull/827)\\n- Change urlRerouteOnly default value to true. This is a performance boost for most applications, but for some situations can result in single-spa not triggering mounts/unmounts when it should. You can read more about it at https://single-spa.js.org/docs/api#start and https://github.com/single-spa/single-spa/issues/484. Angular users may want to set it to false due to nuanced behavior of angular router. To do so, call `start({urlRerouteOnly: false})` in your root config. [Github link](https://github.com/single-spa/single-spa/pull/828)\\n- `cancelNavigation(val)` no longer cancels navigation if `val` is falsy [Github link](https://github.com/single-spa/single-spa/pull/826)\\n- single-spa\'s package.json `\\"type\\"` is now set to `\\"module\\"`. This only impacts NodeJS usage of single-spa (not webpack/rollup/browser). Read more at [official nodejs docs](https://nodejs.org/dist/latest-v16.x/docs/api/packages.html#packages_type).\\n- single-spa\'s package.json now has `\\"exports\\"`. This changes which of single-spa\'s bundles are used by NodeJS, webpack, and rollup. The main change is that webpack / rollup will now use an IE11-incompatible (es2015) version of single-spa. See IE11 section below for more details. Additionally, an ESM version of single-spa will now be used when loaded via `import(\'single-spa\')` or `import \'single-spa\';`, whereas a UMD version will be used when calling `require(\\"single-spa\')`. To avoid the [dual package hazard](https://nodejs.org/dist/latest-v16.x/docs/api/packages.html#packages_dual_commonjs_es_module_packages), only use `import` or `require` to load single-spa in your NodeJS code - do not use both. You can see the package exports at https://github.com/single-spa/single-spa/blob/dea22f1aac39777a07252897ae625ab1d8313e9d/package.json#L8-L25.\\n- The published `umd` builds now have `.cjs` extensions rather than `.js`, since all `.js` files in the single-spa package are assumed to be ESM.\\n\\n```sh\\nFile structure published to npm\\n\\n# Before\\n# See https://www.jsdelivr.com/package/npm/single-spa?path=lib&version=5.9.3\\nlib/\\n  # IE11\\n  umd/\\n    single-spa.dev.js\\n    single-spa.min.js\\n  # IE11\\n  esm/\\n    single-spa.dev.js\\n    single-spa.min.js\\n  # IE11\\n  system/\\n    single-spa.dev.js\\n    single-spa.min.js\\n  # No IE11\\n  es2015/\\n    single-spa.dev.js\\n    single-spa.min.js\\n\\n# After\\n# See https://www.jsdelivr.com/package/npm/single-spa?path=lib&version=6.0.0\\nlib\\n  # IE11\\n  es5/\\n    umd/\\n      single-spa.dev.js\\n      single-spa.min.js\\n    system/\\n      single-spa.dev.js\\n      single-spa.min.js\\n    esm/\\n      single-spa.dev.js\\n      single-spa.min.js\\n  # No IE11\\n  es2015/\\n    umd/\\n      single-spa.dev.cjs\\n      single-spa.min.cjs\\n    system/\\n      single-spa.dev.js\\n      single-spa.min.js\\n    esm/\\n      single-spa.dev.js\\n      single-spa.min.js\\n```\\n\\n## Features\\n\\n## Async navigation cancelation\\n\\nWe\'ve added support for async navigation cancelation. To use it, call `cancelNavigation(promise)` with a promise as an argument. Single-spa will wait until that promise resolves/rejects before proceeding with navigation. If the promise resolves with a truthy value, navigation is canceled. If the promise resolves with a falsy value or rejects, navigation is not canceled. [Github link](https://github.com/single-spa/single-spa/pull/826)\\n\\n```js\\nwindow.addEventListener(\\"single-spa:before-routing-event\\", (evt) => {\\n  if (evt.detail.oldUrl === \\"/settings\\") {\\n    evt.detail.cancelNavigation(checkSettingsOkay());\\n  }\\n});\\n\\nasync function checkSettingsOkay() {\\n  const response = await fetch(\\"/api/settings-okay\\");\\n  if (response.ok) {\\n    return true;\\n  } else {\\n    alert(\\"Please fix your settings before leaving the page\\");\\n    return false;\\n  }\\n}\\n```\\n\\n### New patchHistoryApi\\n\\nWe\'ve exposed a new `patchHistoryApi()` api. This lets you use single-spa\'s modified implementations of pushState/replaceState/popstate/hashchange without using single-spa applications. This is intended to be used by single-spa users who exclusively use single-spa parcels, rather than applications [Github link](https://github.com/single-spa/single-spa/pull/827)\\n\\n```js\\nimport { patchHistoryApi, mountRootParcel } from \\"single-spa\\";\\n\\npatchHistoryApi({\\n  urlRerouteOnly: true,\\n});\\n\\n// now you don\'t need to call start() if you\'re only using parcels\\n\\nmountRootParcel(parcelConfig, parcelProps);\\n```\\n\\n### New profiler\\n\\nWe\'ve implemented a profiler that is available within the dev builds of single-spa@6. A visualization of the profiler is available in the single-spa-inspector@0.6.0 browser extension:\\n\\n- Implement profiler for lifecycle events. by @joeldenning in [#868](https://github.com/single-spa/single-spa/pull/868)\\n- Implement parcel and routing profiler events. by @joeldenning in [#903](https://github.com/single-spa/single-spa/pull/903)\\n\\n<img src=\\"/img/profiler-screenshot.png\\" alt=\\"Screenshot of single-spa-inspector profiler tab\\" />\\n\\n## Fixes\\n\\n- Fix regression with parcel name [Github link](https://github.com/single-spa/single-spa/pull/825)\\n- Ensure all reroute promises (triggerAppChange() return value) resolve even during cancelation [Github link](https://github.com/single-spa/single-spa/pull/831)\\n- fix(types): fix SingleSpaAppsByNewStatus interface by @FelixGraf in [#988](https://github.com/single-spa/single-spa/pull/988)\\n- Ensure app is unmounted during unregisterApplication. Resolves #871 by @joeldenning in [#875](https://github.com/single-spa/single-spa/pull/875)\\n\\n## Maintenance\\n\\n- Switch from yarn -> pnpm [Github link](https://github.com/single-spa/single-spa/pull/824)\\n- Upgrade all dependencies [Github link](https://github.com/single-spa/single-spa/pull/824)\\n- Upgrade husky from v4 to v7. Use pinst to avoid issues with yarn 2 users as described in https://typicode.github.io/husky/#/?id=yarn-2 [Github link](https://github.com/single-spa/single-spa/pull/824)\\n- Upgrade to Jest 27. Fix tests to work with Jest 27. [Github link](https://github.com/single-spa/single-spa/pull/824)\\n- Upgrade to Node 16. Fix tests to work with Node 16 (Fix tests in Node 15 #652) [Github link](https://github.com/single-spa/single-spa/pull/824)\\n- Run upgraded version of prettier on all files. [Github link](https://github.com/single-spa/single-spa/pull/824)\\n- Remove unused babel-eslint dependency [Github link](https://github.com/single-spa/single-spa/pull/824)\\n- Upgrade to new package names for all rollup plugins. (@rollup/plugin-node-resolve instead of rollup-plugin-node-resolve) [Github link](https://github.com/single-spa/single-spa/pull/824)\\n- Remove file size impact workflow since it\'s broken. by @joeldenning in [#879](https://github.com/single-spa/single-spa/pull/879)\\n- Remove console.log in test by @joeldenning in [#878](https://github.com/single-spa/single-spa/pull/878)"},{"id":"/2023/11/07/core-team-meeting-notes","metadata":{"permalink":"/blog/2023/11/07/core-team-meeting-notes","source":"@site/blog/2023-11-07-core-team-meeting-notes.md","title":"November 2023 Core Team Meeting","description":"Attendees: Joel Denning, Milan Kovacic, Jake Hayes","date":"2023-11-07T00:00:00.000Z","formattedDate":"November 7, 2023","tags":[],"readingTime":0.705,"hasTruncateMarker":false,"authors":[],"frontMatter":{},"unlisted":false,"prevItem":{"title":"single-spa 6","permalink":"/blog/2023/11/27/single-spa-6"},"nextItem":{"title":"Introducing Single-Spa\'s New Core Team Members","permalink":"/blog/2023/10/11/introducing-single-spa-new-core-team-members"}},"content":"Attendees: Joel Denning, Milan Kovacic, Jake Hayes\\n\\n## November 2023 Roadmap\\n\\n1. Release `single-spa@6` as latest\\n2. Consolidate and update the example projects\\n\\n## Meeting Notes\\n\\n- Open pull requests, pressing Github issues\\n  - We reviewed https://github.com/single-spa/single-spa-react/pull/197\\n- Core team vacancy\\n  - Add Jake Hayes to the #core-team channel, but not officially a core team member\\n  - Joel will reach out to Ian about joining the core team.\\n- Single-spa roadmap\\n- Maintenance update/plan\\n\\n## Roadmap Brainstorm\\n\\n- Adding unit tests to existing projects\\n- SystemJS -> ESM migration\\n- create-single-spa update (https://github.com/cruft/cruft)\\n- Release single-spa 6 as latest\\n- Improve shared dependencies management\\n- Autopublishes to npm\\n- Server rendering enhancements?\\n- Support for NextJS, NuxtJS, Remix, create-react-app, and other build tools\\n- Consolidate example projects\\n- Feature voting\\n- Automated integration tests for popular frameworks\\n- Update create-single-spa dependencies"},{"id":"/2023/10/11/introducing-single-spa-new-core-team-members","metadata":{"permalink":"/blog/2023/10/11/introducing-single-spa-new-core-team-members","source":"@site/blog/2023-10-11-introducing-single-spa-new-core-team-members.md","title":"Introducing Single-Spa\'s New Core Team Members","description":"Please welcome the latest additions to the Single-Spa core team. These talented individuals bring fresh energy and a wealth of expertise and are poised to revitalize and expand the Single-Spa project.","date":"2023-10-11T00:00:00.000Z","formattedDate":"October 11, 2023","tags":[],"readingTime":1.9,"hasTruncateMarker":false,"authors":[],"frontMatter":{},"unlisted":false,"prevItem":{"title":"November 2023 Core Team Meeting","permalink":"/blog/2023/11/07/core-team-meeting-notes"},"nextItem":{"title":"The single-spa core team is expanding","permalink":"/blog/2023/08/22/single-spa-core-is-expanding"}},"content":"Please welcome the latest additions to the Single-Spa core team. These talented individuals bring fresh energy and a wealth of expertise and are poised to revitalize and expand the Single-Spa project.\\n\\n## Meet the Team\\n\\n**[Artur Androsovych](https://github.com/arturovt)**\\n\\nArtur Androsovych is a Google Developer Expert in Angular and an open-source contributor who has been focusing on runtime performance and teaching teams about Angular internals for the past few years. He has maintained the single-spa-angular project for years, and we\'re excited for him to join the core team.\\n\\n**[Roberto Mosca](https://github.com/robmosca)**\\n\\nRoberto is a Principal Software Engineer at TravelPerk (www.travelperk.com), where he is the go-to person for all things related to their frontend platform. With a full-stack background, he\'s got his hands on a variety of tech \u2014 from Python to NodeJS, React, Webpack... Before diving into the world of business travel, he was immersed in biomedical research as a bioinformatician. When he is not in front of a screen, you\u2019ll find him swimming, cooking up some Italian delicacies, or tinkering with his Rubik\u2019s cube-solving robots.\\n\\n**[Milan Kovacic](https://github.com/MilanKovacic)**\\n\\nMilan Kovacic is a seasoned software consultant with deep expertise in various development domains. On the frontend side, his work is marked by proficiency in React, TypeScript, and the integration of microfrontends. For backend solutions, he mostly relies on the .NET framework, C#\u2014often utilizing microservices architecture. Additionally, Milan is experienced with cloud technologies, regularly working with platforms like AWS and Azure. Beyond traditional development, he places great emphasis on ensuring a smooth developer experience and promotes the use of automation and efficient DevOps practices to streamline development workflows.\\n\\nThese three new members will be joining current members Joel Denning, Carlos Filoteo, and Anthony Frehner to manage GitHub and Slack issues and actively develop new features. We\u2019d also like to give special recognition to contributors from Qiankun for their extensive support over the years.\\n\\nAs part of this team update, we\u2019ll also be creating a public roadmap, providing transparency about Single-Spa\'s future direction. To maintain transparency and encourage collaboration, we\'re establishing monthly meetings where the core team will discuss progress, challenges, and ideas. Meeting notes will be publicly available, ensuring that the community is well-informed and able to participate in our discussions.\\n\\nSo stay tuned and join us on this journey shaping the future of microfrontends."},{"id":"/2023/08/22/single-spa-core-is-expanding","metadata":{"permalink":"/blog/2023/08/22/single-spa-core-is-expanding","source":"@site/blog/2023-08-22-single-spa-core-is-expanding.md","title":"The single-spa core team is expanding","description":"We are happy to announce that the single-spa core team is opening applications for two new members! As a core team member, you will help us maintain and guide the growing single-spa ecosystem by responding to Github and Slack issues, implementing new features, and helping to create the roadmap for the future of single-spa.","date":"2023-08-22T00:00:00.000Z","formattedDate":"August 22, 2023","tags":[],"readingTime":1.345,"hasTruncateMarker":false,"authors":[],"frontMatter":{},"unlisted":false,"prevItem":{"title":"Introducing Single-Spa\'s New Core Team Members","permalink":"/blog/2023/10/11/introducing-single-spa-new-core-team-members"},"nextItem":{"title":"single-spa 5","permalink":"/blog/2020/02/24/single-spa-5"}},"content":"We are happy to announce that the single-spa core team is opening applications for two new members! As a core team member, you will help us maintain and guide the growing single-spa ecosystem by responding to Github and Slack issues, implementing new features, and helping to create the roadmap for the future of single-spa.\\n\\nOur current core team consists of Joel Denning, Carlos Filoteo, and Anthony Frehner. We also thank Justin McMurdie and Bret Little for their valuable contributions during their time with the single-spa core team.\\n\\nSingle-spa owes its success to the people and companies who support it. If you want to contribute but aren\u2019t able to join the core team, consider applying to be a maintainer. Maintainers are volunteers who receive Github write access to specific subprojects within the ecosystem. If you\u2019re a manager at a company that uses single-spa, we encourage you to allow your developers to volunteer their time as maintainers or core team members so that the project can continue to grow and develop.\\n\\nThe single-spa core team and maintenance are unpaid volunteer positions. Looking ahead, if any core team members or maintainers are interested in new paid roles, Convex Cooperative (the company Joel works for) will be considering hiring new developers from the single-spa team. It\u2019s important to state that Convex will not poach developers away from companies who allow their developers to help us maintain single-spa\u2014our priority is nurturing the growth and development of the single-spa ecosystem.\\n\\nIf interested in applying to be a single-spa maintainer or core team member, please fill out the following Google Form before September 1, 2023:\\n\\n[https://docs.google.com/forms/d/1zIfP2kYjNBCi-qjKf9T1-sNT1VLSXTB9twwX_mxKYxU/edit](https://docs.google.com/forms/d/1zIfP2kYjNBCi-qjKf9T1-sNT1VLSXTB9twwX_mxKYxU/edit)"},{"id":"/2020/02/24/single-spa-5","metadata":{"permalink":"/blog/2020/02/24/single-spa-5","source":"@site/blog/2020-02-24-single-spa-5.md","title":"single-spa 5","description":"Today we released single-spa@5.0.0.","date":"2020-02-24T00:00:00.000Z","formattedDate":"February 24, 2020","tags":[],"readingTime":4.29,"hasTruncateMarker":false,"authors":[{"name":"Joel Denning","url":"https://twitter.com/joelbdenning","imageURL":"https://avatars2.githubusercontent.com/u/5524384?s=460&v=4"}],"frontMatter":{"title":"single-spa 5","author":"Joel Denning","authorURL":"https://twitter.com/joelbdenning","authorImageURL":"https://avatars2.githubusercontent.com/u/5524384?s=460&v=4"},"unlisted":false,"prevItem":{"title":"The single-spa core team is expanding","permalink":"/blog/2023/08/22/single-spa-core-is-expanding"},"nextItem":{"title":"single-spa Inspector and 4.1","permalink":"/blog/2019/02/20/single-spa-inspector"}},"content":"Today we released single-spa@5.0.0.\\n\\nHere are the highlights:\\n\\n- Performance focus: 35% decrease in library size.\\n- A CLI for single-spa: [create-single-spa](/docs/create-single-spa)\\n- New tutorial videos: [Youtube playlist](https://www.youtube.com/playlist?list=PLLUD8RtHvsAOhtHnyGx57EYXoaNsxGrTU) / [Bilibili space](https://space.bilibili.com/495254378/video)\\n- New framework-specific example repositories - [React example](https://github.com/react-microfrontends), [Vue example](https://github.com/vue-microfrontends), [Multiple frameworks example](https://github.com/polyglot-microfrontends), [Full list](/docs/examples)\\n- Massively improved documentation, including [Concept: Microfrontends](/docs/microfrontends-concept) and [The Recommended Setup](/docs/recommended-setup).\\n\\n[Release notes here](https://github.com/single-spa/single-spa/releases/tag/v5.0.0)\\n\\n## Migration from 4 to 5\\n\\nFor every user we\'re aware of, **you do not need to change anything in your code in order to upgrade to single-spa@5**. The breaking changes listed in the release notes are the removal of features that were originally used by Canopy Tax, but were never documented.\\n\\nIf installing from npm, you can simply `npm install --save single-spa@5.0.0` or `yarn add single-spa@5.0.0`.\\n\\nAlternatively, single-spa is available on [cdnjs](https://cdnjs.com/libraries/single-spa), [jsdelivr](https://www.jsdelivr.com/package/npm/single-spa), and [unpkg](https://unpkg.com/browse/single-spa/).\\n\\nThe single-spa core team is committed to treating our users well, which includes not introducing massive breaking changes. The core single-spa API has not seen massive breaking changes [since single-spa@3 in August 2016](https://github.com/single-spa/single-spa/releases/tag/v3.0.0). We have added features and improved things, but single-spa is a stable technology. We are committed to maintaining it, documenting it, and adjusting it as technologies like in-browser modules become more and more popular and viable.\\n\\n## Performance improvements\\n\\nThe ESM version of single-spa@4 was 23.8kb (7.2kb gzipped). That was improved in single-spa@5 to 15.5kb (5.1kb gzipped). We did this by optimizing our build process and removing unused features.\\n\\n## single-spa CLI\\n\\nSince single-spa\'s inception, bundler configuration has been a huge source of user pain. We have heard this pain and implemented [create-single-spa](/docs/create-single-spa), which creates (and sometimes can update) repositories that are ready to be used as single-spa microfrontends. For Angular and Vue, the official CLIs are used with a few extra plugins automatically installed. For React, a default webpack config with decent eslint / prettier defaults is set up.\\n\\nAdditionally, we have added a lot of documentation for webpack in [The Recommended Setup](/docs/recommended-setup#build-tools-webpack--rollup).\\n\\n## Tutorial videos\\n\\nWe understand that single-spa is more than just a library - it is an architecture. The single-spa library itself is the core, but the surrounding ecosystem of concepts and libraries are equally important to successfully migrating to single-spa and having it work for you. As such, we have created a Youtube playlist, currently consisting of seven videos, to help you get started.\\n\\n[Youtube playlist](https://www.youtube.com/playlist?list=PLLUD8RtHvsAOhtHnyGx57EYXoaNsxGrTU) / [Bilibili space](https://space.bilibili.com/495254378/video)\\n\\nThe videos currently cover the following topics:\\n\\n- What are Microfrontends?\\n- In-browser vs build-time JavaScript modules\\n- Import Maps\\n- Local Development with single-spa and import maps\\n- Deploying Microfrontends / Continuous Integration (CI)\\n- SystemJS intro\\n- Lazy Loading\\n- Bundlers, webpack, and rollup.\\n\\n## New example repositories\\n\\nWhat started out as Canopy Tax\'s special sauce for independently deployed frontend microservices is now fully accessible to the public with our [new set of example repos](/docs/examples). We have a React example, a Vue example, and a polyglot (multiple framework) example. We hope to add an Angular example, after we achieve support for Angular 9. These example repositories are actively watched and maintained by the single-spa core team, and reflect our current opinions on the best, production-viable way to do microfrontends.\\n\\nFurthermore, we have deployed each of the examples to our new domains:\\n\\n- https://react.microfrontends.app\\n- https://polyglot.microfrontends.app\\n- https://vue.microfrontends.app\\n\\n## Documentation overhaul\\n\\nWe removed several dated documentation pages, and added several that were very much lacking. Here are a few pages that give you the most bang for your buck:\\n\\n- [Concept: Microfrontend](/docs/microfrontends-concept)\\n- [The Recommended Setup](/docs/recommended-setup)\\n- [create-single-spa CLI](/docs/create-single-spa)\\n\\n## Development builds and error codes\\n\\nTaking inspiration from the [react development and production builds](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build), we now publish to NPM both development and production builds in the following formats: UMD, ESM, and System.register.\\n\\nYou can see the [published build files here](https://unpkg.com/browse/single-spa@5.0.0/lib/). The `.dev.js` files provide full debugging information in the browser console, whereas the `.min.js` files give you a numeric error code and a link to a documentation page that explains the error. We hope that these error codes and documentation for them will improve discoverability of relevant documentation when you\'re setting up single-spa.\\n\\nAn example of these new documentation pages for error codes is [found here](/error/?code=35&arg=application&arg=app1&arg={}).\\n\\n## Governance\\n\\nSome of you may have noticed that we recently moved all github repos from https://github.com/CanopyTax to https://github.com/single-spa. Canopy Tax was the company where single-spa was first authored, but as a core team we asked to move ownership and governance of the projects to an organization fully managed by the open source community. In agreement with Canopy, we made that change.\\n\\nThis change does not mean anything drastic for single-spa. Its license was and is MIT, and we have no plans to do anything with the project besides make it better.\\n\\n## Where next?\\n\\nWe are actively [translating the single-spa documentation to Chinese](https://github.com/single-spa/zh-hans.single-spa.js.org), and hope to add other languages soon. We will add full [Angular 9 support](https://github.com/single-spa/single-spa-angular/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+angular+9) soon, and hope to add [server rendering](https://github.com/single-spa/single-spa/issues/103) in an upcoming release.\\n\\nPlease [contribute to our code](/docs/contributing-overview) and [ecosystem](/docs/ecosystem), [join our single-spa slack channel](https://join.slack.com/t/single-spa/shared_invite/zt-2efw13fg4-oJgemeyCUJv4~JrQlYttnA), [follow our official Twitter account](https://twitter.com/Single_spa), and contribute to [our open collective](https://opencollective.com/single-spa). The [single-spa core team](/contributors) all have full-time jobs and maintain this project on a volunteer basis."},{"id":"/2019/02/20/single-spa-inspector","metadata":{"permalink":"/blog/2019/02/20/single-spa-inspector","source":"@site/blog/2019-02-20-single-spa-inspector.md","title":"single-spa Inspector and 4.1","description":"Background","date":"2019-02-20T00:00:00.000Z","formattedDate":"February 20, 2019","tags":[],"readingTime":1.775,"hasTruncateMarker":false,"authors":[{"name":"Anthony Frehner","url":"https://twitter.com/aahfrena","imageURL":"https://pbs.twimg.com/profile_images/1037162092963348480/1XLEV4MK_400x400.jpg"}],"frontMatter":{"title":"single-spa Inspector and 4.1","author":"Anthony Frehner","authorURL":"https://twitter.com/aahfrena","authorImageURL":"https://pbs.twimg.com/profile_images/1037162092963348480/1XLEV4MK_400x400.jpg"},"unlisted":false,"prevItem":{"title":"single-spa 5","permalink":"/blog/2020/02/24/single-spa-5"},"nextItem":{"title":"single-spa parcels, explained","permalink":"/blog/2018/06/19/single-spa-parcels-explained"}},"content":"## Background\\n\\nFor a long time, Canopy has had the benefit of using a tool called [sofe inspector](https://github.com/single-spa/sofe-inspector) (note: this is an out-of-date version of it) to list, override, and interact with single-spa applications. There has always been a desire to [figure out how to share this tool so others can benefit as well](https://github.com/single-spa/single-spa/issues/151).\\n\\nWith that in mind, I\'m proud to announce an initial release for **[single-spa Inspector](https://github.com/single-spa/single-spa-inspector)**! single-spa Inspector is a Firefox and Chrome extension, much like React/Vue devtools, that allows you see and interact with your single-spa applications and configuration.\\n\\n## Current Inspector Features\\n\\n- List registered applications\\n- Show application status\\n- Force an app to mount or unmount\\n- Hover over an app name to have an \\"inspect element\\"-like view of your apps (Overlays)\\n\\n(Note: Overlays require a small update to your code, but should hopefully be simple! See [how to configure app overlays](https://github.com/single-spa/single-spa-inspector#configuring-app-overlays))\\n\\n**The single-spa Inspector will only work with single-spa versions 4.1 and higher**, since we had to expose and add some functionality to the single-spa library itself in order to implement these features.\\n\\n## single-spa 4.1\\n\\nsingle-spa 4.1 was released, which includes a couple of key updates:\\n\\n1. Support for single-spa Inspector\\n1. ESM bundle output\\n1. Simpmlified test configuration for developers/contributors to single-spa\\n\\nFor most people, ESM (EcmaScript Module) support shouldn\'t affect how you use single-spa, but for those looking to play around with modules or other advanced Javascript things, it\'s a welcome addition.\\n\\nWe also changed our test suite to purely use Jest instead of Saucelabs, and hopefully false positive \\"failing\\" tests on pull requests will be a thing of the past.\\n\\n## Help Wanted!\\n\\nIf you would like to suggest a new feature for single-spa Inspector, report a bug, improve our (admittedly horrible and hopefully temporary) UI/UX, or add features, please see the [github repo](https://github.com/single-spa/single-spa-inspector) and hack away!\\n\\nWe also hope to update some of our example repos to the lastest single-spa so that anyone with the extension installed can test out the features and see how to implement overlays. But this process will go faster if someone wants to help out. :)\\n\\nThank you!"},{"id":"/2018/06/19/single-spa-parcels-explained","metadata":{"permalink":"/blog/2018/06/19/single-spa-parcels-explained","source":"@site/blog/2018-06-19-single-spa-parcels-explained.md","title":"single-spa parcels, explained","description":"Ever since single-spa@1.0.0, the single-spa team has been dedicated to bringing microservices to the frontend. We have made it possible for AngularJS, React, Angular, Vue, and other frameworks to coexist side by side in the same page.","date":"2018-06-19T00:00:00.000Z","formattedDate":"June 19, 2018","tags":[],"readingTime":3.69,"hasTruncateMarker":false,"authors":[{"name":"Joel Denning","url":"https://twitter.com/joelbdenning","imageURL":"https://avatars2.githubusercontent.com/u/5524384?s=400&u=ff145fcb2ae5305555628a446e9f725d4e145aaa&v=4"}],"frontMatter":{"title":"single-spa parcels, explained","author":"Joel Denning","authorURL":"https://twitter.com/joelbdenning","authorImageURL":"https://avatars2.githubusercontent.com/u/5524384?s=400&u=ff145fcb2ae5305555628a446e9f725d4e145aaa&v=4"},"unlisted":false,"prevItem":{"title":"single-spa Inspector and 4.1","permalink":"/blog/2019/02/20/single-spa-inspector"},"nextItem":{"title":"A step-by-step guide to single-spa","permalink":"/blog/2016/12/16/a-step-by-step-guide-to-single-spa"}},"content":"Ever since single-spa@1.0.0, the single-spa team has been dedicated to bringing microservices to the frontend. We have made it possible for AngularJS, React, Angular, Vue, and other frameworks to coexist side by side in the same page.\\n\\nAnd with the release of [version 4](https://github.com/single-spa/single-spa/releases/tag/v4.0.0), I\u2019m pleased to announce that [single-spa](https://github.com/single-spa/single-spa) is expanding that effort so that **_individual components_** written with different frameworks can interoperate. It is new terrain for the single-spa community, which previously had focused on getting large applications to interoperate with each other, instead of the individual components.\\n\\n## Another way to do framework agnostic components?\\n\\nFor those familiar with [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) and [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements), you may be wondering why a JavaScript library would try to do what browsers are starting natively to do.\\n\\nAnd as one of the contributors to the custom elements polyfill, let me be the first one to say that we did not make this decision lightly.\\n\\nIf you\u2019re interested in diving into the details, check out [One Company\u2019s Relationship With Custom Elements](https://medium.com/canopy-tax/one-companys-relationship-with-custom-elements-d360baf3b253), which explains some of the difficulties we\u2019ve been through with web components and custom elements.\\n\\nTLDR: React and some other frameworks don\u2019t interop with custom elements very well. Additionally dealing with inner HTML, attributes vs properties, and customized builtins can be a pain.\\n\\n## Okay but you haven\u2019t told me what a single-spa parcel is\\n\\nA parcel is single-spa\u2019s way of building a component in one framework and using it in another.\\n\\nTo implement a parcel, just create a JavaScript object that has 3\u20134 functions on it. We call this JavaScript object a _parcel config_ and there are three required functions to implement: bootstrap, mount, and unmount. A fourth function, update, is optional.\\n\\nEach of the functions will be called by single-spa at the right time, but the parcel config will control what happens. In other words, single-spa controls the \u201cwhen,\u201d but the parcel config controls the \u201cwhat\u201d and the \u201chow.\u201d\\n\\nOnce you\u2019ve implemented the parcel config, simply call singleSpa.mountRootParcel(parcelConfig, parcelProps) to mount it. This is the key to what makes parcels framework agnostic \u2014 regardless of whether the parcel config is implemented with React, Angular, Vue, or anything else, to use the parcel you always just call mountRootParcel().\\n\\n## A few more specifics\\n\\nWe\u2019ve glossed over a few things that I want to touch on real quick:\\n\\n- **How do you implement the lifecycle functions on the parcel config?**\\n\\n      \\t\\tUse a helper library for your framework of choice. [single-spa-react](https://github.com/single-spa/single-spa-react), [single-spa-angular](https://github.com/single-spa/single-spa-angular) (for angular@2+), [single-spa-angularjs](https://github.com/single-spa/single-spa-angularjs), [single-spa-vue](https://github.com/single-spa/single-spa-vue), and [others](https://github.com/single-spa/single-spa/blob/master/docs/single-spa-ecosystem.md) will implement the entire parcel config for you.\\n\\n- **What are the props you pass to mountRootParcel()?**\\n\\n      \\t\\tThe props passed as the second argument to singleSpa.mountRootParcel(parcelConfig, parcelProps) are an object with one required prop and as many custom props as you\u2019d like. The required prop is domElement, which tells the parcel where to mount. And the custom props get passed through to the parcel config lifecycle functions.\\n\\n- **How do you re-render and unmount a parcel?**\\n\\n      \\t\\tThe singleSpa.mountRootParcel() function returns a parcel object that lets you re-render and unmount the parcel whenever you\u2019d like to.\\n\\n      \\t\\t<iframe src=\\"https://medium.com/media/b2d981b380b937009f7ce84e1cc2d753\\" frameBorder=\\"0\\" />\\n\\n## Syntactic sugar makes this easier\\n\\nCalling all of those functions manually might get annoying. So let\u2019s make it easier. Here\u2019s an example of some syntactic sugar for React. Similar features will be added soon for Angular, Vue, and other frameworks.\\n\\n<iframe src=\\"https://medium.com/media/9b5904d3423359cb2eef410f9ee35648\\" frameBorder=\\"0\\" />\\n\\n## How hard is it to try this out?\\n\\nYou can get started with parcels immediately, without using the rest of single-spa. To do so, either npm install or script tag single-spa, then call mountRootParcel with your first parcel config.\\n\\nYou can also check out [this codepen example](https://codepen.io/joeldenning/pen/qKVoQg?editors=0010#0) to start out.\\n\\nAnd if you are already a user of [single-spa applications](https://github.com/single-spa/single-spa/blob/master/docs/applications.md), parcels mean that your applications can mount and unmount shared functionality whenever you want them to. Since parcels don\u2019t have [activity functions](https://github.com/single-spa/single-spa/blob/master/docs/configuration#activity-function), you don\u2019t have to set up routes for them.\\n\\n## Let us know what you think!\\n\\nWe\u2019d love to get your feedback on parcels. What do you think of this new way of framework interop? Is the implementation easy to understand? Are parcels useful for you or do they not quite fit into what you\u2019re trying to accomplish?How hard was it for you to try out?\\n\\nCheck out the [official docs](https://github.com/single-spa/single-spa/blob/master/docs/parcels.md) for more examples, explanations, and [api documentation](https://github.com/single-spa/single-spa/blob/master/docs/parcels-api.md).\\n\\nAnd let us know your thoughts in the [single-spa Slack channel](https://join.slack.com/t/single-spa/shared_invite/zt-2efw13fg4-oJgemeyCUJv4~JrQlYttnA), a [Github issue](https://github.com/single-spa/single-spa/issues), or [on Twitter](https://twitter.com/Single_spa)!"},{"id":"/2016/12/16/a-step-by-step-guide-to-single-spa","metadata":{"permalink":"/blog/2016/12/16/a-step-by-step-guide-to-single-spa","source":"@site/blog/2016-12-16-a-step-by-step-guide-to-single-spa.md","title":"A step-by-step guide to single-spa","description":"Running Angular 1, React, Angular 2, and Vue.js side by side sounds pretty cool. And it seems appealing to have multiple applications coexisting on the same page, each lazily loaded.","date":"2016-12-16T00:00:00.000Z","formattedDate":"December 16, 2016","tags":[],"readingTime":9.705,"hasTruncateMarker":false,"authors":[{"name":"Joel Denning","url":"https://twitter.com/Joelbdenning","imageURL":"https://pbs.twimg.com/profile_images/716746867451625472/2NMyKAd1_400x400.jpg"}],"frontMatter":{"title":"A step-by-step guide to single-spa","author":"Joel Denning","authorURL":"https://twitter.com/Joelbdenning","authorImageURL":"https://pbs.twimg.com/profile_images/716746867451625472/2NMyKAd1_400x400.jpg"},"unlisted":false,"prevItem":{"title":"single-spa parcels, explained","permalink":"/blog/2018/06/19/single-spa-parcels-explained"},"nextItem":{"title":"A Case for SOA in the Browser","permalink":"/blog/2016/02/26/a-case-for-soa-in-the-browser"}},"content":"Running Angular 1, React, Angular 2, and Vue.js side by side sounds pretty cool. And it seems appealing to have multiple applications coexisting on the same page, each lazily loaded.\\n\\nBut using [single-spa](/) for the first time can be tricky because you\u2019ll come across terms like \u201capplication lifecycles\u201d, \u201croot application\u201d, \u201cloading function\u201d, \u201cchild application\u201d, and \u201cactivity function.\u201d\\n\\nThis blog post will take you through setting things up and what choices you have when using single-spa. It\u2019s based on what I\u2019ve seen at [Canopy Tax](https://medium.com/canopy-tax) where we went from an Angular 1 monolith to an Angular 1, React, and Svelte polyglot.\\n\\nIf you\u2019d like to jump straight to a fully working, self contained code example, check out this [webpack single-spa starter project](https://github.com/joeldenning/simple-single-spa-webpack-example).\\n\\n## Step One: choose a module loader.\\n\\nYour module loader / bundler is the library you\u2019ll use to lazy load code. I recommend either [Webpack](https://webpack.js.org/) or [JSPM](https://jspm.io/), if you\u2019re starting from scratch.\\n\\nIf you go with Webpack, try to use Webpack 2 if you can, since it has [support for promise-based lazy loading](https://webpack.js.org/guides/migrating/#code-splitting-with-es2015). This will make things easier for you later on, since single-spa requires that your [loading functions](https://github.com/single-spa/single-spa/blob/master/docs/root-application.md#loading-function) return promises. If you can\u2019t use Webpack 2, getting single-spa to lazy load your code with Webpack 1 will require some boilerplate code.\\n\\nJSPM/SystemJS has worse documentation than Webpack, but is a great solution for module loading if you can get past that. I recommend using jspm@0.17\u200a\u2014\u200ait\u2019s still in beta but has been worked on for over a year and at Canopy we find it stable enough to use in production.\\n\\nIf you\u2019re struggling to decide between the two, then ask yourself the following: Do I want multiple completely separate bundles? If you don\u2019t, I recommend Webpack because it has better docs, a larger community, and fewer gotchas. Otherwise, I\u2019d go with JSPM, since Webpack has no plans to support dynamic runtime loading [(See tweet below from Mr. Larkin, himself)](https://twitter.com/TheLarkInn/status/789968589419745280).\\n\\n## Step Two: create a brand new HTML file\\n\\nThe next step is to create what single-spa calls your [\u201croot application.\u201d](https://github.com/single-spa/single-spa/blob/master/docs/root-application.md) Really your root application is just the stuff that initializes single-spa, and it starts with an HTML file.\\n\\nEven if you\u2019ve got an existing project that already has it\u2019s own HTML file, I recommend starting fresh with a new HTML file. That way, there is a clear distinction between what is in your root application (shared between all apps) and what is in a child application (not shared with everything).\\n\\nYou\u2019ll want to keep your root application as small as possible, since it\u2019s sort of the master controller of everything and could become a bottleneck. You don\u2019t want to be constantly changing both the root application and the child applications.\\n\\nSo for now, just have a `<script>` to a single JavaScript file (root-application.js), which will be explained in Step Three.\\n\\nSince Webpack is probably the more common use case, my code examples from here on will assume that you\u2019re using Webpack 2. The equivalent Webpack 1 or JSPM code has all the same concepts and only some minor code differences.\\n\\n```html\\n<!doctype html>\\n<html>\\n  <head>\\n    <meta charset=\\"utf-8\\" />\\n    <meta name=\\"viewport\\" content=\\"width=device-width\\" />\\n    <title>A single-spa application</title>\\n  </head>\\n  <body>\\n    <div id=\\"cool-app\\"></div>\\n    <script src=\\"root-application.js\\"><\/script>\\n  </body>\\n</html>\\n```\\n\\n## Step Three: register an \u201capplication\u201d\\n\\nNow it\u2019s time to finish up your root application by writing your \u201croot-application.js\u201d file. The primary purpose of root-application.js is to call [singleSpa.registerApplication(..)](https://github.com/single-spa/single-spa/blob/master/docs/root-application.md#declaring-child-applications) for each of the applications that will be managed by single-spa.\\n\\nIf you\u2019re into analogies, you can think of single-spa as the operating system for your single page application, managing which \u201cprocesses\u201d (or \u201cchild applications\u201d) are running at any given time. At any moment, some of the child applications will be active on the DOM and others will not. As the user navigates throughout the app, some applications will be unmounting from the DOM and others will be mounting to the DOM.\\n\\nAnother way to look at it is that single-spa is a master router on top of your other routers.\\n\\nTo do this, first `npm install single-spa` and then call the [registerApplication](https://github.com/single-spa/single-spa/blob/master/docs/root-application.md#declaring-child-applications) function:\\n\\n```js\\nimport { registerApplication, start } from \\"single-spa\\";\\n\\n// Register your first application with single-spa. More apps will be registered as you create them\\nregisterApplication(\\"cool-app\\", loadCoolApp, isCoolAppActive);\\n\\n// Tell single-spa that you\'re ready for it to mount your application to the DOM\\nstart();\\n\\n// This is a \\"loading function\\"\\nfunction loadCoolApp() {\\n  return import(\\"./cool-app/cool.app.js\\");\\n}\\n\\n// This is an \\"activity function\\"\\nfunction isCoolAppActive() {\\n  return window.location.hash.startsWith(\\"#/cool\\");\\n}\\n```\\n\\nBecause single-spa is _so very_ cool, we\u2019ve created an app called \u201ccool-app\u201d that will be lazy loaded and mounted to the DOM whenever the url hash starts with `#/cool`.\\n\\nThe `loadCoolApp` function is what single-spa calls a loading function. Inside of it, the `import` introduces a code splitting point\u200a\u2014\u200aWebpack will create separate code chunks that will be lazy loaded by single-spa.\\n\\nFor your specific project, you probably won\u2019t have a hash prefix of \u201ccool\u201d, but I recommend establishing some kind of convention that makes it easy to determine which apps are active. This will simplify the maintenance of your activity functions, as you add more and more child applications.\\n\\nIf you\u2019re going to start out with just one child application, then it might make sense to implement the activity function as `() => true`. You can worry about getting fancier once you have more than one application.\\n\\nThe last thing is to call `start()`. This is something you **must do for things to work.** The purpose is to give control over timing and performance. But until that is a concern, `start` is just one of those things you do, and then maybe [read about it](https://github.com/single-spa/single-spa/blob/master/docs/single-spa-api.md#start) later if you ever need to.\\n\\n## Step Four: create \u201c.app.js\u201d file\\n\\nWhen you open up your index.html file in the browser, you\u2019ll now see\u2026.. a blank screen! We\u2019re really close, but there\u2019s one crucial step left: building your app.js file.\\n\\nAfter that, you\u2019ll have everything working for your first single-spa application.\\n\\nAn app.js file is a configuration file that you create for each child application. It is the code that is lazy loaded when your activity function returns true.\\n\\nThere are three things that you need to implement in the app.js file:\\n\\n<ol>\\n  <li><a href=\\"\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">A bootstrap lifecycle</a></li>\\n  <li><a href=\\"\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">A mount lifecycle</a></li>\\n  <li><a href=\\"\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">An unmount lifecycle</a></li>\\n</ol>\\n\\nA \u201clifecycle\u201d is a function or array of functions that will be called by single-spa; you export these from the app.js file. Each function must return a Promise so that single-spa knows when it is completed.\\n\\nHere is a simple example:\\n\\n```js\\n// single-spa will import this file and call the exported lifecyle functions\\n\\nlet user;\\n\\nexport function bootstrap() {\\n  return fetch(\\"/api/users/0\\")\\n    .then((response) => response.json())\\n    .then((json) => (user = json));\\n}\\n\\nexport function mount() {\\n  /* This is normally where you would have your framework-specific code like\\n   * ReactDOM.render or angular.bootstrap(). The fact that you can put *anything*\\n   * into this function is what makes single-spa so powerful -- any framework\\n   * can implement a \\"mount\\" and \\"unmount\\" to become a single-spa application.\\n   */\\n  return Promise.resolve().then(() => {\\n    document.getElementById(\\"user-app\\").innerHTML = `\\n        <div>\\n          Hello ${user.name}!\\n        <div>\\n      `;\\n  });\\n}\\n\\nexport function unmount() {\\n  /* Real world use cases would be something like ReactDOM.unmountComponentAtNode()\\n   * or vue.$destroy()\\n   */\\n  return Promise.resolve().then(() => {\\n    document.getElementById(\\"user-app\\").innerHTML = \\"\\";\\n  });\\n}\\n```\\n\\nAt this point, you might be seeing the `document.getElementById` and `innerHTML =` and worry that you\u2019ve been duped\u200a\u2014\u200amaybe single-spa is really just a poor excuse for a ui component framework.\\n\\nAnd really, don\u2019t we already have a lot of different ways to write UI components?\\n\\n### Getting all of those frameworks to work together.\\n\\n_Using multiple frameworks_ is where single-spa really shines. It is not a ui framework itself, but a framework for using other frameworks.\\n\\nEach child application can be written in any framework, so long as it implements application lifecycle functions. Then the mini-apps cooperate to form the entire single page application.\\n\\nSo going back to our previous example, we could choose to write our \u201ccool.app.js\u201d as an Angular 1 app, and choose something else for future apps:\\n\\n```js\\nimport singleSpaAngularJS from \\"single-spa-angularjs\\";\\nimport angular from \\"angular\\";\\nimport \\"./app.module.js\\";\\nimport \\"./routes.js\\";\\n\\nconst domElementGetter = () => document.getElementById(\\"cool-app\\");\\n\\nconst angularLifecycles = singleSpaAngularJS({\\n  angular,\\n  domElementGetter,\\n  mainAngularModule: \\"single-spa-app\\",\\n  uiRouter: true,\\n  preserveGlobal: true,\\n});\\n\\nexport const bootstrap = [\\n  aboutToBootstrap,\\n  angularLifecycles.bootstrap,\\n  doneBootstrapping,\\n];\\n\\nexport const mount = [angularLifecycles.mount];\\n\\nexport const unmount = [angularLifecycles.unmount];\\n\\nfunction aboutToBootstrap() {\\n  console.log(\\"about to bootstrapping\\");\\n  return Promise.resolve();\\n}\\n\\nfunction doneBootstrap() {\\n  console.log(\\"finished bootstrapping\\");\\n  return Promise.resolve();\\n}\\n```\\n\\nIn this example, we use a helper library called [single-spa-angularjs](https://github.com/single-spa/single-spa-angularjs) which abstracts away the specifics of initializing Angular 1 apps. This blogpost doesn\u2019t show you the `app.module.js` or `routes.js` files, but you can see an example implementation [here](https://github.com/single-spa/single-spa-examples/tree/master/src/angularJS).\\n\\nThe pattern is to call `singleSpaAngularJS` at the very beginning, which returns `bootstrap`, `mount`, and `unmount` lifecycle functions for you.\\n\\nYou might notice that this time the lifecycles are exported as arrays of functions instead of just functions\u200a\u2014\u200ayou can choose whichever works best for you.\\n\\nThe advantage of exporting an array of functions is that you can add in your own custom behavior (like `aboutToBootstrap` and `doneBootstrap`) that will run before or after the Angular 1 lifecycles. When you export an array, each item in the array must be a function that returns a promise. Single-spa will wait for each promise to resolve, in order, before calling the next function in the array.\\n\\nTo learn more about single-spa helper libraries, check out these github projects:\\n\\n<ul>\\n  <li><a href=\\"https://github.com/single-spa/single-spa-angularjs\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">single-spa-angularjs</a></li>\\n  <li><a href=\\"https://github.com/single-spa/single-spa-angular\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">single-spa-angular</a></li>\\n  <li><a href=\\"https://github.com/single-spa/single-spa-react\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">single-spa-react</a></li>\\n  <li><a href=\\"https://github.com/single-spa/single-spa-vue\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">single-spa-vue</a></li>\\n  <li><a href=\\"https://github.com/single-spa/single-spa-svelte\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">single-spa-svelte</a></li>\\n  <li><a href=\\"https://github.com/single-spa/single-spa-preact\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">single-spa-preact</a></li>\\n</ul>\\n\\nYou can also see a fully working example of an angular app coexisting with other apps at the [single-spa-examples](https://github.com/single-spa/single-spa-examples) repo or the [live demo](http://single-spa.surge.sh/).\\n\\n## Step Five: test it out!\\n\\nRefresh your page and you should now have a functioning single-spa application!\\n\\nTry navigating to a url that your child app is active for (`#/cool`) and then navigating away from it. When you do so, the page will not refresh but you should see your application mount itself to the DOM and then unmount.\\n\\nIf you run into problems, try to narrow down whether the problem is in the root application or in the child application. Is your root application being executed? Are the declareChildApplication calls being made? Have you called `start()`? Is there a network request to download the code for your child application? Is your child application\'s `bootstrap` lifecycle being called? What about `mount`?\\n\\n<img src=\\"https://cdn-images-1.medium.com/max/1600/1*WMFuo-hz-Q31UVbTHAx4lw.png\\" alt=\\"cdn-images-1\\" />\\n\\nIt may be helpful to add a navigation menu, so you can verify everything mounts and unmounts to the DOM correctly. If you want to level up your single-spa skills even more, make the navigation menu an entire child application whose activity function is `() => true`. An example that does just that is found [here](https://github.com/single-spa/single-spa-examples/blob/master/src/single-spa-examples.js#L3) and [here](https://github.com/single-spa/single-spa-examples/blob/master/src/navbar/navbar.app.js).\\n\\nWhile you are verifying that everything is working, keep in mind that each application goes through five phases:\\n\\n<img src=\\"https://cdn-images-1.medium.com/max/1600/1*utKlcxBkDXfQAQR52B0hAA.png\\" alt=\\"an applications\'s lifecycle\\" />\\n\\nConclusion\\n\\nAs you get your feet wet, you\u2019ll probably run into some (hopefully small) hiccups setting things up. When this tutorial is not enough, there are other resources on [Github](https://github.com/single-spa/single-spa) and here in the [docs](/docs/building-applications).\\n\\nSingle-spa is still a relatively new thing, and we\u2019d love to hear your feedback and questions. We welcome contributions from everyone.\\n\\nIf you\u2019re excited about the possibilities, feel free to contact me on [twitter (@joelbdenning)](https://twitter.com/Joelbdenning). And if you are not excited, then still feel free to contact me, but only after you leave some nasty comments :)"},{"id":"/2016/02/26/a-case-for-soa-in-the-browser","metadata":{"permalink":"/blog/2016/02/26/a-case-for-soa-in-the-browser","source":"@site/blog/2016-02-26-a-case-for-soa-in-the-browser.md","title":"A Case for SOA in the Browser","description":"So you are a web-developer. You write a lot of JavaScript. You have a large single-page application (SPA) with features to add and bugs to maintain. Over time the application grows in size and complexity. It becomes more difficult to modify one portion of the SPA without breaking another portion.","date":"2016-02-26T00:00:00.000Z","formattedDate":"February 26, 2016","tags":[],"readingTime":5.975,"hasTruncateMarker":false,"authors":[{"name":"Bret Little","url":"https://twitter.com/little_bret","imageURL":"https://pbs.twimg.com/profile_images/950593946178080768/eaNp6p-u_400x400.jpg"}],"frontMatter":{"title":"A Case for SOA in the Browser","author":"Bret Little","authorURL":"https://twitter.com/little_bret","authorImageURL":"https://pbs.twimg.com/profile_images/950593946178080768/eaNp6p-u_400x400.jpg"},"unlisted":false,"prevItem":{"title":"A step-by-step guide to single-spa","permalink":"/blog/2016/12/16/a-step-by-step-guide-to-single-spa"}},"content":"So you are a web-developer. You write a lot of JavaScript. You have a large single-page application (SPA) with features to add and bugs to maintain. Over time the application grows in size and complexity. It becomes more difficult to modify one portion of the SPA without breaking another portion.\\n\\nThe company is growing and you are looking for ways to scale the team and code-base. You add unit tests. You add a linter. You add continuous integration. You modularize the code with ES2015 modules, webpack, and npm. Eventually you even introduce new, independent SPAs with each SPA being owned and deployed by independent squads. Congratulations, you have successfully introduced service-oriented architecture on the front-end, or have you?\\n\\n## What is Service-oriented Architecture?\\n\\nThe fundamental concept behind service-oriented architecture is a service. A service is an isolated piece of code which can only be interacted with through its API. Unlike a shared library, a service itself can be deployed independently of its consumers. Think of a back-end API. The API is the service and the browser is the consumer. The API is deployed independently of the front-end application. There is also only one deployed version of the API available at a URL.\\n\\nContrast a service to a shared library. A shared library is a piece of code that is bundled and deployed with your code. For example, libraries such as Express, Lodash, and React are all shared libraries included in your application\u2019s distributable. Upgrading a version of a shared library requires a new deployment of that distributable.\\n\\nService-oriented architecture is an approach to building software where the application is composed of many independent and isolated services. Those services are independently deployable, generally non-versioned, and auto discoverable.\\n\\n## Why Service-oriented Architecture on the Front-end?\\n\\nThe benefits of SOA can be illustrated with this real life example from Canopy. At Canopy we have multiple single page applications. The first application is external to the customers and the second is internal, yet both applications share common functionality. That functionality includes among other things, authentication and error logging.\\n\\n<img src=\\"https://cdn-images-1.medium.com/max/1600/1*itLASVdD-5a3fm56hfltYQ.png\\"\\n     alt=\\"cdn-images-1\\"\\n/>\\n\\n<p style={{color: \'gray\', fontSize: \'15px\', fontStyle: \'italic\'}}>Shared libraries between two separate applications. <strong>App 1</strong> depends upon shared libs <strong>a</strong>, <strong>b</strong>, and <strong>c</strong>. <strong>App 2</strong> depends upon only shared libs <strong>a</strong> and <strong>b</strong>.</p>\\n\\nOverall the design looks good. The code is modularized and shared. The complexities arrive when we start to upgrade the code to different versions. For example, after a short period of time, <strong>App 2</strong> (being internal only) is upgraded to a new beta version of the shared lib <strong>b</strong>. Because the shared <strong>a</strong> also depends upon <strong>b</strong> (and we don\u2019t want multiple versions of <strong>b</strong> bundled) we also create a new version of <strong>a</strong>. This one change causes a rebuild and deploy of three separate pieces of code: <strong>App 2</strong> and shared libs <strong>a</strong> and <strong>b</strong>. Our dependency structure is no longer quite so simple.\\n\\n<img src=\\"https://cdn-images-1.medium.com/max/1600/1*T5YHqkoZApSvC32jVS0osw.png\\"\\n     alt=\\"cdn-images-2\\"\\n/>\\n\\n<p style={{color: \'gray\', fontSize: \'15px\', fontStyle: \'italic\'}}>In reality, a duplicate instance of lib <strong>a</strong> and <strong>b</strong> exist in both apps. Each app does not point to the same instance of the shared libraries, even when they are the same version. This is more noticeable when the shared libraries have separate versions.</p>\\n\\nNow imagine a bug in both versions of shared lib <strong>b</strong>. In order to fix the problem, you will have to republish both versions of <strong>a</strong> and <strong>b</strong> as well as <strong>c</strong>. Also <strong>App 1</strong> and <strong>App 2</strong> will have to be re-deployed. That is five new versions to publish and two apps to redeploy, all to fix one bug. All downstream dependencies have to be redeployed when a single library is changed. This is deploy dependency hell.\\n\\nService oriented architecture avoids these problems in a couple ways. Instead of bundling common dependencies, common code is shared through independent services. Services are not bundled, but rather loaded at run time. This also means that front-end services are not versioned (just like a back-end API). Both <strong>App 1</strong> and <strong>App 2</strong> load the exact same code for a front-end service.\\n\\n## Introducing sofe\\n\\nBuilt upon the new ECMAScript module specification, sofe is a JavaScript library that enables independently deployable JavaScript services to be retrieved at run-time in the browser. Because the new module specification isn\u2019t available within today\u2019s browsers, sofe relies upon [System.js](https://github.com/systemjs/systemjs) to load services at run-time.\\n\\nYou can load a sofe service either with static or asynchronous imports.\\n\\n```js\\n// Static imports\\nimport auth from \\"auth-service!sofe\\";\\nconst user = auth.getLoggedInUser();\\n// Asynchronous imports\\nSystem.import(\\"auth-service!sofe\\").then((auth) => auth.getLoggedInUser());\\n```\\n\\nThe real power behind sofe is that services are resolved at run-time, making them unversioned. If <strong>auth-service</strong> is redeployed, it is immediately made available to all upstream dependencies. The above scenario becomes much easier to resolve because there is only one version of each shared library as services. This is powerful because it allows you to deploy once, update everywhere. Also because the code is loaded at run-time, we can also enable developer tools to override what service is loaded into your application. Or in other words, you can test code on production without actually deploying to production.\\n\\n<img src=\\"https://cdn-images-1.medium.com/max/1600/1*o7IS8yKgYKSDc2w7VpyZFw.png\\"\\n     alt=\\"cdn-images-2\\"\\n/>\\n\\n<p style={{color: \'gray\', fontSize: \'15px\', fontStyle: \'italic\'}}>The common dependencies are now services that are independent from the application code. Because services are unversioned, the dependency structure is again flat. Each service can individually be deployed and be available to every upstream dependency.</p>\\n\\nObviously not all front-end code should be a service. Services have their own challenges. Specifically your code has to stay backwards compatible. But code can\u2019t always be backwards compatible. Sometimes there needs to be breaking changes. The same problem exists for back-end services. A back-end API has to stay backwards compatible. Breaking changes on the back-end are generally solved by either creating an entirely new (versioned) API or implementing feature toggles within the API itself. The same solution applies to sofe services. An entirely new sofe service can be deployed or feature toggles can exist inside the front-end service. However it is solved, the key point is that services exist outside your application within their own distributable.\\n\\nAnother potential problem for sofe services is performance. Because they are loaded at run-time, performance can become a concern if you synchronously load too many services during bootstrap. Performance degradation can be mitigated by asynchronously loading larger services after the application bootstraps. Despite these challenges, there are many benefits to services on the front-end. The most exciting thing about sofe is there is now an option for services in the browser. You can decide what should and shouldn\u2019t be a service.\\n\\nGetting started with sofe requires only System.js. But to help you get started we have built sofe to work with a variety of technologies, including webpack, Babel, jspm, and the Chrome Developer Tools. Sofe is also actively used in production at Canopy Tax. We would love feedback on sofe and a number of open source projects that have been built around it. As you approach your next front-end project or look to improve your existing app, consider how it might benefit from service oriented architecture.\\n\\nRead more about how to get started with sofe [here](https://github.com/CanopyTax/sofe)."}]}')}}]);
\ No newline at end of file
diff --git a/assets/js/b2f554cd.d3168130.js b/assets/js/b2f554cd.d3168130.js
new file mode 100644
index 000000000..607f8525c
--- /dev/null
+++ b/assets/js/b2f554cd.d3168130.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[3513],{3661:e=>{e.exports=JSON.parse('{"blogPosts":[{"id":"/2024/03/18/top-5-microfrontend-hosting-solutions","metadata":{"permalink":"/blog/2024/03/18/top-5-microfrontend-hosting-solutions","source":"@site/blog/2024-03-18-top-5-microfrontend-hosting-solutions.md","title":"Top 5 Microfrontend Hosting Solutions","description":"With rapid growth in recent years, microfrontends have become a popular solution with many companies, from large software organizations to small independent dev teams. Microfrontend hosting can get complicated quickly but it is a crucial aspect of scaling software organizations\' development cycle. Whether companies are using single-spa, module federation, or any other microfrontends tools, the management of CI/CD pipelines, deployments, CDNs, and service discovery is something all companies will have to solve.","date":"2024-03-18T00:00:00.000Z","formattedDate":"March 18, 2024","tags":[],"readingTime":7.18,"hasTruncateMarker":false,"authors":[],"frontMatter":{"title":"Top 5 Microfrontend Hosting Solutions"},"unlisted":false,"nextItem":{"title":"March 2024 Core Team Meeting","permalink":"/blog/2024/03/12/core-team-meeting-notes"}},"content":"With rapid growth in recent years, microfrontends have become a popular solution with many companies, from large software organizations to small independent dev teams. Microfrontend hosting can get complicated quickly but it is a crucial aspect of scaling software organizations\' development cycle. Whether companies are using single-spa, module federation, or any other microfrontends tools, the management of CI/CD pipelines, deployments, CDNs, and service discovery is something all companies will have to solve.\\n\\nSo what\u2019s the most effective solution? Because microfrontend hosting is a relatively new space, most companies have a hard time knowing where to start. Fortunately, there are very good options out there, and unless you have a good reason to, you don\u2019t have to build it out yourself. Here you\u2019ll find a list of the best hosting solutions and the important factors you\u2019ll need to consider to make the decision.\\n\\n## Server-side versus client-side rendering\\n\\nThis article focuses on hosting solutions for client-side rendered microfrontends, since the majority of microfrontend implementations rely solely on [client-side rendering](https://ferie.medium.com/what-is-the-client-side-rendering-and-how-it-works-c90210e2cd14).\\n\\n[Server-side rendering](https://www.heavy.ai/technical-glossary/server-side-rendering) of microfrontends often involves one or more docker containers that run [NodeJS](https://en.wikipedia.org/wiki/Node.js) to render [React](https://en.wikipedia.org/wiki/React_(software)), [Angular](https://en.wikipedia.org/wiki/Angular_(web_framework)), or [Vue](https://en.wikipedia.org/wiki/Vue.js) applications. For optimal performance, [single-spa server rendering](/docs/ssr-overview) also supports a single NodeJS runtime (rather than network requests between docker containers).\\n\\nIf your organization uses server-side rendering, the following rankings will still apply but may require some additional consideration that isn\u2019t covered here. \\n\\n## Low-level vs high-level hosting solutions\\n\\nHosting microfrontends can be accomplished with lower-level cloud services (AWS, GCP, Azure, etc) or via microfrontend-specific cloud hosting solutions such as Baseplate Cloud and Zephyr Cloud. Lower-level services may be more affordable but require much more initial setup and ongoing maintenance. Higher-level microfrontend hosting solutions provide targeted features to streamline the hosting and development process.\\n\\nCompanies who wish for sensible defaults and a straightforward implementation path may choose higher-level hosting solutions to save on DevOps and system admin costs. The additional built-in features of higher-level hosting solutions often reduce implementation time for companies migrating to or starting with microfrontends.\\n\\n## Solution comparison\\n\\n|                    | [Baseplate Cloud](https://baseplate.cloud) | [Zephyr Cloud](https://zephyr-cloud.io/) | [S3 + Cloudfront](https://aws.amazon.com/blogs/networking-and-content-delivery/amazon-s3-amazon-cloudfront-a-match-made-in-the-cloud/) | [GCP Storage + Cloud CDN](https://cloud.google.com/cdn/docs/overview) | [Azure Storage + CDN](https://learn.microsoft.com/en-us/azure/cdn/cdn-create-a-storage-account-with-cdn) |\\n| ------------ | ---------------- | ----------- | --------- | --------- | ----- |\\n| Global availability | \u2713 (via Cloudflare) | \u2713 (Cloudflare / Netlify) | \u2713 | \u2713 | \u2713 |\\n| Web app hosting <sup>1</sup> | \u2713 | \u2713 | \u2713 | \u2713 | \u2713 |\\n| Environments support <sup>2</sup> | \u2713 | \u2713 | (manual) | (manual) | (manual) |\\n| Autogenerated CI pipelines <sup>3</sup> | \u2713 | (planned)  | \u2717 | \u2717 | \u2717 |\\n| Automated microfrontend creation | \u2713 (via API and CLI) | \u2713 | (manual) | (manual) | (manual) |\\n| Custom domains | \u2713 (via DNS records) | \u2713 | \u2713 | \u2713 | \u2713 | \u2713 |\\n| Route / layout management <sup>4</sup> | \u2713 ([single-spa-layout template](/docs/layout-definition)) | (manual) | (manual) | (manual) | (manual) | (manual) |\\n| Self-owned assets storage <sup>5</sup> | \u2713 (optional bring-your-own-s3-bucket) | \u2713 | \u2713 | \u2713 | \u2713 |\\n| Edge-side HTML rendering optimizations <sup>6</sup> | \u2713 | (planned) | \u2717 | \u2717 | \u2717 |\\n| Service discovery <sup>7</sup> | \u2713 | \u2713 | (manual) | (manual) | (manual) |\\n| CORS / CSP / Cache Control | \u2713 (sensible defaults, fully customizable) | (planned)  | \u2713 | \u2713 | \u2713 |\\n| Usage metrics | \u2713 | (planned) | (manual) | (manual) | (manual) |\\n| Full audit trail <sup>8</sup> | \u2713 | \u2713 | (manual) | (manual) | (manual) |\\n| Permissions management | \u2713 (comprehensive, including microfrontend ownership) | \u2713 | \u2713 | \u2713 | \u2713 |\\n| Shared dependency management <sup>9</sup> | (planned) | \u2713 | (manual) | (manual) | (manual) |\\n| Server rendering support | (planned) | (planned) | \u2717 | \u2717 | \u2717 |\\n| Microfrontend marketplace <sup>10</sup> | (planned) | (planned) | \u2717 | \u2717 | \u2717 |\\n| Rolling deployments <sup>11</sup> | (planned) | (planned) | \u2717 | \u2717 | \u2717 |\\n\\n1. *Web apps hosting* refers to hosting the parent/root HTML file that initializes the microfrontends necessary for client-side rendering.\\n2. *Environment support* refers to hosting each microfrontend and web app on both internal test environments and live production environments. CI/CD Pipelines are configured to deploy to environments sequentially.\\n3. *Auto-generated CI pipelines* refers to generating configuration files for [Github workflow](https://docs.github.com/en/actions/using-workflows), [Azure Pipelines](https://azure.microsoft.com/en-us/products/devops/pipelines), [Gitlab CI](https://docs.gitlab.com/ee/ci/) and other CI/CD tools.\\n4. *Route / layout management* refers to managing the in-browser URL routes and DOM layout for microfrontends.\\n5. *Self-owned assets storage* refers to JS, CSS, HTML, font, and image files being stored within a bucket owned by the company implementing microfrontends, rather than by cloud hosting service.\\n6. *Edge-side HTML rendering optimizations* refers to dynamically changing the HTML file for a web app via code that runs in [edge locations](https://www.macrometa.com/articles/what-is-edge-side-rendering). Since edge locations are physically closer to most users than an origin server, this provides maximum performance beneifts. Performance benefits include inlining import maps, `<link rel=preload>`, and `<script>` elements so that the browser begins downloading the necessary resources for the current URL as quickly as possible.\\n7. *Service discovery* refers to all available microfrontends easily cross-communicating with each other. This is often done via [import maps](https://github.com/WICG/import-maps) or other manifest files.\\n8. *Full audit trail* refers to logs for all deployments, infrastructure changes, and configuration changes within the microfrontends system.\\n9. *Shared dependency management* refers to externalizing or federating shared npm packages between microfrontends, to improve performance by only downloading and executing the code for them once within a web page.\\n10. *Microfrontend marketplace* refers to purchasing or installing pre-made microfrontends into a company\'s system.\\n11. *Rolling deployments* refers to introducing new code changes to a microfrontend to only a fraction of the userbase, to minimize impact of releasing bad code.\\n\\n\\n## 1. Baseplate Cloud\\n\\n[Baseplate Cloud](https://baseplate.cloud/) tops the list for its ease of use and specific focus on single-spa hosting. Because it was made by the creator of single-spa, Baseplate\'s features have been informed by years of microfrontend and single-spa consultancies, making it the easiest microfrontend hosting choice for single-spa. Everything about the product simplifies and automates as much of the complexity as possible, and it\u2019s hard to find advantages in other solutions that beat this fact. Baseplate will probably be the best choice for any company that is prioritizing a streamlined cloud hosting experience.\\n\\nBaseplate\'s feature set automates the job functions of multiple software developers and frees up a lot of development resources without increasing the size of the development team. This easily offsets the cost of Baseplate\'s services.\\n\\nBaseplate supports the following features:\\n\\n- Web apps hosting\\n- Custom domains for web apps and static assets\\n- Unlimited deployable environments\\n- Unlimited microfrontends\\n- Autogenerated CI/CD pipelines\\n- Full audit trail\\n- Microfrontend-specific usage metrics\\n- CORS, CSP, and Cache-Control configuration\\n- Edge-side performance optimizations\\n\\nAlso of note, [Baseplate CDN](https://baseplate.cloud/docs/cdn/assets) is a source-available [Cloudflare worker](https://developers.cloudflare.com/workers/) designed for maximum performance and best practices. It is globally available at all [Cloudflare edge locations](https://www.cloudflare.com/network/).\\n\\n## 2. Zephyr Cloud\\n\\nFrom the creators of Module Federation, [Zephyr Cloud](https://zephyr-cloud.io/) is the premier hosting solution for module-federation-based microfrontends. It is currently in closed alpha with little publicly documented about its features.\\n\\n## 3. AWS S3 + Cloudfront\\n\\nAmazon Web Services (AWS) offers the low-level cloud services necessary for companies to set up a microfrontends hosting solution. The most common microfrontends hosting solution within AWS often involves a [Cloudflare distribution](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-overview.html) that acts as a public [CDN](https://en.wikipedia.org/wiki/Content_delivery_network), with a private [S3 bucket](https://aws.amazon.com/s3/) as the origin containing all static web files (Javascript, CSS, HTML) needed.\\n\\nThe advantage of using lower-level cloud hosting services is their initial lower costs\u2014however, that comes at the expense of increased setup and maintenance complexity compared to microfrontend-specific cloud hosting solutions.\\n\\nImplementation details will vary from company to company. It\'s common for each microfrontend\'s files to be stored within a (virtual) folder within the s3 bucket and the manifest or import map listing all microfrontends made available in a JSON file. Web apps using the microfrontends may have their own S3 bucket or be within the same S3 bucket.\\n\\n## 4. GCP Storage + Cloud CDN\\n\\nGoogle Cloud Platform provides equivalent low-level cloud services to AWS. The same technical details that apply to AWS S3 + Cloudfront also apply to [GCP Cloud Storage](https://cloud.google.com/storage?hl=en) and [GCP Cloud CDN](https://cloud.google.com/cdn/docs/overview).\\n\\n## 5. Azure Storage + CDN\\n\\nAzure Storage provides equivalent low-level cloud services to AWS. The same technical details that apply to AWS S3 + Cloudfront also apply to [Azure Storage](https://azure.microsoft.com/en-us/products/category/storage) and [GCP Cloud CDN](https://azure.microsoft.com/en-us/products/cdn)."},{"id":"/2024/03/12/core-team-meeting-notes","metadata":{"permalink":"/blog/2024/03/12/core-team-meeting-notes","source":"@site/blog/2024-03-12-core-team-meeting-notes.md","title":"March 2024 Core Team Meeting","description":"Attendees: Joel Denning, Milan Kovacic","date":"2024-03-12T00:00:00.000Z","formattedDate":"March 12, 2024","tags":[],"readingTime":1.685,"hasTruncateMarker":false,"authors":[],"frontMatter":{},"unlisted":false,"prevItem":{"title":"Top 5 Microfrontend Hosting Solutions","permalink":"/blog/2024/03/18/top-5-microfrontend-hosting-solutions"},"nextItem":{"title":"February 2024 Core Team Meeting","permalink":"/blog/2024/02/14/core-team-meeting-notes"}},"content":"Attendees: Joel Denning, Milan Kovacic\\n\\nDate: 2024-03-13\\n\\n## Meeting Agenda\\n\\n- Typescript migration: single-spa@7 - typescript, IE11, navigation cancelation\\n- Migration from SystemJS to native modules - use es-module-shims??\\n- Discuss creation of single-spa CLI\\n- Getting started documentation being updated by Milan\\n- Discuss future of shared dependency management\\n\\n### TypeScript Migration\\n\\nFifth typescript PR has been merged (https://github.com/single-spa/single-spa/pull/1202). Sixth one on the way\\n\\n### Migration to native modules\\n\\nDiscuss the limitations of native modules and import maps (external import maps, external import maps, etc). Discuss whether to use [import-map-injector](https://github.com/single-spa/import-map-injector) or [es-module-shims](https://github.com/guybedford/es-module-shims) or neither. Joel expressed concern about runtime parsing of modules, but Milan pointed out that Ruby on Rails as adopted es-module-shims. We looked at the performance benchmarks for es-module-shims, which show it\'s only a 5ms difference compared to native modules.\\n\\nWe also discussed possible collaboration with Zack Jackson on module federation\'s new runtime (called MFP) and whether that could help. Also discuss whether a [service worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) would be necessary or helpful to hook into the browser\'s loading of modules.\\n\\n### single-spa CLI\\n\\nSee [single-spa issue 1205](https://github.com/single-spa/single-spa/issues/1205) for Milan\'s proposal. Joel has hesitations about abstracting away bundler config and configuration files, but we decided to proceed with Milan\'s proposal, since developer experience is one of the main barriers to entry for developers and corporations who are used to managed configuration in other projects (NextJS, Vite, etc etc). The main concern is how to do it in a way where single-spa users don\'t have to go digging in node_modules regularly to be able to do what they need to do to their projects.\\n\\n### Shared dependencies management\\n\\nBaseplate Cloud plans to use [JSPM CDN](https://jspm.org/cdn/jspm-io) for native ES module shared dependencies. Managing the dependencies in the import map over time is important to do in a sensible way that avoids accidentally breaking production, while still allowing for incremental migration of dependencies on microfrontend at a time.\\n\\nWe didn\'t decide on anything concrete - just brainstormed solutions. Ideally the open source ecosystem can self-host shared dependencies as well."},{"id":"/2024/02/14/core-team-meeting-notes","metadata":{"permalink":"/blog/2024/02/14/core-team-meeting-notes","source":"@site/blog/2024-02-14-core-team-meeting-notes.md","title":"February 2024 Core Team Meeting","description":"Attendees: Joel Denning, Milan Kovacic, Ian Bacher, Jake Hayes","date":"2024-02-14T00:00:00.000Z","formattedDate":"February 14, 2024","tags":[],"readingTime":0.745,"hasTruncateMarker":false,"authors":[],"frontMatter":{},"unlisted":false,"prevItem":{"title":"March 2024 Core Team Meeting","permalink":"/blog/2024/03/12/core-team-meeting-notes"},"nextItem":{"title":"January 2024 Core Team Meeting","permalink":"/blog/2024/01/03/core-team-meeting-notes"}},"content":"Attendees: Joel Denning, Milan Kovacic, Ian Bacher, Jake Hayes\\n\\n## Meeting Agenda\\n\\n- TypeScript migration\\n  - single-spa\\n  - single-spa-react\\n- Maintenance update\\n- Baseplate\\n- Roadmap items\\n- Blog posts\\n\\n### TypeScript Migration\\n\\n1. Single-spa-layout broken types\\n2. New PR for migration [Single-spa](https://github.com/single-spa/single-spa/pull/1196)\\n\\n### Review other PR\'s\\n\\n1. Examination of an open [PR](https://github.com/single-spa/single-spa/pull/1189) to fix [Issue #1184](https://github.com/single-spa/single-spa/issues/1184)\\n   1. Discussed introducing a new [potential lifecycle hook](https://github.com/single-spa/single-spa/issues/1197)\\n\\n### Baseplate Pricing Feedback\\n\\n- Maybe indicate that GB storage is optional. It\'s possible to bring your own\\n- \\"The prices are not ridiculous\\" - Ian\\n- \\"The prices seem reasonable, and the descriptions make sense\\" - Jake\\n\\n### Roadmap Items\\n\\n- Removing default exports\\n- single-spa-playground was broken due to DNS records, Joel was able to fix that last week\\n- Look into CORS for single-spa-playground - @Ian will look into\\n\\n### Blog posts\\n\\n- Potentially adding Baseplate specific blog posts to single-spa"},{"id":"/2024/01/03/core-team-meeting-notes","metadata":{"permalink":"/blog/2024/01/03/core-team-meeting-notes","source":"@site/blog/2024-01-03-core-team-meeting-notes.md","title":"January 2024 Core Team Meeting","description":"Attendees: Joel Denning Jake Hayes, Milan Kovacic","date":"2024-01-03T00:00:00.000Z","formattedDate":"January 3, 2024","tags":[],"readingTime":0.78,"hasTruncateMarker":false,"authors":[],"frontMatter":{},"unlisted":false,"prevItem":{"title":"February 2024 Core Team Meeting","permalink":"/blog/2024/02/14/core-team-meeting-notes"},"nextItem":{"title":"December 2023 Core Team Meeting","permalink":"/blog/2023/12/12/core-team-meeting-notes"}},"content":"Attendees: Joel Denning Jake Hayes, Milan Kovacic\\n\\n## Achievements and Progress from December\\n\\n- Opened https://github.com/single-spa/create-single-spa/pull/393 to address create-single-spa dependencies\\n\\n## January 2024 Roadmap\\n\\n1. Migrate main `single-spa` project to typescript. See [issue 1185](https://github.com/single-spa/single-spa/issues/1185), [PR 1186](https://github.com/single-spa/single-spa/pull/1186) and [PR 1187](https://github.com/single-spa/single-spa/pull/1187).\\n2. Continue work on the consolidation and updates of the example projects\\n3. Review https://github.com/single-spa/create-single-spa/pull/393\\n\\n## Meeting Notes\\n\\n- Reviewed Typescript pull requests ([PR 1186](https://github.com/single-spa/single-spa/pull/1186) and [PR 1187](https://github.com/single-spa/single-spa/pull/1187))\\n- Discuss and update roadmap\\n- Baseplate Cloud update\\n- Review and comment on https://github.com/single-spa/single-spa/issues/1184\\n- Review https://github.com/single-spa/single-spa-react/issues/164\\n\\n## Initiatives and Goals\\n\\n- Adding unit tests to existing projects\\n- SystemJS -> ESM migration\\n- create-single-spa update (https://github.com/cruft/cruft)\\n- Release single-spa 6 as latest \u2705\\n- Improve shared dependencies management\\n- Autopublishes to npm\\n- Server rendering enhancements?\\n- Support for NextJS, NuxtJS, Remix, create-react-app, and other build tools\\n- Consolidate example projects \ud83d\udea7\\n- Feature voting\\n- Automated integration tests for popular frameworks\\n- Update create-single-spa dependencies \ud83d\udea7"},{"id":"/2023/12/12/core-team-meeting-notes","metadata":{"permalink":"/blog/2023/12/12/core-team-meeting-notes","source":"@site/blog/2023-12-12-core-team-meeting-notes.md","title":"December 2023 Core Team Meeting","description":"Attendees: Artur Androsovych, Ian Bacher, Jake Hayes, Milan Kovacic","date":"2023-12-12T00:00:00.000Z","formattedDate":"December 12, 2023","tags":[],"readingTime":0.725,"hasTruncateMarker":false,"authors":[],"frontMatter":{},"unlisted":false,"prevItem":{"title":"January 2024 Core Team Meeting","permalink":"/blog/2024/01/03/core-team-meeting-notes"},"nextItem":{"title":"single-spa 6","permalink":"/blog/2023/11/27/single-spa-6"}},"content":"Attendees: Artur Androsovych, Ian Bacher, Jake Hayes, Milan Kovacic\\n\\n## Achievements and Progress from November\\n\\n- Successfully released single-spa version 6, marking a significant milestone in the project\'s development\\n\\n## December 2023 Roadmap\\n\\n1. Update dependencies, and set up automation, starting with create-single-spa\\n2. Continue work on the consolidation and updates of the example projects\\n\\n## Meeting Notes\\n\\n- Welcomed Ian Bacher as a new addition to the core team.\\n- Reviewed single-spa roadmap\\n\\n## Initiatives and Goals\\n\\n- Adding unit tests to existing projects\\n- SystemJS -> ESM migration\\n- create-single-spa update (https://github.com/cruft/cruft)\\n- Release single-spa 6 as latest \u2705\\n- Improve shared dependencies management\\n- Autopublishes to npm\\n- Server rendering enhancements?\\n- Support for NextJS, NuxtJS, Remix, create-react-app, and other build tools\\n- Consolidate example projects \ud83d\udea7\\n- Feature voting\\n- Automated integration tests for popular frameworks\\n- Update create-single-spa dependencies \ud83d\udea7"},{"id":"/2023/11/27/single-spa-6","metadata":{"permalink":"/blog/2023/11/27/single-spa-6","source":"@site/blog/2023-11-27-single-spa-6.md","title":"single-spa 6","description":"We have released single-spa@6! The single-spa core team is committed to a stable single-spa runtime with very few breaking changes. We expect over 95% of single-spa users can upgrade easily without altering their changes!","date":"2023-11-27T00:00:00.000Z","formattedDate":"November 27, 2023","tags":[],"readingTime":9.505,"hasTruncateMarker":false,"authors":[{"name":"Joel Denning","url":"https://x.com/joelbdenning","imageURL":"https://avatars2.githubusercontent.com/u/5524384?s=460&v=4"}],"frontMatter":{"title":"single-spa 6","author":"Joel Denning","authorURL":"https://x.com/joelbdenning","authorImageURL":"https://avatars2.githubusercontent.com/u/5524384?s=460&v=4"},"unlisted":false,"prevItem":{"title":"December 2023 Core Team Meeting","permalink":"/blog/2023/12/12/core-team-meeting-notes"},"nextItem":{"title":"November 2023 Core Team Meeting","permalink":"/blog/2023/11/07/core-team-meeting-notes"}},"content":"We have released single-spa@6! The single-spa core team is committed to a stable single-spa runtime with very few breaking changes. We expect over 95% of single-spa users can upgrade easily without altering their changes!\\n\\n## Note from single-spa\'s creator\\n\\nOn September 22, 2015, I pushed single-spa\'s [initial commit](https://github.com/single-spa/single-spa/commit/1b885d783fde8000489cf19fc4db8e167aa55526). 8 years later, I am releasing single-spa@6. I am committed to this project and hope to improve and grow it for many years to come. The single-spa core team recently started monthly calls where we discuss important pull requests and roadmap (see first [meeting notes](https://single-spa.js.org/blog/2023/11/07/core-team-meeting-notes)). The future of microfrontends still includes single-spa.\\n\\nOn December 11, 2023, the company I founded is launching a product called [Baseplate Cloud](https://baseplate.cloud) that offers single-spa hosting. Baseplate Cloud is the single-spa hosting solution born from 4+ years of consulting with various companies who were implementing single-spa. [Baseplate CDN](https://baseplate.cloud/docs/cdn/intro) is a Cloudflare worker that proxies JS files from cloud storage, provides edge-side import map processing, auto-implements single-spa root configs, and more. Cloudflare edge-side processing provides many performance advantages while retaining the impressive scalability and security of Cloudflare. As a sign of good will towards the open source and single-spa communities, I have kept the [baseplate-cloudflare-worker](https://github.com/JustUtahCoders/baseplate-cloudflare-worker) public, with a \\"Commons Clause\\" + AGPL 3.0 license. Companies can use and contribute to baseplate-cloudflare-worker freely, as long as they don\'t try to sell it in competition to Baseplate Cloud. I would appreciate the community\'s backing and hope Baseplate becomes the way to financially sustain the single-spa project in the long term.\\n\\nIt would mean the world to me if your company or organization considered signing up for Baseplate\'s paid, private beta launch. We used the revenue the community gave us for [single-spa-workshop.com](https://single-spa-workshop.com) to create Baseplate, and plan to use Baseplate revenue to fund maintenance of single-spa\'s open source ecosystem. The Baseplate team is proudly a worker-owned business that has not sacrificed ownership of the company to outside investors. We built Baseplate with the revenue the community gave us via single-spa-workshop.com as the initial funding, which is only a few thousand dollars a month. The best Christmas present I could receive this year is a few dozen companies signing up immediately and putting Baseplate on their Q1 or Q2 roadmaps for 2024. I am asking for corporate partners to ensure long term financial sustainability so that single-spa will remain a good microfrontends solution for years to come.\\n\\n[Contact Baseplate Sales](mailto:sales@baseplate.cloud)\\n\\n## Summary\\n\\nsingle-spa@6 provides advanced features such as async navigation cancelation and parcel-only mode (via `patchHistoryApi`), while also updating the package configuration to use modern NodeJS and bundler features like [package entrypoints](https://nodejs.org/dist/latest-v16.x/docs/api/packages.html#packages_package_entry_points) and [`\\"type\\": \\"module\\"`](https://nodejs.org/dist/latest-v16.x/docs/api/packages.html#packages_type). We also updated `urlRerouteOnly` to default to `true`, as it boosts performance and we consider it to be a best practice to author applications that work when urlRerouteOnly is set to true.\\n\\n## Browser Support / IE11\\n\\n**We still support IE11** and the same versions of NodeJS (at least as old as Node 10). However, we\'ve changed our defaults such that IE11 is only supported with some additional configuration, as described in the IE11 Migration section below.\\n\\nFor the `single-spa` npm package, we plan single-spa@6 to be the last major version that supports IE11. In general, we\'ve released a major version of single-spa every 1-2 years. We do not have a concrete timeline or plans for single-spa@7, and will accept community contributions for any important patches to single-spa@6 after single-spa@7 is released.\\n\\nFor all surrounding packages (single-spa-react, single-spa-vue, systemjs-webpack-interop, single-spa-angular, etc) we may begin dropping IE11 support sooner than the single-spa@7 release. As we do so, we\'ll create documentation that lists the latest versions of packages that support IE11, and also accept community contributions to those versions for important updates.\\n\\nThe motivation for dropping IE11 support over time is to allow our core team to spend less time on supporting a nine year old browser and more time pushing the single-spa ecosystem forward. Also, we believe that the majority of end users should not suffer performance penalties because of a small percentage of users still using IE11. Slowly dropping IE11 also will also allow us to focus on a systemjs-less future for single-spa, where native browser modules are used rather than systemjs modules.\\n\\nWe understand and sympathize with companies who cannot drop IE11 support now, which is why we\'re supporting IE11 even though much of the ecosystem has already dropped it (Vue 3 does not support ie11, Angular only does after some effort, and even webpack 5 requires extra configuration to get it working in IE11). Many of single-spa\'s users are large financial institutions, large ecommerce companies, and other very large companies, where dropping IE11 support is a long process that involves many dozens of people from separate departments. We encourage single-spa users to start the conversations at your companies about dropping IE11 support, even if they take a long time or result in a decision to drop IE11 years in the future.\\n\\n## Migration\\n\\nWe think that >95% of single-spa users will be able to safely upgrade with no code changes. The breaking changes below are largely related to advanced features that most single-spa users do not use.\\n\\n### Steps\\n\\n1. If using SystemJS + import maps, change the URL of single-spa in your import map:\\n\\n```diff\\n<script type=\\"systemjs-importmap\\">\\n  {\\n    \\"imports\\": {\\n-     \\"single-spa\\": \\"https://cdn.jsdelivr.net/npm/single-spa@5.9.2/lib/system/single-spa.min.js\\"\\n+     \\"single-spa\\": \\"https://cdn.jsdelivr.net/npm/single-spa@6.0.0/lib/es2015/system/single-spa.min.js\\"\\n    }\\n  }\\n<\/script>\\n```\\n\\n2. In all your microfrontends (including root config), upgrade single-spa:\\n\\n```sh\\nnpm install single-spa@6\\nyarn add single-spa@6\\npnpm install single-spa@6\\n```\\n\\n3. Test things out.\\n4. If your app is not re-rendering during route transitions like it should (this is most common for Angular apps, but can happen in other frameworks to if you do a route transition without modifying the URL), change your root config\'s call to `start()`\\n\\n```diff\\nimport { start } from \'single-spa\';\\n\\n// DO NOT MAKE THIS CHANGE unless you are experiencing problems.\\n- start();\\n+ start({\\n+   urlRerouteOnly: false\\n+ });\\n```\\n\\nThat\'s it! If you experience other issues, let us know in Github issues.\\n\\n### IE11\\n\\nIf you support IE11, use the `es5` version of single-spa rather than `es2015`. The method of doing this depends on your configuration - some common ones are explained below:\\n\\n#### Import Maps\\n\\n```diff\\n<script type=\\"systemjs-importmap\\">\\n  {\\n    \\"imports\\": {\\n-     \\"single-spa\\": \\"https://cdn.jsdelivr.net/npm/single-spa@6.0.0/lib/es2015/system/single-spa.min.js\\"\\n+     \\"single-spa\\": \\"https://cdn.jsdelivr.net/npm/single-spa@6.0.0/lib/es5/system/single-spa.min.js\\"\\n    }\\n  }\\n<\/script>\\n```\\n\\n#### Webpack\\n\\nIf externalizing single-spa in your webpack config (very common, and the default with webpack-config-single-spa), you do not need to make the changes below. Otherwise, though, these changes will ensure you use the IE11-compatible version of single-spa.\\n\\n```js\\n// webpack.config.js\\nmodule.exports = {\\n  resolve: {\\n    alias: {\\n      \\"single-spa\\": require.resolve(\\"single-spa/lib/es5/esm/single-spa.min.js\\"),\\n    },\\n  },\\n};\\n```\\n\\n#### Rollup\\n\\nUse https://www.npmjs.com/package/@rollup/plugin-alias to alias the import similarly to webpack\\n\\n#### Import\\n\\nIf you do not wish to change bundler configuration, you can modify your import statements.\\n\\n```diff\\n- import { start } from \'single-spa\';\\n+ import { start } from \'single-spa/lib/es5/esm/single-spa.min.js\';\\n```\\n\\n## Breaking Changes\\n\\n- single-spa\'s package.json\'s `\\"main\\"` field now points to an es2015 version of single-spa that does not work in IE11. To support IE11, see section below.\\n- Delay patching history api until start() or patchHistoryApi() is called. [Github link](https://github.com/single-spa/single-spa/pull/827)\\n- Do not show start() warning when registerApplication hasn\'t been called (for parcel-only use cases) [Github link](https://github.com/single-spa/single-spa/pull/827)\\n- Change urlRerouteOnly default value to true. This is a performance boost for most applications, but for some situations can result in single-spa not triggering mounts/unmounts when it should. You can read more about it at https://single-spa.js.org/docs/api#start and https://github.com/single-spa/single-spa/issues/484. Angular users may want to set it to false due to nuanced behavior of angular router. To do so, call `start({urlRerouteOnly: false})` in your root config. [Github link](https://github.com/single-spa/single-spa/pull/828)\\n- `cancelNavigation(val)` no longer cancels navigation if `val` is falsy [Github link](https://github.com/single-spa/single-spa/pull/826)\\n- single-spa\'s package.json `\\"type\\"` is now set to `\\"module\\"`. This only impacts NodeJS usage of single-spa (not webpack/rollup/browser). Read more at [official nodejs docs](https://nodejs.org/dist/latest-v16.x/docs/api/packages.html#packages_type).\\n- single-spa\'s package.json now has `\\"exports\\"`. This changes which of single-spa\'s bundles are used by NodeJS, webpack, and rollup. The main change is that webpack / rollup will now use an IE11-incompatible (es2015) version of single-spa. See IE11 section below for more details. Additionally, an ESM version of single-spa will now be used when loaded via `import(\'single-spa\')` or `import \'single-spa\';`, whereas a UMD version will be used when calling `require(\\"single-spa\')`. To avoid the [dual package hazard](https://nodejs.org/dist/latest-v16.x/docs/api/packages.html#packages_dual_commonjs_es_module_packages), only use `import` or `require` to load single-spa in your NodeJS code - do not use both. You can see the package exports at https://github.com/single-spa/single-spa/blob/dea22f1aac39777a07252897ae625ab1d8313e9d/package.json#L8-L25.\\n- The published `umd` builds now have `.cjs` extensions rather than `.js`, since all `.js` files in the single-spa package are assumed to be ESM.\\n\\n```sh\\nFile structure published to npm\\n\\n# Before\\n# See https://www.jsdelivr.com/package/npm/single-spa?path=lib&version=5.9.3\\nlib/\\n  # IE11\\n  umd/\\n    single-spa.dev.js\\n    single-spa.min.js\\n  # IE11\\n  esm/\\n    single-spa.dev.js\\n    single-spa.min.js\\n  # IE11\\n  system/\\n    single-spa.dev.js\\n    single-spa.min.js\\n  # No IE11\\n  es2015/\\n    single-spa.dev.js\\n    single-spa.min.js\\n\\n# After\\n# See https://www.jsdelivr.com/package/npm/single-spa?path=lib&version=6.0.0\\nlib\\n  # IE11\\n  es5/\\n    umd/\\n      single-spa.dev.js\\n      single-spa.min.js\\n    system/\\n      single-spa.dev.js\\n      single-spa.min.js\\n    esm/\\n      single-spa.dev.js\\n      single-spa.min.js\\n  # No IE11\\n  es2015/\\n    umd/\\n      single-spa.dev.cjs\\n      single-spa.min.cjs\\n    system/\\n      single-spa.dev.js\\n      single-spa.min.js\\n    esm/\\n      single-spa.dev.js\\n      single-spa.min.js\\n```\\n\\n## Features\\n\\n## Async navigation cancelation\\n\\nWe\'ve added support for async navigation cancelation. To use it, call `cancelNavigation(promise)` with a promise as an argument. Single-spa will wait until that promise resolves/rejects before proceeding with navigation. If the promise resolves with a truthy value, navigation is canceled. If the promise resolves with a falsy value or rejects, navigation is not canceled. [Github link](https://github.com/single-spa/single-spa/pull/826)\\n\\n```js\\nwindow.addEventListener(\\"single-spa:before-routing-event\\", (evt) => {\\n  if (evt.detail.oldUrl === \\"/settings\\") {\\n    evt.detail.cancelNavigation(checkSettingsOkay());\\n  }\\n});\\n\\nasync function checkSettingsOkay() {\\n  const response = await fetch(\\"/api/settings-okay\\");\\n  if (response.ok) {\\n    return true;\\n  } else {\\n    alert(\\"Please fix your settings before leaving the page\\");\\n    return false;\\n  }\\n}\\n```\\n\\n### New patchHistoryApi\\n\\nWe\'ve exposed a new `patchHistoryApi()` api. This lets you use single-spa\'s modified implementations of pushState/replaceState/popstate/hashchange without using single-spa applications. This is intended to be used by single-spa users who exclusively use single-spa parcels, rather than applications [Github link](https://github.com/single-spa/single-spa/pull/827)\\n\\n```js\\nimport { patchHistoryApi, mountRootParcel } from \\"single-spa\\";\\n\\npatchHistoryApi({\\n  urlRerouteOnly: true,\\n});\\n\\n// now you don\'t need to call start() if you\'re only using parcels\\n\\nmountRootParcel(parcelConfig, parcelProps);\\n```\\n\\n### New profiler\\n\\nWe\'ve implemented a profiler that is available within the dev builds of single-spa@6. A visualization of the profiler is available in the single-spa-inspector@0.6.0 browser extension:\\n\\n- Implement profiler for lifecycle events. by @joeldenning in [#868](https://github.com/single-spa/single-spa/pull/868)\\n- Implement parcel and routing profiler events. by @joeldenning in [#903](https://github.com/single-spa/single-spa/pull/903)\\n\\n<img src=\\"/img/profiler-screenshot.png\\" alt=\\"Screenshot of single-spa-inspector profiler tab\\" />\\n\\n## Fixes\\n\\n- Fix regression with parcel name [Github link](https://github.com/single-spa/single-spa/pull/825)\\n- Ensure all reroute promises (triggerAppChange() return value) resolve even during cancelation [Github link](https://github.com/single-spa/single-spa/pull/831)\\n- fix(types): fix SingleSpaAppsByNewStatus interface by @FelixGraf in [#988](https://github.com/single-spa/single-spa/pull/988)\\n- Ensure app is unmounted during unregisterApplication. Resolves #871 by @joeldenning in [#875](https://github.com/single-spa/single-spa/pull/875)\\n\\n## Maintenance\\n\\n- Switch from yarn -> pnpm [Github link](https://github.com/single-spa/single-spa/pull/824)\\n- Upgrade all dependencies [Github link](https://github.com/single-spa/single-spa/pull/824)\\n- Upgrade husky from v4 to v7. Use pinst to avoid issues with yarn 2 users as described in https://typicode.github.io/husky/#/?id=yarn-2 [Github link](https://github.com/single-spa/single-spa/pull/824)\\n- Upgrade to Jest 27. Fix tests to work with Jest 27. [Github link](https://github.com/single-spa/single-spa/pull/824)\\n- Upgrade to Node 16. Fix tests to work with Node 16 (Fix tests in Node 15 #652) [Github link](https://github.com/single-spa/single-spa/pull/824)\\n- Run upgraded version of prettier on all files. [Github link](https://github.com/single-spa/single-spa/pull/824)\\n- Remove unused babel-eslint dependency [Github link](https://github.com/single-spa/single-spa/pull/824)\\n- Upgrade to new package names for all rollup plugins. (@rollup/plugin-node-resolve instead of rollup-plugin-node-resolve) [Github link](https://github.com/single-spa/single-spa/pull/824)\\n- Remove file size impact workflow since it\'s broken. by @joeldenning in [#879](https://github.com/single-spa/single-spa/pull/879)\\n- Remove console.log in test by @joeldenning in [#878](https://github.com/single-spa/single-spa/pull/878)"},{"id":"/2023/11/07/core-team-meeting-notes","metadata":{"permalink":"/blog/2023/11/07/core-team-meeting-notes","source":"@site/blog/2023-11-07-core-team-meeting-notes.md","title":"November 2023 Core Team Meeting","description":"Attendees: Joel Denning, Milan Kovacic, Jake Hayes","date":"2023-11-07T00:00:00.000Z","formattedDate":"November 7, 2023","tags":[],"readingTime":0.705,"hasTruncateMarker":false,"authors":[],"frontMatter":{},"unlisted":false,"prevItem":{"title":"single-spa 6","permalink":"/blog/2023/11/27/single-spa-6"},"nextItem":{"title":"Introducing Single-Spa\'s New Core Team Members","permalink":"/blog/2023/10/11/introducing-single-spa-new-core-team-members"}},"content":"Attendees: Joel Denning, Milan Kovacic, Jake Hayes\\n\\n## November 2023 Roadmap\\n\\n1. Release `single-spa@6` as latest\\n2. Consolidate and update the example projects\\n\\n## Meeting Notes\\n\\n- Open pull requests, pressing Github issues\\n  - We reviewed https://github.com/single-spa/single-spa-react/pull/197\\n- Core team vacancy\\n  - Add Jake Hayes to the #core-team channel, but not officially a core team member\\n  - Joel will reach out to Ian about joining the core team.\\n- Single-spa roadmap\\n- Maintenance update/plan\\n\\n## Roadmap Brainstorm\\n\\n- Adding unit tests to existing projects\\n- SystemJS -> ESM migration\\n- create-single-spa update (https://github.com/cruft/cruft)\\n- Release single-spa 6 as latest\\n- Improve shared dependencies management\\n- Autopublishes to npm\\n- Server rendering enhancements?\\n- Support for NextJS, NuxtJS, Remix, create-react-app, and other build tools\\n- Consolidate example projects\\n- Feature voting\\n- Automated integration tests for popular frameworks\\n- Update create-single-spa dependencies"},{"id":"/2023/10/11/introducing-single-spa-new-core-team-members","metadata":{"permalink":"/blog/2023/10/11/introducing-single-spa-new-core-team-members","source":"@site/blog/2023-10-11-introducing-single-spa-new-core-team-members.md","title":"Introducing Single-Spa\'s New Core Team Members","description":"Please welcome the latest additions to the Single-Spa core team. These talented individuals bring fresh energy and a wealth of expertise and are poised to revitalize and expand the Single-Spa project.","date":"2023-10-11T00:00:00.000Z","formattedDate":"October 11, 2023","tags":[],"readingTime":1.9,"hasTruncateMarker":false,"authors":[],"frontMatter":{},"unlisted":false,"prevItem":{"title":"November 2023 Core Team Meeting","permalink":"/blog/2023/11/07/core-team-meeting-notes"},"nextItem":{"title":"The single-spa core team is expanding","permalink":"/blog/2023/08/22/single-spa-core-is-expanding"}},"content":"Please welcome the latest additions to the Single-Spa core team. These talented individuals bring fresh energy and a wealth of expertise and are poised to revitalize and expand the Single-Spa project.\\n\\n## Meet the Team\\n\\n**[Artur Androsovych](https://github.com/arturovt)**\\n\\nArtur Androsovych is a Google Developer Expert in Angular and an open-source contributor who has been focusing on runtime performance and teaching teams about Angular internals for the past few years. He has maintained the single-spa-angular project for years, and we\'re excited for him to join the core team.\\n\\n**[Roberto Mosca](https://github.com/robmosca)**\\n\\nRoberto is a Principal Software Engineer at TravelPerk (www.travelperk.com), where he is the go-to person for all things related to their frontend platform. With a full-stack background, he\'s got his hands on a variety of tech \u2014 from Python to NodeJS, React, Webpack... Before diving into the world of business travel, he was immersed in biomedical research as a bioinformatician. When he is not in front of a screen, you\u2019ll find him swimming, cooking up some Italian delicacies, or tinkering with his Rubik\u2019s cube-solving robots.\\n\\n**[Milan Kovacic](https://github.com/MilanKovacic)**\\n\\nMilan Kovacic is a seasoned software consultant with deep expertise in various development domains. On the frontend side, his work is marked by proficiency in React, TypeScript, and the integration of microfrontends. For backend solutions, he mostly relies on the .NET framework, C#\u2014often utilizing microservices architecture. Additionally, Milan is experienced with cloud technologies, regularly working with platforms like AWS and Azure. Beyond traditional development, he places great emphasis on ensuring a smooth developer experience and promotes the use of automation and efficient DevOps practices to streamline development workflows.\\n\\nThese three new members will be joining current members Joel Denning, Carlos Filoteo, and Anthony Frehner to manage GitHub and Slack issues and actively develop new features. We\u2019d also like to give special recognition to contributors from Qiankun for their extensive support over the years.\\n\\nAs part of this team update, we\u2019ll also be creating a public roadmap, providing transparency about Single-Spa\'s future direction. To maintain transparency and encourage collaboration, we\'re establishing monthly meetings where the core team will discuss progress, challenges, and ideas. Meeting notes will be publicly available, ensuring that the community is well-informed and able to participate in our discussions.\\n\\nSo stay tuned and join us on this journey shaping the future of microfrontends."},{"id":"/2023/08/22/single-spa-core-is-expanding","metadata":{"permalink":"/blog/2023/08/22/single-spa-core-is-expanding","source":"@site/blog/2023-08-22-single-spa-core-is-expanding.md","title":"The single-spa core team is expanding","description":"We are happy to announce that the single-spa core team is opening applications for two new members! As a core team member, you will help us maintain and guide the growing single-spa ecosystem by responding to Github and Slack issues, implementing new features, and helping to create the roadmap for the future of single-spa.","date":"2023-08-22T00:00:00.000Z","formattedDate":"August 22, 2023","tags":[],"readingTime":1.345,"hasTruncateMarker":false,"authors":[],"frontMatter":{},"unlisted":false,"prevItem":{"title":"Introducing Single-Spa\'s New Core Team Members","permalink":"/blog/2023/10/11/introducing-single-spa-new-core-team-members"},"nextItem":{"title":"single-spa 5","permalink":"/blog/2020/02/24/single-spa-5"}},"content":"We are happy to announce that the single-spa core team is opening applications for two new members! As a core team member, you will help us maintain and guide the growing single-spa ecosystem by responding to Github and Slack issues, implementing new features, and helping to create the roadmap for the future of single-spa.\\n\\nOur current core team consists of Joel Denning, Carlos Filoteo, and Anthony Frehner. We also thank Justin McMurdie and Bret Little for their valuable contributions during their time with the single-spa core team.\\n\\nSingle-spa owes its success to the people and companies who support it. If you want to contribute but aren\u2019t able to join the core team, consider applying to be a maintainer. Maintainers are volunteers who receive Github write access to specific subprojects within the ecosystem. If you\u2019re a manager at a company that uses single-spa, we encourage you to allow your developers to volunteer their time as maintainers or core team members so that the project can continue to grow and develop.\\n\\nThe single-spa core team and maintenance are unpaid volunteer positions. Looking ahead, if any core team members or maintainers are interested in new paid roles, Convex Cooperative (the company Joel works for) will be considering hiring new developers from the single-spa team. It\u2019s important to state that Convex will not poach developers away from companies who allow their developers to help us maintain single-spa\u2014our priority is nurturing the growth and development of the single-spa ecosystem.\\n\\nIf interested in applying to be a single-spa maintainer or core team member, please fill out the following Google Form before September 1, 2023:\\n\\n[https://docs.google.com/forms/d/1zIfP2kYjNBCi-qjKf9T1-sNT1VLSXTB9twwX_mxKYxU/edit](https://docs.google.com/forms/d/1zIfP2kYjNBCi-qjKf9T1-sNT1VLSXTB9twwX_mxKYxU/edit)"},{"id":"/2020/02/24/single-spa-5","metadata":{"permalink":"/blog/2020/02/24/single-spa-5","source":"@site/blog/2020-02-24-single-spa-5.md","title":"single-spa 5","description":"Today we released single-spa@5.0.0.","date":"2020-02-24T00:00:00.000Z","formattedDate":"February 24, 2020","tags":[],"readingTime":4.29,"hasTruncateMarker":false,"authors":[{"name":"Joel Denning","url":"https://twitter.com/joelbdenning","imageURL":"https://avatars2.githubusercontent.com/u/5524384?s=460&v=4"}],"frontMatter":{"title":"single-spa 5","author":"Joel Denning","authorURL":"https://twitter.com/joelbdenning","authorImageURL":"https://avatars2.githubusercontent.com/u/5524384?s=460&v=4"},"unlisted":false,"prevItem":{"title":"The single-spa core team is expanding","permalink":"/blog/2023/08/22/single-spa-core-is-expanding"},"nextItem":{"title":"single-spa Inspector and 4.1","permalink":"/blog/2019/02/20/single-spa-inspector"}},"content":"Today we released single-spa@5.0.0.\\n\\nHere are the highlights:\\n\\n- Performance focus: 35% decrease in library size.\\n- A CLI for single-spa: [create-single-spa](/docs/create-single-spa)\\n- New tutorial videos: [Youtube playlist](https://www.youtube.com/playlist?list=PLLUD8RtHvsAOhtHnyGx57EYXoaNsxGrTU) / [Bilibili space](https://space.bilibili.com/495254378/video)\\n- New framework-specific example repositories - [React example](https://github.com/react-microfrontends), [Vue example](https://github.com/vue-microfrontends), [Multiple frameworks example](https://github.com/polyglot-microfrontends), [Full list](/docs/examples)\\n- Massively improved documentation, including [Concept: Microfrontends](/docs/microfrontends-concept) and [The Recommended Setup](/docs/recommended-setup).\\n\\n[Release notes here](https://github.com/single-spa/single-spa/releases/tag/v5.0.0)\\n\\n## Migration from 4 to 5\\n\\nFor every user we\'re aware of, **you do not need to change anything in your code in order to upgrade to single-spa@5**. The breaking changes listed in the release notes are the removal of features that were originally used by Canopy Tax, but were never documented.\\n\\nIf installing from npm, you can simply `npm install --save single-spa@5.0.0` or `yarn add single-spa@5.0.0`.\\n\\nAlternatively, single-spa is available on [cdnjs](https://cdnjs.com/libraries/single-spa), [jsdelivr](https://www.jsdelivr.com/package/npm/single-spa), and [unpkg](https://unpkg.com/browse/single-spa/).\\n\\nThe single-spa core team is committed to treating our users well, which includes not introducing massive breaking changes. The core single-spa API has not seen massive breaking changes [since single-spa@3 in August 2016](https://github.com/single-spa/single-spa/releases/tag/v3.0.0). We have added features and improved things, but single-spa is a stable technology. We are committed to maintaining it, documenting it, and adjusting it as technologies like in-browser modules become more and more popular and viable.\\n\\n## Performance improvements\\n\\nThe ESM version of single-spa@4 was 23.8kb (7.2kb gzipped). That was improved in single-spa@5 to 15.5kb (5.1kb gzipped). We did this by optimizing our build process and removing unused features.\\n\\n## single-spa CLI\\n\\nSince single-spa\'s inception, bundler configuration has been a huge source of user pain. We have heard this pain and implemented [create-single-spa](/docs/create-single-spa), which creates (and sometimes can update) repositories that are ready to be used as single-spa microfrontends. For Angular and Vue, the official CLIs are used with a few extra plugins automatically installed. For React, a default webpack config with decent eslint / prettier defaults is set up.\\n\\nAdditionally, we have added a lot of documentation for webpack in [The Recommended Setup](/docs/recommended-setup#build-tools-webpack--rollup).\\n\\n## Tutorial videos\\n\\nWe understand that single-spa is more than just a library - it is an architecture. The single-spa library itself is the core, but the surrounding ecosystem of concepts and libraries are equally important to successfully migrating to single-spa and having it work for you. As such, we have created a Youtube playlist, currently consisting of seven videos, to help you get started.\\n\\n[Youtube playlist](https://www.youtube.com/playlist?list=PLLUD8RtHvsAOhtHnyGx57EYXoaNsxGrTU) / [Bilibili space](https://space.bilibili.com/495254378/video)\\n\\nThe videos currently cover the following topics:\\n\\n- What are Microfrontends?\\n- In-browser vs build-time JavaScript modules\\n- Import Maps\\n- Local Development with single-spa and import maps\\n- Deploying Microfrontends / Continuous Integration (CI)\\n- SystemJS intro\\n- Lazy Loading\\n- Bundlers, webpack, and rollup.\\n\\n## New example repositories\\n\\nWhat started out as Canopy Tax\'s special sauce for independently deployed frontend microservices is now fully accessible to the public with our [new set of example repos](/docs/examples). We have a React example, a Vue example, and a polyglot (multiple framework) example. We hope to add an Angular example, after we achieve support for Angular 9. These example repositories are actively watched and maintained by the single-spa core team, and reflect our current opinions on the best, production-viable way to do microfrontends.\\n\\nFurthermore, we have deployed each of the examples to our new domains:\\n\\n- https://react.microfrontends.app\\n- https://polyglot.microfrontends.app\\n- https://vue.microfrontends.app\\n\\n## Documentation overhaul\\n\\nWe removed several dated documentation pages, and added several that were very much lacking. Here are a few pages that give you the most bang for your buck:\\n\\n- [Concept: Microfrontend](/docs/microfrontends-concept)\\n- [The Recommended Setup](/docs/recommended-setup)\\n- [create-single-spa CLI](/docs/create-single-spa)\\n\\n## Development builds and error codes\\n\\nTaking inspiration from the [react development and production builds](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build), we now publish to NPM both development and production builds in the following formats: UMD, ESM, and System.register.\\n\\nYou can see the [published build files here](https://unpkg.com/browse/single-spa@5.0.0/lib/). The `.dev.js` files provide full debugging information in the browser console, whereas the `.min.js` files give you a numeric error code and a link to a documentation page that explains the error. We hope that these error codes and documentation for them will improve discoverability of relevant documentation when you\'re setting up single-spa.\\n\\nAn example of these new documentation pages for error codes is [found here](/error/?code=35&arg=application&arg=app1&arg={}).\\n\\n## Governance\\n\\nSome of you may have noticed that we recently moved all github repos from https://github.com/CanopyTax to https://github.com/single-spa. Canopy Tax was the company where single-spa was first authored, but as a core team we asked to move ownership and governance of the projects to an organization fully managed by the open source community. In agreement with Canopy, we made that change.\\n\\nThis change does not mean anything drastic for single-spa. Its license was and is MIT, and we have no plans to do anything with the project besides make it better.\\n\\n## Where next?\\n\\nWe are actively [translating the single-spa documentation to Chinese](https://github.com/single-spa/zh-hans.single-spa.js.org), and hope to add other languages soon. We will add full [Angular 9 support](https://github.com/single-spa/single-spa-angular/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+angular+9) soon, and hope to add [server rendering](https://github.com/single-spa/single-spa/issues/103) in an upcoming release.\\n\\nPlease [contribute to our code](/docs/contributing-overview) and [ecosystem](/docs/ecosystem), [join our single-spa slack channel](https://join.slack.com/t/single-spa/shared_invite/zt-2efw13fg4-oJgemeyCUJv4~JrQlYttnA), [follow our official Twitter account](https://twitter.com/Single_spa), and contribute to [our open collective](https://opencollective.com/single-spa). The [single-spa core team](/contributors) all have full-time jobs and maintain this project on a volunteer basis."},{"id":"/2019/02/20/single-spa-inspector","metadata":{"permalink":"/blog/2019/02/20/single-spa-inspector","source":"@site/blog/2019-02-20-single-spa-inspector.md","title":"single-spa Inspector and 4.1","description":"Background","date":"2019-02-20T00:00:00.000Z","formattedDate":"February 20, 2019","tags":[],"readingTime":1.775,"hasTruncateMarker":false,"authors":[{"name":"Anthony Frehner","url":"https://twitter.com/aahfrena","imageURL":"https://pbs.twimg.com/profile_images/1037162092963348480/1XLEV4MK_400x400.jpg"}],"frontMatter":{"title":"single-spa Inspector and 4.1","author":"Anthony Frehner","authorURL":"https://twitter.com/aahfrena","authorImageURL":"https://pbs.twimg.com/profile_images/1037162092963348480/1XLEV4MK_400x400.jpg"},"unlisted":false,"prevItem":{"title":"single-spa 5","permalink":"/blog/2020/02/24/single-spa-5"},"nextItem":{"title":"single-spa parcels, explained","permalink":"/blog/2018/06/19/single-spa-parcels-explained"}},"content":"## Background\\n\\nFor a long time, Canopy has had the benefit of using a tool called [sofe inspector](https://github.com/single-spa/sofe-inspector) (note: this is an out-of-date version of it) to list, override, and interact with single-spa applications. There has always been a desire to [figure out how to share this tool so others can benefit as well](https://github.com/single-spa/single-spa/issues/151).\\n\\nWith that in mind, I\'m proud to announce an initial release for **[single-spa Inspector](https://github.com/single-spa/single-spa-inspector)**! single-spa Inspector is a Firefox and Chrome extension, much like React/Vue devtools, that allows you see and interact with your single-spa applications and configuration.\\n\\n## Current Inspector Features\\n\\n- List registered applications\\n- Show application status\\n- Force an app to mount or unmount\\n- Hover over an app name to have an \\"inspect element\\"-like view of your apps (Overlays)\\n\\n(Note: Overlays require a small update to your code, but should hopefully be simple! See [how to configure app overlays](https://github.com/single-spa/single-spa-inspector#configuring-app-overlays))\\n\\n**The single-spa Inspector will only work with single-spa versions 4.1 and higher**, since we had to expose and add some functionality to the single-spa library itself in order to implement these features.\\n\\n## single-spa 4.1\\n\\nsingle-spa 4.1 was released, which includes a couple of key updates:\\n\\n1. Support for single-spa Inspector\\n1. ESM bundle output\\n1. Simpmlified test configuration for developers/contributors to single-spa\\n\\nFor most people, ESM (EcmaScript Module) support shouldn\'t affect how you use single-spa, but for those looking to play around with modules or other advanced Javascript things, it\'s a welcome addition.\\n\\nWe also changed our test suite to purely use Jest instead of Saucelabs, and hopefully false positive \\"failing\\" tests on pull requests will be a thing of the past.\\n\\n## Help Wanted!\\n\\nIf you would like to suggest a new feature for single-spa Inspector, report a bug, improve our (admittedly horrible and hopefully temporary) UI/UX, or add features, please see the [github repo](https://github.com/single-spa/single-spa-inspector) and hack away!\\n\\nWe also hope to update some of our example repos to the lastest single-spa so that anyone with the extension installed can test out the features and see how to implement overlays. But this process will go faster if someone wants to help out. :)\\n\\nThank you!"},{"id":"/2018/06/19/single-spa-parcels-explained","metadata":{"permalink":"/blog/2018/06/19/single-spa-parcels-explained","source":"@site/blog/2018-06-19-single-spa-parcels-explained.md","title":"single-spa parcels, explained","description":"Ever since single-spa@1.0.0, the single-spa team has been dedicated to bringing microservices to the frontend. We have made it possible for AngularJS, React, Angular, Vue, and other frameworks to coexist side by side in the same page.","date":"2018-06-19T00:00:00.000Z","formattedDate":"June 19, 2018","tags":[],"readingTime":3.69,"hasTruncateMarker":false,"authors":[{"name":"Joel Denning","url":"https://twitter.com/joelbdenning","imageURL":"https://avatars2.githubusercontent.com/u/5524384?s=400&u=ff145fcb2ae5305555628a446e9f725d4e145aaa&v=4"}],"frontMatter":{"title":"single-spa parcels, explained","author":"Joel Denning","authorURL":"https://twitter.com/joelbdenning","authorImageURL":"https://avatars2.githubusercontent.com/u/5524384?s=400&u=ff145fcb2ae5305555628a446e9f725d4e145aaa&v=4"},"unlisted":false,"prevItem":{"title":"single-spa Inspector and 4.1","permalink":"/blog/2019/02/20/single-spa-inspector"},"nextItem":{"title":"A step-by-step guide to single-spa","permalink":"/blog/2016/12/16/a-step-by-step-guide-to-single-spa"}},"content":"Ever since single-spa@1.0.0, the single-spa team has been dedicated to bringing microservices to the frontend. We have made it possible for AngularJS, React, Angular, Vue, and other frameworks to coexist side by side in the same page.\\n\\nAnd with the release of [version 4](https://github.com/single-spa/single-spa/releases/tag/v4.0.0), I\u2019m pleased to announce that [single-spa](https://github.com/single-spa/single-spa) is expanding that effort so that **_individual components_** written with different frameworks can interoperate. It is new terrain for the single-spa community, which previously had focused on getting large applications to interoperate with each other, instead of the individual components.\\n\\n## Another way to do framework agnostic components?\\n\\nFor those familiar with [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) and [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements), you may be wondering why a JavaScript library would try to do what browsers are starting natively to do.\\n\\nAnd as one of the contributors to the custom elements polyfill, let me be the first one to say that we did not make this decision lightly.\\n\\nIf you\u2019re interested in diving into the details, check out [One Company\u2019s Relationship With Custom Elements](https://medium.com/canopy-tax/one-companys-relationship-with-custom-elements-d360baf3b253), which explains some of the difficulties we\u2019ve been through with web components and custom elements.\\n\\nTLDR: React and some other frameworks don\u2019t interop with custom elements very well. Additionally dealing with inner HTML, attributes vs properties, and customized builtins can be a pain.\\n\\n## Okay but you haven\u2019t told me what a single-spa parcel is\\n\\nA parcel is single-spa\u2019s way of building a component in one framework and using it in another.\\n\\nTo implement a parcel, just create a JavaScript object that has 3\u20134 functions on it. We call this JavaScript object a _parcel config_ and there are three required functions to implement: bootstrap, mount, and unmount. A fourth function, update, is optional.\\n\\nEach of the functions will be called by single-spa at the right time, but the parcel config will control what happens. In other words, single-spa controls the \u201cwhen,\u201d but the parcel config controls the \u201cwhat\u201d and the \u201chow.\u201d\\n\\nOnce you\u2019ve implemented the parcel config, simply call singleSpa.mountRootParcel(parcelConfig, parcelProps) to mount it. This is the key to what makes parcels framework agnostic \u2014 regardless of whether the parcel config is implemented with React, Angular, Vue, or anything else, to use the parcel you always just call mountRootParcel().\\n\\n## A few more specifics\\n\\nWe\u2019ve glossed over a few things that I want to touch on real quick:\\n\\n- **How do you implement the lifecycle functions on the parcel config?**\\n\\n      \\t\\tUse a helper library for your framework of choice. [single-spa-react](https://github.com/single-spa/single-spa-react), [single-spa-angular](https://github.com/single-spa/single-spa-angular) (for angular@2+), [single-spa-angularjs](https://github.com/single-spa/single-spa-angularjs), [single-spa-vue](https://github.com/single-spa/single-spa-vue), and [others](https://github.com/single-spa/single-spa/blob/master/docs/single-spa-ecosystem.md) will implement the entire parcel config for you.\\n\\n- **What are the props you pass to mountRootParcel()?**\\n\\n      \\t\\tThe props passed as the second argument to singleSpa.mountRootParcel(parcelConfig, parcelProps) are an object with one required prop and as many custom props as you\u2019d like. The required prop is domElement, which tells the parcel where to mount. And the custom props get passed through to the parcel config lifecycle functions.\\n\\n- **How do you re-render and unmount a parcel?**\\n\\n      \\t\\tThe singleSpa.mountRootParcel() function returns a parcel object that lets you re-render and unmount the parcel whenever you\u2019d like to.\\n\\n      \\t\\t<iframe src=\\"https://medium.com/media/b2d981b380b937009f7ce84e1cc2d753\\" frameBorder=\\"0\\" />\\n\\n## Syntactic sugar makes this easier\\n\\nCalling all of those functions manually might get annoying. So let\u2019s make it easier. Here\u2019s an example of some syntactic sugar for React. Similar features will be added soon for Angular, Vue, and other frameworks.\\n\\n<iframe src=\\"https://medium.com/media/9b5904d3423359cb2eef410f9ee35648\\" frameBorder=\\"0\\" />\\n\\n## How hard is it to try this out?\\n\\nYou can get started with parcels immediately, without using the rest of single-spa. To do so, either npm install or script tag single-spa, then call mountRootParcel with your first parcel config.\\n\\nYou can also check out [this codepen example](https://codepen.io/joeldenning/pen/qKVoQg?editors=0010#0) to start out.\\n\\nAnd if you are already a user of [single-spa applications](https://github.com/single-spa/single-spa/blob/master/docs/applications.md), parcels mean that your applications can mount and unmount shared functionality whenever you want them to. Since parcels don\u2019t have [activity functions](https://github.com/single-spa/single-spa/blob/master/docs/configuration#activity-function), you don\u2019t have to set up routes for them.\\n\\n## Let us know what you think!\\n\\nWe\u2019d love to get your feedback on parcels. What do you think of this new way of framework interop? Is the implementation easy to understand? Are parcels useful for you or do they not quite fit into what you\u2019re trying to accomplish?How hard was it for you to try out?\\n\\nCheck out the [official docs](https://github.com/single-spa/single-spa/blob/master/docs/parcels.md) for more examples, explanations, and [api documentation](https://github.com/single-spa/single-spa/blob/master/docs/parcels-api.md).\\n\\nAnd let us know your thoughts in the [single-spa Slack channel](https://join.slack.com/t/single-spa/shared_invite/zt-2efw13fg4-oJgemeyCUJv4~JrQlYttnA), a [Github issue](https://github.com/single-spa/single-spa/issues), or [on Twitter](https://twitter.com/Single_spa)!"},{"id":"/2016/12/16/a-step-by-step-guide-to-single-spa","metadata":{"permalink":"/blog/2016/12/16/a-step-by-step-guide-to-single-spa","source":"@site/blog/2016-12-16-a-step-by-step-guide-to-single-spa.md","title":"A step-by-step guide to single-spa","description":"Running Angular 1, React, Angular 2, and Vue.js side by side sounds pretty cool. And it seems appealing to have multiple applications coexisting on the same page, each lazily loaded.","date":"2016-12-16T00:00:00.000Z","formattedDate":"December 16, 2016","tags":[],"readingTime":9.705,"hasTruncateMarker":false,"authors":[{"name":"Joel Denning","url":"https://twitter.com/Joelbdenning","imageURL":"https://pbs.twimg.com/profile_images/716746867451625472/2NMyKAd1_400x400.jpg"}],"frontMatter":{"title":"A step-by-step guide to single-spa","author":"Joel Denning","authorURL":"https://twitter.com/Joelbdenning","authorImageURL":"https://pbs.twimg.com/profile_images/716746867451625472/2NMyKAd1_400x400.jpg"},"unlisted":false,"prevItem":{"title":"single-spa parcels, explained","permalink":"/blog/2018/06/19/single-spa-parcels-explained"},"nextItem":{"title":"A Case for SOA in the Browser","permalink":"/blog/2016/02/26/a-case-for-soa-in-the-browser"}},"content":"Running Angular 1, React, Angular 2, and Vue.js side by side sounds pretty cool. And it seems appealing to have multiple applications coexisting on the same page, each lazily loaded.\\n\\nBut using [single-spa](/) for the first time can be tricky because you\u2019ll come across terms like \u201capplication lifecycles\u201d, \u201croot application\u201d, \u201cloading function\u201d, \u201cchild application\u201d, and \u201cactivity function.\u201d\\n\\nThis blog post will take you through setting things up and what choices you have when using single-spa. It\u2019s based on what I\u2019ve seen at [Canopy Tax](https://medium.com/canopy-tax) where we went from an Angular 1 monolith to an Angular 1, React, and Svelte polyglot.\\n\\nIf you\u2019d like to jump straight to a fully working, self contained code example, check out this [webpack single-spa starter project](https://github.com/joeldenning/simple-single-spa-webpack-example).\\n\\n## Step One: choose a module loader.\\n\\nYour module loader / bundler is the library you\u2019ll use to lazy load code. I recommend either [Webpack](https://webpack.js.org/) or [JSPM](https://jspm.io/), if you\u2019re starting from scratch.\\n\\nIf you go with Webpack, try to use Webpack 2 if you can, since it has [support for promise-based lazy loading](https://webpack.js.org/guides/migrating/#code-splitting-with-es2015). This will make things easier for you later on, since single-spa requires that your [loading functions](https://github.com/single-spa/single-spa/blob/master/docs/root-application.md#loading-function) return promises. If you can\u2019t use Webpack 2, getting single-spa to lazy load your code with Webpack 1 will require some boilerplate code.\\n\\nJSPM/SystemJS has worse documentation than Webpack, but is a great solution for module loading if you can get past that. I recommend using jspm@0.17\u200a\u2014\u200ait\u2019s still in beta but has been worked on for over a year and at Canopy we find it stable enough to use in production.\\n\\nIf you\u2019re struggling to decide between the two, then ask yourself the following: Do I want multiple completely separate bundles? If you don\u2019t, I recommend Webpack because it has better docs, a larger community, and fewer gotchas. Otherwise, I\u2019d go with JSPM, since Webpack has no plans to support dynamic runtime loading [(See tweet below from Mr. Larkin, himself)](https://twitter.com/TheLarkInn/status/789968589419745280).\\n\\n## Step Two: create a brand new HTML file\\n\\nThe next step is to create what single-spa calls your [\u201croot application.\u201d](https://github.com/single-spa/single-spa/blob/master/docs/root-application.md) Really your root application is just the stuff that initializes single-spa, and it starts with an HTML file.\\n\\nEven if you\u2019ve got an existing project that already has it\u2019s own HTML file, I recommend starting fresh with a new HTML file. That way, there is a clear distinction between what is in your root application (shared between all apps) and what is in a child application (not shared with everything).\\n\\nYou\u2019ll want to keep your root application as small as possible, since it\u2019s sort of the master controller of everything and could become a bottleneck. You don\u2019t want to be constantly changing both the root application and the child applications.\\n\\nSo for now, just have a `<script>` to a single JavaScript file (root-application.js), which will be explained in Step Three.\\n\\nSince Webpack is probably the more common use case, my code examples from here on will assume that you\u2019re using Webpack 2. The equivalent Webpack 1 or JSPM code has all the same concepts and only some minor code differences.\\n\\n```html\\n<!doctype html>\\n<html>\\n  <head>\\n    <meta charset=\\"utf-8\\" />\\n    <meta name=\\"viewport\\" content=\\"width=device-width\\" />\\n    <title>A single-spa application</title>\\n  </head>\\n  <body>\\n    <div id=\\"cool-app\\"></div>\\n    <script src=\\"root-application.js\\"><\/script>\\n  </body>\\n</html>\\n```\\n\\n## Step Three: register an \u201capplication\u201d\\n\\nNow it\u2019s time to finish up your root application by writing your \u201croot-application.js\u201d file. The primary purpose of root-application.js is to call [singleSpa.registerApplication(..)](https://github.com/single-spa/single-spa/blob/master/docs/root-application.md#declaring-child-applications) for each of the applications that will be managed by single-spa.\\n\\nIf you\u2019re into analogies, you can think of single-spa as the operating system for your single page application, managing which \u201cprocesses\u201d (or \u201cchild applications\u201d) are running at any given time. At any moment, some of the child applications will be active on the DOM and others will not. As the user navigates throughout the app, some applications will be unmounting from the DOM and others will be mounting to the DOM.\\n\\nAnother way to look at it is that single-spa is a master router on top of your other routers.\\n\\nTo do this, first `npm install single-spa` and then call the [registerApplication](https://github.com/single-spa/single-spa/blob/master/docs/root-application.md#declaring-child-applications) function:\\n\\n```js\\nimport { registerApplication, start } from \\"single-spa\\";\\n\\n// Register your first application with single-spa. More apps will be registered as you create them\\nregisterApplication(\\"cool-app\\", loadCoolApp, isCoolAppActive);\\n\\n// Tell single-spa that you\'re ready for it to mount your application to the DOM\\nstart();\\n\\n// This is a \\"loading function\\"\\nfunction loadCoolApp() {\\n  return import(\\"./cool-app/cool.app.js\\");\\n}\\n\\n// This is an \\"activity function\\"\\nfunction isCoolAppActive() {\\n  return window.location.hash.startsWith(\\"#/cool\\");\\n}\\n```\\n\\nBecause single-spa is _so very_ cool, we\u2019ve created an app called \u201ccool-app\u201d that will be lazy loaded and mounted to the DOM whenever the url hash starts with `#/cool`.\\n\\nThe `loadCoolApp` function is what single-spa calls a loading function. Inside of it, the `import` introduces a code splitting point\u200a\u2014\u200aWebpack will create separate code chunks that will be lazy loaded by single-spa.\\n\\nFor your specific project, you probably won\u2019t have a hash prefix of \u201ccool\u201d, but I recommend establishing some kind of convention that makes it easy to determine which apps are active. This will simplify the maintenance of your activity functions, as you add more and more child applications.\\n\\nIf you\u2019re going to start out with just one child application, then it might make sense to implement the activity function as `() => true`. You can worry about getting fancier once you have more than one application.\\n\\nThe last thing is to call `start()`. This is something you **must do for things to work.** The purpose is to give control over timing and performance. But until that is a concern, `start` is just one of those things you do, and then maybe [read about it](https://github.com/single-spa/single-spa/blob/master/docs/single-spa-api.md#start) later if you ever need to.\\n\\n## Step Four: create \u201c.app.js\u201d file\\n\\nWhen you open up your index.html file in the browser, you\u2019ll now see\u2026.. a blank screen! We\u2019re really close, but there\u2019s one crucial step left: building your app.js file.\\n\\nAfter that, you\u2019ll have everything working for your first single-spa application.\\n\\nAn app.js file is a configuration file that you create for each child application. It is the code that is lazy loaded when your activity function returns true.\\n\\nThere are three things that you need to implement in the app.js file:\\n\\n<ol>\\n  <li><a href=\\"\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">A bootstrap lifecycle</a></li>\\n  <li><a href=\\"\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">A mount lifecycle</a></li>\\n  <li><a href=\\"\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">An unmount lifecycle</a></li>\\n</ol>\\n\\nA \u201clifecycle\u201d is a function or array of functions that will be called by single-spa; you export these from the app.js file. Each function must return a Promise so that single-spa knows when it is completed.\\n\\nHere is a simple example:\\n\\n```js\\n// single-spa will import this file and call the exported lifecyle functions\\n\\nlet user;\\n\\nexport function bootstrap() {\\n  return fetch(\\"/api/users/0\\")\\n    .then((response) => response.json())\\n    .then((json) => (user = json));\\n}\\n\\nexport function mount() {\\n  /* This is normally where you would have your framework-specific code like\\n   * ReactDOM.render or angular.bootstrap(). The fact that you can put *anything*\\n   * into this function is what makes single-spa so powerful -- any framework\\n   * can implement a \\"mount\\" and \\"unmount\\" to become a single-spa application.\\n   */\\n  return Promise.resolve().then(() => {\\n    document.getElementById(\\"user-app\\").innerHTML = `\\n        <div>\\n          Hello ${user.name}!\\n        <div>\\n      `;\\n  });\\n}\\n\\nexport function unmount() {\\n  /* Real world use cases would be something like ReactDOM.unmountComponentAtNode()\\n   * or vue.$destroy()\\n   */\\n  return Promise.resolve().then(() => {\\n    document.getElementById(\\"user-app\\").innerHTML = \\"\\";\\n  });\\n}\\n```\\n\\nAt this point, you might be seeing the `document.getElementById` and `innerHTML =` and worry that you\u2019ve been duped\u200a\u2014\u200amaybe single-spa is really just a poor excuse for a ui component framework.\\n\\nAnd really, don\u2019t we already have a lot of different ways to write UI components?\\n\\n### Getting all of those frameworks to work together.\\n\\n_Using multiple frameworks_ is where single-spa really shines. It is not a ui framework itself, but a framework for using other frameworks.\\n\\nEach child application can be written in any framework, so long as it implements application lifecycle functions. Then the mini-apps cooperate to form the entire single page application.\\n\\nSo going back to our previous example, we could choose to write our \u201ccool.app.js\u201d as an Angular 1 app, and choose something else for future apps:\\n\\n```js\\nimport singleSpaAngularJS from \\"single-spa-angularjs\\";\\nimport angular from \\"angular\\";\\nimport \\"./app.module.js\\";\\nimport \\"./routes.js\\";\\n\\nconst domElementGetter = () => document.getElementById(\\"cool-app\\");\\n\\nconst angularLifecycles = singleSpaAngularJS({\\n  angular,\\n  domElementGetter,\\n  mainAngularModule: \\"single-spa-app\\",\\n  uiRouter: true,\\n  preserveGlobal: true,\\n});\\n\\nexport const bootstrap = [\\n  aboutToBootstrap,\\n  angularLifecycles.bootstrap,\\n  doneBootstrapping,\\n];\\n\\nexport const mount = [angularLifecycles.mount];\\n\\nexport const unmount = [angularLifecycles.unmount];\\n\\nfunction aboutToBootstrap() {\\n  console.log(\\"about to bootstrapping\\");\\n  return Promise.resolve();\\n}\\n\\nfunction doneBootstrap() {\\n  console.log(\\"finished bootstrapping\\");\\n  return Promise.resolve();\\n}\\n```\\n\\nIn this example, we use a helper library called [single-spa-angularjs](https://github.com/single-spa/single-spa-angularjs) which abstracts away the specifics of initializing Angular 1 apps. This blogpost doesn\u2019t show you the `app.module.js` or `routes.js` files, but you can see an example implementation [here](https://github.com/single-spa/single-spa-examples/tree/master/src/angularJS).\\n\\nThe pattern is to call `singleSpaAngularJS` at the very beginning, which returns `bootstrap`, `mount`, and `unmount` lifecycle functions for you.\\n\\nYou might notice that this time the lifecycles are exported as arrays of functions instead of just functions\u200a\u2014\u200ayou can choose whichever works best for you.\\n\\nThe advantage of exporting an array of functions is that you can add in your own custom behavior (like `aboutToBootstrap` and `doneBootstrap`) that will run before or after the Angular 1 lifecycles. When you export an array, each item in the array must be a function that returns a promise. Single-spa will wait for each promise to resolve, in order, before calling the next function in the array.\\n\\nTo learn more about single-spa helper libraries, check out these github projects:\\n\\n<ul>\\n  <li><a href=\\"https://github.com/single-spa/single-spa-angularjs\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">single-spa-angularjs</a></li>\\n  <li><a href=\\"https://github.com/single-spa/single-spa-angular\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">single-spa-angular</a></li>\\n  <li><a href=\\"https://github.com/single-spa/single-spa-react\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">single-spa-react</a></li>\\n  <li><a href=\\"https://github.com/single-spa/single-spa-vue\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">single-spa-vue</a></li>\\n  <li><a href=\\"https://github.com/single-spa/single-spa-svelte\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">single-spa-svelte</a></li>\\n  <li><a href=\\"https://github.com/single-spa/single-spa-preact\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">single-spa-preact</a></li>\\n</ul>\\n\\nYou can also see a fully working example of an angular app coexisting with other apps at the [single-spa-examples](https://github.com/single-spa/single-spa-examples) repo or the [live demo](http://single-spa.surge.sh/).\\n\\n## Step Five: test it out!\\n\\nRefresh your page and you should now have a functioning single-spa application!\\n\\nTry navigating to a url that your child app is active for (`#/cool`) and then navigating away from it. When you do so, the page will not refresh but you should see your application mount itself to the DOM and then unmount.\\n\\nIf you run into problems, try to narrow down whether the problem is in the root application or in the child application. Is your root application being executed? Are the declareChildApplication calls being made? Have you called `start()`? Is there a network request to download the code for your child application? Is your child application\'s `bootstrap` lifecycle being called? What about `mount`?\\n\\n<img src=\\"https://cdn-images-1.medium.com/max/1600/1*WMFuo-hz-Q31UVbTHAx4lw.png\\" alt=\\"cdn-images-1\\" />\\n\\nIt may be helpful to add a navigation menu, so you can verify everything mounts and unmounts to the DOM correctly. If you want to level up your single-spa skills even more, make the navigation menu an entire child application whose activity function is `() => true`. An example that does just that is found [here](https://github.com/single-spa/single-spa-examples/blob/master/src/single-spa-examples.js#L3) and [here](https://github.com/single-spa/single-spa-examples/blob/master/src/navbar/navbar.app.js).\\n\\nWhile you are verifying that everything is working, keep in mind that each application goes through five phases:\\n\\n<img src=\\"https://cdn-images-1.medium.com/max/1600/1*utKlcxBkDXfQAQR52B0hAA.png\\" alt=\\"an applications\'s lifecycle\\" />\\n\\nConclusion\\n\\nAs you get your feet wet, you\u2019ll probably run into some (hopefully small) hiccups setting things up. When this tutorial is not enough, there are other resources on [Github](https://github.com/single-spa/single-spa) and here in the [docs](/docs/building-applications).\\n\\nSingle-spa is still a relatively new thing, and we\u2019d love to hear your feedback and questions. We welcome contributions from everyone.\\n\\nIf you\u2019re excited about the possibilities, feel free to contact me on [twitter (@joelbdenning)](https://twitter.com/Joelbdenning). And if you are not excited, then still feel free to contact me, but only after you leave some nasty comments :)"},{"id":"/2016/02/26/a-case-for-soa-in-the-browser","metadata":{"permalink":"/blog/2016/02/26/a-case-for-soa-in-the-browser","source":"@site/blog/2016-02-26-a-case-for-soa-in-the-browser.md","title":"A Case for SOA in the Browser","description":"So you are a web-developer. You write a lot of JavaScript. You have a large single-page application (SPA) with features to add and bugs to maintain. Over time the application grows in size and complexity. It becomes more difficult to modify one portion of the SPA without breaking another portion.","date":"2016-02-26T00:00:00.000Z","formattedDate":"February 26, 2016","tags":[],"readingTime":5.975,"hasTruncateMarker":false,"authors":[{"name":"Bret Little","url":"https://twitter.com/little_bret","imageURL":"https://pbs.twimg.com/profile_images/950593946178080768/eaNp6p-u_400x400.jpg"}],"frontMatter":{"title":"A Case for SOA in the Browser","author":"Bret Little","authorURL":"https://twitter.com/little_bret","authorImageURL":"https://pbs.twimg.com/profile_images/950593946178080768/eaNp6p-u_400x400.jpg"},"unlisted":false,"prevItem":{"title":"A step-by-step guide to single-spa","permalink":"/blog/2016/12/16/a-step-by-step-guide-to-single-spa"}},"content":"So you are a web-developer. You write a lot of JavaScript. You have a large single-page application (SPA) with features to add and bugs to maintain. Over time the application grows in size and complexity. It becomes more difficult to modify one portion of the SPA without breaking another portion.\\n\\nThe company is growing and you are looking for ways to scale the team and code-base. You add unit tests. You add a linter. You add continuous integration. You modularize the code with ES2015 modules, webpack, and npm. Eventually you even introduce new, independent SPAs with each SPA being owned and deployed by independent squads. Congratulations, you have successfully introduced service-oriented architecture on the front-end, or have you?\\n\\n## What is Service-oriented Architecture?\\n\\nThe fundamental concept behind service-oriented architecture is a service. A service is an isolated piece of code which can only be interacted with through its API. Unlike a shared library, a service itself can be deployed independently of its consumers. Think of a back-end API. The API is the service and the browser is the consumer. The API is deployed independently of the front-end application. There is also only one deployed version of the API available at a URL.\\n\\nContrast a service to a shared library. A shared library is a piece of code that is bundled and deployed with your code. For example, libraries such as Express, Lodash, and React are all shared libraries included in your application\u2019s distributable. Upgrading a version of a shared library requires a new deployment of that distributable.\\n\\nService-oriented architecture is an approach to building software where the application is composed of many independent and isolated services. Those services are independently deployable, generally non-versioned, and auto discoverable.\\n\\n## Why Service-oriented Architecture on the Front-end?\\n\\nThe benefits of SOA can be illustrated with this real life example from Canopy. At Canopy we have multiple single page applications. The first application is external to the customers and the second is internal, yet both applications share common functionality. That functionality includes among other things, authentication and error logging.\\n\\n<img src=\\"https://cdn-images-1.medium.com/max/1600/1*itLASVdD-5a3fm56hfltYQ.png\\"\\n     alt=\\"cdn-images-1\\"\\n/>\\n\\n<p style={{color: \'gray\', fontSize: \'15px\', fontStyle: \'italic\'}}>Shared libraries between two separate applications. <strong>App 1</strong> depends upon shared libs <strong>a</strong>, <strong>b</strong>, and <strong>c</strong>. <strong>App 2</strong> depends upon only shared libs <strong>a</strong> and <strong>b</strong>.</p>\\n\\nOverall the design looks good. The code is modularized and shared. The complexities arrive when we start to upgrade the code to different versions. For example, after a short period of time, <strong>App 2</strong> (being internal only) is upgraded to a new beta version of the shared lib <strong>b</strong>. Because the shared <strong>a</strong> also depends upon <strong>b</strong> (and we don\u2019t want multiple versions of <strong>b</strong> bundled) we also create a new version of <strong>a</strong>. This one change causes a rebuild and deploy of three separate pieces of code: <strong>App 2</strong> and shared libs <strong>a</strong> and <strong>b</strong>. Our dependency structure is no longer quite so simple.\\n\\n<img src=\\"https://cdn-images-1.medium.com/max/1600/1*T5YHqkoZApSvC32jVS0osw.png\\"\\n     alt=\\"cdn-images-2\\"\\n/>\\n\\n<p style={{color: \'gray\', fontSize: \'15px\', fontStyle: \'italic\'}}>In reality, a duplicate instance of lib <strong>a</strong> and <strong>b</strong> exist in both apps. Each app does not point to the same instance of the shared libraries, even when they are the same version. This is more noticeable when the shared libraries have separate versions.</p>\\n\\nNow imagine a bug in both versions of shared lib <strong>b</strong>. In order to fix the problem, you will have to republish both versions of <strong>a</strong> and <strong>b</strong> as well as <strong>c</strong>. Also <strong>App 1</strong> and <strong>App 2</strong> will have to be re-deployed. That is five new versions to publish and two apps to redeploy, all to fix one bug. All downstream dependencies have to be redeployed when a single library is changed. This is deploy dependency hell.\\n\\nService oriented architecture avoids these problems in a couple ways. Instead of bundling common dependencies, common code is shared through independent services. Services are not bundled, but rather loaded at run time. This also means that front-end services are not versioned (just like a back-end API). Both <strong>App 1</strong> and <strong>App 2</strong> load the exact same code for a front-end service.\\n\\n## Introducing sofe\\n\\nBuilt upon the new ECMAScript module specification, sofe is a JavaScript library that enables independently deployable JavaScript services to be retrieved at run-time in the browser. Because the new module specification isn\u2019t available within today\u2019s browsers, sofe relies upon [System.js](https://github.com/systemjs/systemjs) to load services at run-time.\\n\\nYou can load a sofe service either with static or asynchronous imports.\\n\\n```js\\n// Static imports\\nimport auth from \\"auth-service!sofe\\";\\nconst user = auth.getLoggedInUser();\\n// Asynchronous imports\\nSystem.import(\\"auth-service!sofe\\").then((auth) => auth.getLoggedInUser());\\n```\\n\\nThe real power behind sofe is that services are resolved at run-time, making them unversioned. If <strong>auth-service</strong> is redeployed, it is immediately made available to all upstream dependencies. The above scenario becomes much easier to resolve because there is only one version of each shared library as services. This is powerful because it allows you to deploy once, update everywhere. Also because the code is loaded at run-time, we can also enable developer tools to override what service is loaded into your application. Or in other words, you can test code on production without actually deploying to production.\\n\\n<img src=\\"https://cdn-images-1.medium.com/max/1600/1*o7IS8yKgYKSDc2w7VpyZFw.png\\"\\n     alt=\\"cdn-images-2\\"\\n/>\\n\\n<p style={{color: \'gray\', fontSize: \'15px\', fontStyle: \'italic\'}}>The common dependencies are now services that are independent from the application code. Because services are unversioned, the dependency structure is again flat. Each service can individually be deployed and be available to every upstream dependency.</p>\\n\\nObviously not all front-end code should be a service. Services have their own challenges. Specifically your code has to stay backwards compatible. But code can\u2019t always be backwards compatible. Sometimes there needs to be breaking changes. The same problem exists for back-end services. A back-end API has to stay backwards compatible. Breaking changes on the back-end are generally solved by either creating an entirely new (versioned) API or implementing feature toggles within the API itself. The same solution applies to sofe services. An entirely new sofe service can be deployed or feature toggles can exist inside the front-end service. However it is solved, the key point is that services exist outside your application within their own distributable.\\n\\nAnother potential problem for sofe services is performance. Because they are loaded at run-time, performance can become a concern if you synchronously load too many services during bootstrap. Performance degradation can be mitigated by asynchronously loading larger services after the application bootstraps. Despite these challenges, there are many benefits to services on the front-end. The most exciting thing about sofe is there is now an option for services in the browser. You can decide what should and shouldn\u2019t be a service.\\n\\nGetting started with sofe requires only System.js. But to help you get started we have built sofe to work with a variety of technologies, including webpack, Babel, jspm, and the Chrome Developer Tools. Sofe is also actively used in production at Canopy Tax. We would love feedback on sofe and a number of open source projects that have been built around it. As you approach your next front-end project or look to improve your existing app, consider how it might benefit from service oriented architecture.\\n\\nRead more about how to get started with sofe [here](https://github.com/CanopyTax/sofe)."}]}')}}]);
\ No newline at end of file
diff --git a/assets/js/fc03b22f.12f50ff3.js b/assets/js/fc03b22f.12f50ff3.js
new file mode 100644
index 000000000..39634088f
--- /dev/null
+++ b/assets/js/fc03b22f.12f50ff3.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[7685],{7557:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>d,contentTitle:()=>o,default:()=>h,frontMatter:()=>r,metadata:()=>l,toc:()=>a});var i=s(4848),t=s(8453);const r={title:"Top 5 Microfrontend Hosting Solutions"},o="Top 5 Microfrontend Hosting Solutions",l={permalink:"/blog/2024/03/18/top-5-microfrontend-hosting-solutions",source:"@site/blog/2024-03-18-top-5-microfrontend-hosting-solutions.md",title:"Top 5 Microfrontend Hosting Solutions",description:"With rapid growth in recent years, microfrontends have become a popular solution with many companies, from large software organizations to small independent dev teams. Microfrontend hosting can get complicated quickly but it is a crucial aspect of scaling software organizations' development cycle. Whether companies are using single-spa, module federation, or any other microfrontends tools, the management of CI/CD pipelines, deployments, CDNs, and service discovery is something all companies will have to solve.",date:"2024-03-18T00:00:00.000Z",formattedDate:"March 18, 2024",tags:[],readingTime:7.18,hasTruncateMarker:!1,authors:[],frontMatter:{title:"Top 5 Microfrontend Hosting Solutions"},unlisted:!1,nextItem:{title:"March 2024 Core Team Meeting",permalink:"/blog/2024/03/12/core-team-meeting-notes"}},d={authorsImageUrls:[]},a=[{value:"Server-side versus client-side rendering",id:"server-side-versus-client-side-rendering",level:2},{value:"Low-level vs high-level hosting solutions",id:"low-level-vs-high-level-hosting-solutions",level:2},{value:"Solution comparison",id:"solution-comparison",level:2},{value:"1. Baseplate Cloud",id:"1-baseplate-cloud",level:2},{value:"2. Zephyr Cloud",id:"2-zephyr-cloud",level:2},{value:"3. AWS S3 + Cloudfront",id:"3-aws-s3--cloudfront",level:2},{value:"4. GCP Storage + Cloud CDN",id:"4-gcp-storage--cloud-cdn",level:2},{value:"5. Azure Storage + CDN",id:"5-azure-storage--cdn",level:2}];function c(e){const n={a:"a",code:"code",em:"em",h2:"h2",li:"li",ol:"ol",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.p,{children:"With rapid growth in recent years, microfrontends have become a popular solution with many companies, from large software organizations to small independent dev teams. Microfrontend hosting can get complicated quickly but it is a crucial aspect of scaling software organizations' development cycle. Whether companies are using single-spa, module federation, or any other microfrontends tools, the management of CI/CD pipelines, deployments, CDNs, and service discovery is something all companies will have to solve."}),"\n",(0,i.jsx)(n.p,{children:"So what\u2019s the most effective solution? Because microfrontend hosting is a relatively new space, most companies have a hard time knowing where to start. Fortunately, there are very good options out there, and unless you have a good reason to, you don\u2019t have to build it out yourself. Here you\u2019ll find a list of the best hosting solutions and the important factors you\u2019ll need to consider to make the decision."}),"\n",(0,i.jsx)(n.h2,{id:"server-side-versus-client-side-rendering",children:"Server-side versus client-side rendering"}),"\n",(0,i.jsxs)(n.p,{children:["This article focuses on hosting solutions for client-side rendered microfrontends, since the majority of microfrontend implementations rely solely on ",(0,i.jsx)(n.a,{href:"https://ferie.medium.com/what-is-the-client-side-rendering-and-how-it-works-c90210e2cd14",children:"client-side rendering"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://www.heavy.ai/technical-glossary/server-side-rendering",children:"Server-side rendering"})," of microfrontends often involves one or more docker containers that run ",(0,i.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/Node.js",children:"NodeJS"})," to render ",(0,i.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/React_(software)",children:"React"}),", ",(0,i.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/Angular_(web_framework)",children:"Angular"}),", or ",(0,i.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/Vue.js",children:"Vue"})," applications. For optimal performance, ",(0,i.jsx)(n.a,{href:"/docs/ssr-overview",children:"single-spa server rendering"})," also supports a single NodeJS runtime (rather than network requests between docker containers)."]}),"\n",(0,i.jsx)(n.p,{children:"If your organization uses server-side rendering, the following rankings will still apply but may require some additional consideration that isn\u2019t covered here."}),"\n",(0,i.jsx)(n.h2,{id:"low-level-vs-high-level-hosting-solutions",children:"Low-level vs high-level hosting solutions"}),"\n",(0,i.jsx)(n.p,{children:"Hosting microfrontends can be accomplished with lower-level cloud services (AWS, GCP, Azure, etc) or via microfrontend-specific cloud hosting solutions such as Baseplate Cloud and Zephyr Cloud. Lower-level services may be more affordable but require much more initial setup and ongoing maintenance. Higher-level microfrontend hosting solutions provide targeted features to streamline the hosting and development process."}),"\n",(0,i.jsx)(n.p,{children:"Companies who wish for sensible defaults and a straightforward implementation path may choose higher-level hosting solutions to save on DevOps and system admin costs. The additional built-in features of higher-level hosting solutions often reduce implementation time for companies migrating to or starting with microfrontends."}),"\n",(0,i.jsx)(n.h2,{id:"solution-comparison",children:"Solution comparison"}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.a,{href:"https://baseplate.cloud",children:"Baseplate Cloud"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.a,{href:"https://zephyr-cloud.io/",children:"Zephyr Cloud"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.a,{href:"https://aws.amazon.com/blogs/networking-and-content-delivery/amazon-s3-amazon-cloudfront-a-match-made-in-the-cloud/",children:"S3 + Cloudfront"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.a,{href:"https://cloud.google.com/cdn/docs/overview",children:"GCP Storage + Cloud CDN"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.a,{href:"https://learn.microsoft.com/en-us/azure/cdn/cdn-create-a-storage-account-with-cdn",children:"Azure Storage + CDN"})})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"Global availability"}),(0,i.jsx)(n.td,{children:"\u2713 (via Cloudflare)"}),(0,i.jsx)(n.td,{children:"\u2713 (Cloudflare / Netlify)"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsxs)(n.td,{children:["Web app hosting ",(0,i.jsx)("sup",{children:"1"})]}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsxs)(n.td,{children:["Environments support ",(0,i.jsx)("sup",{children:"2"})]}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsxs)(n.td,{children:["Autogenerated CI pipelines ",(0,i.jsx)("sup",{children:"3"})]}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"(planned)"}),(0,i.jsx)(n.td,{children:"\u2717"}),(0,i.jsx)(n.td,{children:"\u2717"}),(0,i.jsx)(n.td,{children:"\u2717"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"Automated microfrontend creation"}),(0,i.jsx)(n.td,{children:"\u2713 (via API and CLI)"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"Custom domains"}),(0,i.jsx)(n.td,{children:"\u2713 (via DNS records)"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsxs)(n.td,{children:["Route / layout management ",(0,i.jsx)("sup",{children:"4"})]}),(0,i.jsxs)(n.td,{children:["\u2713 (",(0,i.jsx)(n.a,{href:"/docs/layout-definition",children:"single-spa-layout template"}),")"]}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsxs)(n.td,{children:["Self-owned assets storage ",(0,i.jsx)("sup",{children:"5"})]}),(0,i.jsx)(n.td,{children:"\u2713 (optional bring-your-own-s3-bucket)"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsxs)(n.td,{children:["Edge-side HTML rendering optimizations ",(0,i.jsx)("sup",{children:"6"})]}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"(planned)"}),(0,i.jsx)(n.td,{children:"\u2717"}),(0,i.jsx)(n.td,{children:"\u2717"}),(0,i.jsx)(n.td,{children:"\u2717"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsxs)(n.td,{children:["Service discovery ",(0,i.jsx)("sup",{children:"7"})]}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"CORS / CSP / Cache Control"}),(0,i.jsx)(n.td,{children:"\u2713 (sensible defaults, fully customizable)"}),(0,i.jsx)(n.td,{children:"(planned)"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"Usage metrics"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"(planned)"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsxs)(n.td,{children:["Full audit trail ",(0,i.jsx)("sup",{children:"8"})]}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"Permissions management"}),(0,i.jsx)(n.td,{children:"\u2713 (comprehensive, including microfrontend ownership)"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"\u2713"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsxs)(n.td,{children:["Shared dependency management ",(0,i.jsx)("sup",{children:"9"})]}),(0,i.jsx)(n.td,{children:"(planned)"}),(0,i.jsx)(n.td,{children:"\u2713"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"}),(0,i.jsx)(n.td,{children:"(manual)"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:"Server rendering support"}),(0,i.jsx)(n.td,{children:"(planned)"}),(0,i.jsx)(n.td,{children:"(planned)"}),(0,i.jsx)(n.td,{children:"\u2717"}),(0,i.jsx)(n.td,{children:"\u2717"}),(0,i.jsx)(n.td,{children:"\u2717"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsxs)(n.td,{children:["Microfrontend marketplace ",(0,i.jsx)("sup",{children:"10"})]}),(0,i.jsx)(n.td,{children:"(planned)"}),(0,i.jsx)(n.td,{children:"(planned)"}),(0,i.jsx)(n.td,{children:"\u2717"}),(0,i.jsx)(n.td,{children:"\u2717"}),(0,i.jsx)(n.td,{children:"\u2717"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsxs)(n.td,{children:["Rolling deployments ",(0,i.jsx)("sup",{children:"11"})]}),(0,i.jsx)(n.td,{children:"(planned)"}),(0,i.jsx)(n.td,{children:"(planned)"}),(0,i.jsx)(n.td,{children:"\u2717"}),(0,i.jsx)(n.td,{children:"\u2717"}),(0,i.jsx)(n.td,{children:"\u2717"})]})]})]}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.em,{children:"Web apps hosting"})," refers to hosting the parent/root HTML file that initializes the microfrontends necessary for client-side rendering."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.em,{children:"Environment support"})," refers to hosting each microfrontend and web app on both internal test environments and live production environments. CI/CD Pipelines are configured to deploy to environments sequentially."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.em,{children:"Auto-generated CI pipelines"})," refers to generating configuration files for ",(0,i.jsx)(n.a,{href:"https://docs.github.com/en/actions/using-workflows",children:"Github workflow"}),", ",(0,i.jsx)(n.a,{href:"https://azure.microsoft.com/en-us/products/devops/pipelines",children:"Azure Pipelines"}),", ",(0,i.jsx)(n.a,{href:"https://docs.gitlab.com/ee/ci/",children:"Gitlab CI"})," and other CI/CD tools."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.em,{children:"Route / layout management"})," refers to managing the in-browser URL routes and DOM layout for microfrontends."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.em,{children:"Self-owned assets storage"})," refers to JS, CSS, HTML, font, and image files being stored within a bucket owned by the company implementing microfrontends, rather than by cloud hosting service."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.em,{children:"Edge-side HTML rendering optimizations"})," refers to dynamically changing the HTML file for a web app via code that runs in ",(0,i.jsx)(n.a,{href:"https://www.macrometa.com/articles/what-is-edge-side-rendering",children:"edge locations"}),". Since edge locations are physically closer to most users than an origin server, this provides maximum performance beneifts. Performance benefits include inlining import maps, ",(0,i.jsx)(n.code,{children:"<link rel=preload>"}),", and ",(0,i.jsx)(n.code,{children:"<script>"})," elements so that the browser begins downloading the necessary resources for the current URL as quickly as possible."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.em,{children:"Service discovery"})," refers to all available microfrontends easily cross-communicating with each other. This is often done via ",(0,i.jsx)(n.a,{href:"https://github.com/WICG/import-maps",children:"import maps"})," or other manifest files."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.em,{children:"Full audit trail"})," refers to logs for all deployments, infrastructure changes, and configuration changes within the microfrontends system."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.em,{children:"Shared dependency management"})," refers to externalizing or federating shared npm packages between microfrontends, to improve performance by only downloading and executing the code for them once within a web page."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.em,{children:"Microfrontend marketplace"})," refers to purchasing or installing pre-made microfrontends into a company's system."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.em,{children:"Rolling deployments"})," refers to introducing new code changes to a microfrontend to only a fraction of the userbase, to minimize impact of releasing bad code."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"1-baseplate-cloud",children:"1. Baseplate Cloud"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://baseplate.cloud/",children:"Baseplate Cloud"})," tops the list for its ease of use and specific focus on single-spa hosting. Because it was made by the creator of single-spa, Baseplate's features have been informed by years of microfrontend and single-spa consultancies, making it the easiest microfrontend hosting choice for single-spa. Everything about the product simplifies and automates as much of the complexity as possible, and it\u2019s hard to find advantages in other solutions that beat this fact. Baseplate will probably be the best choice for any company that is prioritizing a streamlined cloud hosting experience."]}),"\n",(0,i.jsx)(n.p,{children:"Baseplate's feature set automates the job functions of multiple software developers and frees up a lot of development resources without increasing the size of the development team. This easily offsets the cost of Baseplate's services."}),"\n",(0,i.jsx)(n.p,{children:"Baseplate supports the following features:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Web apps hosting"}),"\n",(0,i.jsx)(n.li,{children:"Custom domains for web apps and static assets"}),"\n",(0,i.jsx)(n.li,{children:"Unlimited deployable environments"}),"\n",(0,i.jsx)(n.li,{children:"Unlimited microfrontends"}),"\n",(0,i.jsx)(n.li,{children:"Autogenerated CI/CD pipelines"}),"\n",(0,i.jsx)(n.li,{children:"Full audit trail"}),"\n",(0,i.jsx)(n.li,{children:"Microfrontend-specific usage metrics"}),"\n",(0,i.jsx)(n.li,{children:"CORS, CSP, and Cache-Control configuration"}),"\n",(0,i.jsx)(n.li,{children:"Edge-side performance optimizations"}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Also of note, ",(0,i.jsx)(n.a,{href:"https://baseplate.cloud/docs/cdn/assets",children:"Baseplate CDN"})," is a source-available ",(0,i.jsx)(n.a,{href:"https://developers.cloudflare.com/workers/",children:"Cloudflare worker"})," designed for maximum performance and best practices. It is globally available at all ",(0,i.jsx)(n.a,{href:"https://www.cloudflare.com/network/",children:"Cloudflare edge locations"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"2-zephyr-cloud",children:"2. Zephyr Cloud"}),"\n",(0,i.jsxs)(n.p,{children:["From the creators of Module Federation, ",(0,i.jsx)(n.a,{href:"https://zephyr-cloud.io/",children:"Zephyr Cloud"})," is the premier hosting solution for module-federation-based microfrontends. It is currently in closed alpha with little publicly documented about its features."]}),"\n",(0,i.jsx)(n.h2,{id:"3-aws-s3--cloudfront",children:"3. AWS S3 + Cloudfront"}),"\n",(0,i.jsxs)(n.p,{children:["Amazon Web Services (AWS) offers the low-level cloud services necessary for companies to set up a microfrontends hosting solution. The most common microfrontends hosting solution within AWS often involves a ",(0,i.jsx)(n.a,{href:"https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-overview.html",children:"Cloudflare distribution"})," that acts as a public ",(0,i.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/Content_delivery_network",children:"CDN"}),", with a private ",(0,i.jsx)(n.a,{href:"https://aws.amazon.com/s3/",children:"S3 bucket"})," as the origin containing all static web files (Javascript, CSS, HTML) needed."]}),"\n",(0,i.jsx)(n.p,{children:"The advantage of using lower-level cloud hosting services is their initial lower costs\u2014however, that comes at the expense of increased setup and maintenance complexity compared to microfrontend-specific cloud hosting solutions."}),"\n",(0,i.jsx)(n.p,{children:"Implementation details will vary from company to company. It's common for each microfrontend's files to be stored within a (virtual) folder within the s3 bucket and the manifest or import map listing all microfrontends made available in a JSON file. Web apps using the microfrontends may have their own S3 bucket or be within the same S3 bucket."}),"\n",(0,i.jsx)(n.h2,{id:"4-gcp-storage--cloud-cdn",children:"4. GCP Storage + Cloud CDN"}),"\n",(0,i.jsxs)(n.p,{children:["Google Cloud Platform provides equivalent low-level cloud services to AWS. The same technical details that apply to AWS S3 + Cloudfront also apply to ",(0,i.jsx)(n.a,{href:"https://cloud.google.com/storage?hl=en",children:"GCP Cloud Storage"})," and ",(0,i.jsx)(n.a,{href:"https://cloud.google.com/cdn/docs/overview",children:"GCP Cloud CDN"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"5-azure-storage--cdn",children:"5. Azure Storage + CDN"}),"\n",(0,i.jsxs)(n.p,{children:["Azure Storage provides equivalent low-level cloud services to AWS. The same technical details that apply to AWS S3 + Cloudfront also apply to ",(0,i.jsx)(n.a,{href:"https://azure.microsoft.com/en-us/products/category/storage",children:"Azure Storage"})," and ",(0,i.jsx)(n.a,{href:"https://azure.microsoft.com/en-us/products/cdn",children:"GCP Cloud CDN"}),"."]})]})}function h(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>o,x:()=>l});var i=s(6540);const t={},r=i.createContext(t);function o(e){const n=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),i.createElement(r.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/fc03b22f.1f91bdd5.js b/assets/js/fc03b22f.1f91bdd5.js
deleted file mode 100644
index ece094786..000000000
--- a/assets/js/fc03b22f.1f91bdd5.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[7685],{7557:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>d,contentTitle:()=>o,default:()=>h,frontMatter:()=>r,metadata:()=>l,toc:()=>a});var t=s(4848),i=s(8453);const r={title:"Top 5 Microfrontend Hosting Solutions",author:"Joel Denning",authorURL:"https://x.com/joelbdenning",authorImageURL:"https://avatars.githubusercontent.com/u/5524384"},o="Top 5 Microfrontend Hosting Solutions",l={permalink:"/blog/2024/03/18/top-5-microfrontend-hosting-solutions",source:"@site/blog/2024-03-18-top-5-microfrontend-hosting-solutions.md",title:"Top 5 Microfrontend Hosting Solutions",description:"With rapid growth in recent years, microfrontends have become a popular solution with many companies, from large software organizations to small independent dev teams. Microfrontend hosting can get complicated quickly but it is a crucial aspect of scaling software organizations' development cycle. Whether companies are using single-spa, module federation, or any other microfrontends tools, the management of CI/CD pipelines, deployments, CDNs, and service discovery is something all companies will have to solve.",date:"2024-03-18T00:00:00.000Z",formattedDate:"March 18, 2024",tags:[],readingTime:7.18,hasTruncateMarker:!1,authors:[{name:"Joel Denning",url:"https://x.com/joelbdenning",imageURL:"https://avatars.githubusercontent.com/u/5524384"}],frontMatter:{title:"Top 5 Microfrontend Hosting Solutions",author:"Joel Denning",authorURL:"https://x.com/joelbdenning",authorImageURL:"https://avatars.githubusercontent.com/u/5524384"},unlisted:!1,nextItem:{title:"March 2024 Core Team Meeting",permalink:"/blog/2024/03/12/core-team-meeting-notes"}},d={authorsImageUrls:[void 0]},a=[{value:"Server-side versus client-side rendering",id:"server-side-versus-client-side-rendering",level:2},{value:"Low-level vs high-level hosting solutions",id:"low-level-vs-high-level-hosting-solutions",level:2},{value:"Solution comparison",id:"solution-comparison",level:2},{value:"1. Baseplate Cloud",id:"1-baseplate-cloud",level:2},{value:"2. Zephyr Cloud",id:"2-zephyr-cloud",level:2},{value:"3. AWS S3 + Cloudfront",id:"3-aws-s3--cloudfront",level:2},{value:"4. GCP Storage + Cloud CDN",id:"4-gcp-storage--cloud-cdn",level:2},{value:"5. Azure Storage + CDN",id:"5-azure-storage--cdn",level:2}];function c(e){const n={a:"a",code:"code",em:"em",h2:"h2",li:"li",ol:"ol",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:"With rapid growth in recent years, microfrontends have become a popular solution with many companies, from large software organizations to small independent dev teams. Microfrontend hosting can get complicated quickly but it is a crucial aspect of scaling software organizations' development cycle. Whether companies are using single-spa, module federation, or any other microfrontends tools, the management of CI/CD pipelines, deployments, CDNs, and service discovery is something all companies will have to solve."}),"\n",(0,t.jsx)(n.p,{children:"So what\u2019s the most effective solution? Because microfrontend hosting is a relatively new space, most companies have a hard time knowing where to start. Fortunately, there are very good options out there, and unless you have a good reason to, you don\u2019t have to build it out yourself. Here you\u2019ll find a list of the best hosting solutions and the important factors you\u2019ll need to consider to make the decision."}),"\n",(0,t.jsx)(n.h2,{id:"server-side-versus-client-side-rendering",children:"Server-side versus client-side rendering"}),"\n",(0,t.jsxs)(n.p,{children:["This article focuses on hosting solutions for client-side rendered microfrontends, since the majority of microfrontend implementations rely solely on ",(0,t.jsx)(n.a,{href:"https://ferie.medium.com/what-is-the-client-side-rendering-and-how-it-works-c90210e2cd14",children:"client-side rendering"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://www.heavy.ai/technical-glossary/server-side-rendering",children:"Server-side rendering"})," of microfrontends often involves one or more docker containers that run ",(0,t.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/Node.js",children:"NodeJS"})," to render ",(0,t.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/React_(software)",children:"React"}),", ",(0,t.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/Angular_(web_framework)",children:"Angular"}),", or ",(0,t.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/Vue.js",children:"Vue"})," applications. For optimal performance, ",(0,t.jsx)(n.a,{href:"/docs/ssr-overview",children:"single-spa server rendering"})," also supports a single NodeJS runtime (rather than network requests between docker containers)."]}),"\n",(0,t.jsx)(n.p,{children:"If your organization uses server-side rendering, the following rankings will still apply but may require some additional consideration that isn\u2019t covered here."}),"\n",(0,t.jsx)(n.h2,{id:"low-level-vs-high-level-hosting-solutions",children:"Low-level vs high-level hosting solutions"}),"\n",(0,t.jsx)(n.p,{children:"Hosting microfrontends can be accomplished with lower-level cloud services (AWS, GCP, Azure, etc) or via microfrontend-specific cloud hosting solutions such as Baseplate Cloud and Zephyr Cloud. Lower-level services may be more affordable but require much more initial setup and ongoing maintenance. Higher-level microfrontend hosting solutions provide targeted features to streamline the hosting and development process."}),"\n",(0,t.jsx)(n.p,{children:"Companies who wish for sensible defaults and a straightforward implementation path may choose higher-level hosting solutions to save on DevOps and system admin costs. The additional built-in features of higher-level hosting solutions often reduce implementation time for companies migrating to or starting with microfrontends."}),"\n",(0,t.jsx)(n.h2,{id:"solution-comparison",children:"Solution comparison"}),"\n",(0,t.jsxs)(n.table,{children:[(0,t.jsx)(n.thead,{children:(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.th,{}),(0,t.jsx)(n.th,{children:(0,t.jsx)(n.a,{href:"https://baseplate.cloud",children:"Baseplate Cloud"})}),(0,t.jsx)(n.th,{children:(0,t.jsx)(n.a,{href:"https://zephyr-cloud.io/",children:"Zephyr Cloud"})}),(0,t.jsx)(n.th,{children:(0,t.jsx)(n.a,{href:"https://aws.amazon.com/blogs/networking-and-content-delivery/amazon-s3-amazon-cloudfront-a-match-made-in-the-cloud/",children:"S3 + Cloudfront"})}),(0,t.jsx)(n.th,{children:(0,t.jsx)(n.a,{href:"https://cloud.google.com/cdn/docs/overview",children:"GCP Storage + Cloud CDN"})}),(0,t.jsx)(n.th,{children:(0,t.jsx)(n.a,{href:"https://learn.microsoft.com/en-us/azure/cdn/cdn-create-a-storage-account-with-cdn",children:"Azure Storage + CDN"})})]})}),(0,t.jsxs)(n.tbody,{children:[(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:"Global availability"}),(0,t.jsx)(n.td,{children:"\u2713 (via Cloudflare)"}),(0,t.jsx)(n.td,{children:"\u2713 (Cloudflare / Netlify)"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{children:["Web app hosting ",(0,t.jsx)("sup",{children:"1"})]}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{children:["Environments support ",(0,t.jsx)("sup",{children:"2"})]}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{children:["Autogenerated CI pipelines ",(0,t.jsx)("sup",{children:"3"})]}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"(planned)"}),(0,t.jsx)(n.td,{children:"\u2717"}),(0,t.jsx)(n.td,{children:"\u2717"}),(0,t.jsx)(n.td,{children:"\u2717"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:"Automated microfrontend creation"}),(0,t.jsx)(n.td,{children:"\u2713 (via API and CLI)"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:"Custom domains"}),(0,t.jsx)(n.td,{children:"\u2713 (via DNS records)"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{children:["Route / layout management ",(0,t.jsx)("sup",{children:"4"})]}),(0,t.jsxs)(n.td,{children:["\u2713 (",(0,t.jsx)(n.a,{href:"/docs/layout-definition",children:"single-spa-layout template"}),")"]}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{children:["Self-owned assets storage ",(0,t.jsx)("sup",{children:"5"})]}),(0,t.jsx)(n.td,{children:"\u2713 (optional bring-your-own-s3-bucket)"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{children:["Edge-side HTML rendering optimizations ",(0,t.jsx)("sup",{children:"6"})]}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"(planned)"}),(0,t.jsx)(n.td,{children:"\u2717"}),(0,t.jsx)(n.td,{children:"\u2717"}),(0,t.jsx)(n.td,{children:"\u2717"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{children:["Service discovery ",(0,t.jsx)("sup",{children:"7"})]}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:"CORS / CSP / Cache Control"}),(0,t.jsx)(n.td,{children:"\u2713 (sensible defaults, fully customizable)"}),(0,t.jsx)(n.td,{children:"(planned)"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:"Usage metrics"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"(planned)"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{children:["Full audit trail ",(0,t.jsx)("sup",{children:"8"})]}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:"Permissions management"}),(0,t.jsx)(n.td,{children:"\u2713 (comprehensive, including microfrontend ownership)"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"\u2713"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{children:["Shared dependency management ",(0,t.jsx)("sup",{children:"9"})]}),(0,t.jsx)(n.td,{children:"(planned)"}),(0,t.jsx)(n.td,{children:"\u2713"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"}),(0,t.jsx)(n.td,{children:"(manual)"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:"Server rendering support"}),(0,t.jsx)(n.td,{children:"(planned)"}),(0,t.jsx)(n.td,{children:"(planned)"}),(0,t.jsx)(n.td,{children:"\u2717"}),(0,t.jsx)(n.td,{children:"\u2717"}),(0,t.jsx)(n.td,{children:"\u2717"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{children:["Microfrontend marketplace ",(0,t.jsx)("sup",{children:"10"})]}),(0,t.jsx)(n.td,{children:"(planned)"}),(0,t.jsx)(n.td,{children:"(planned)"}),(0,t.jsx)(n.td,{children:"\u2717"}),(0,t.jsx)(n.td,{children:"\u2717"}),(0,t.jsx)(n.td,{children:"\u2717"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{children:["Rolling deployments ",(0,t.jsx)("sup",{children:"11"})]}),(0,t.jsx)(n.td,{children:"(planned)"}),(0,t.jsx)(n.td,{children:"(planned)"}),(0,t.jsx)(n.td,{children:"\u2717"}),(0,t.jsx)(n.td,{children:"\u2717"}),(0,t.jsx)(n.td,{children:"\u2717"})]})]})]}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"Web apps hosting"})," refers to hosting the parent/root HTML file that initializes the microfrontends necessary for client-side rendering."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"Environment support"})," refers to hosting each microfrontend and web app on both internal test environments and live production environments. CI/CD Pipelines are configured to deploy to environments sequentially."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"Auto-generated CI pipelines"})," refers to generating configuration files for ",(0,t.jsx)(n.a,{href:"https://docs.github.com/en/actions/using-workflows",children:"Github workflow"}),", ",(0,t.jsx)(n.a,{href:"https://azure.microsoft.com/en-us/products/devops/pipelines",children:"Azure Pipelines"}),", ",(0,t.jsx)(n.a,{href:"https://docs.gitlab.com/ee/ci/",children:"Gitlab CI"})," and other CI/CD tools."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"Route / layout management"})," refers to managing the in-browser URL routes and DOM layout for microfrontends."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"Self-owned assets storage"})," refers to JS, CSS, HTML, font, and image files being stored within a bucket owned by the company implementing microfrontends, rather than by cloud hosting service."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"Edge-side HTML rendering optimizations"})," refers to dynamically changing the HTML file for a web app via code that runs in ",(0,t.jsx)(n.a,{href:"https://www.macrometa.com/articles/what-is-edge-side-rendering",children:"edge locations"}),". Since edge locations are physically closer to most users than an origin server, this provides maximum performance beneifts. Performance benefits include inlining import maps, ",(0,t.jsx)(n.code,{children:"<link rel=preload>"}),", and ",(0,t.jsx)(n.code,{children:"<script>"})," elements so that the browser begins downloading the necessary resources for the current URL as quickly as possible."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"Service discovery"})," refers to all available microfrontends easily cross-communicating with each other. This is often done via ",(0,t.jsx)(n.a,{href:"https://github.com/WICG/import-maps",children:"import maps"})," or other manifest files."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"Full audit trail"})," refers to logs for all deployments, infrastructure changes, and configuration changes within the microfrontends system."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"Shared dependency management"})," refers to externalizing or federating shared npm packages between microfrontends, to improve performance by only downloading and executing the code for them once within a web page."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"Microfrontend marketplace"})," refers to purchasing or installing pre-made microfrontends into a company's system."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"Rolling deployments"})," refers to introducing new code changes to a microfrontend to only a fraction of the userbase, to minimize impact of releasing bad code."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"1-baseplate-cloud",children:"1. Baseplate Cloud"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://baseplate.cloud/",children:"Baseplate Cloud"})," tops the list for its ease of use and specific focus on single-spa hosting. Because it was made by the creator of single-spa, Baseplate's features have been informed by years of microfrontend and single-spa consultancies, making it the easiest microfrontend hosting choice for single-spa. Everything about the product simplifies and automates as much of the complexity as possible, and it\u2019s hard to find advantages in other solutions that beat this fact. Baseplate will probably be the best choice for any company that is prioritizing a streamlined cloud hosting experience."]}),"\n",(0,t.jsx)(n.p,{children:"Baseplate's feature set automates the job functions of multiple software developers and frees up a lot of development resources without increasing the size of the development team. This easily offsets the cost of Baseplate's services."}),"\n",(0,t.jsx)(n.p,{children:"Baseplate supports the following features:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Web apps hosting"}),"\n",(0,t.jsx)(n.li,{children:"Custom domains for web apps and static assets"}),"\n",(0,t.jsx)(n.li,{children:"Unlimited deployable environments"}),"\n",(0,t.jsx)(n.li,{children:"Unlimited microfrontends"}),"\n",(0,t.jsx)(n.li,{children:"Autogenerated CI/CD pipelines"}),"\n",(0,t.jsx)(n.li,{children:"Full audit trail"}),"\n",(0,t.jsx)(n.li,{children:"Microfrontend-specific usage metrics"}),"\n",(0,t.jsx)(n.li,{children:"CORS, CSP, and Cache-Control configuration"}),"\n",(0,t.jsx)(n.li,{children:"Edge-side performance optimizations"}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["Also of note, ",(0,t.jsx)(n.a,{href:"https://baseplate.cloud/docs/cdn/assets",children:"Baseplate CDN"})," is a source-available ",(0,t.jsx)(n.a,{href:"https://developers.cloudflare.com/workers/",children:"Cloudflare worker"})," designed for maximum performance and best practices. It is globally available at all ",(0,t.jsx)(n.a,{href:"https://www.cloudflare.com/network/",children:"Cloudflare edge locations"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"2-zephyr-cloud",children:"2. Zephyr Cloud"}),"\n",(0,t.jsxs)(n.p,{children:["From the creators of Module Federation, ",(0,t.jsx)(n.a,{href:"https://zephyr-cloud.io/",children:"Zephyr Cloud"})," is the premier hosting solution for module-federation-based microfrontends. It is currently in closed alpha with little publicly documented about its features."]}),"\n",(0,t.jsx)(n.h2,{id:"3-aws-s3--cloudfront",children:"3. AWS S3 + Cloudfront"}),"\n",(0,t.jsxs)(n.p,{children:["Amazon Web Services (AWS) offers the low-level cloud services necessary for companies to set up a microfrontends hosting solution. The most common microfrontends hosting solution within AWS often involves a ",(0,t.jsx)(n.a,{href:"https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-overview.html",children:"Cloudflare distribution"})," that acts as a public ",(0,t.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/Content_delivery_network",children:"CDN"}),", with a private ",(0,t.jsx)(n.a,{href:"https://aws.amazon.com/s3/",children:"S3 bucket"})," as the origin containing all static web files (Javascript, CSS, HTML) needed."]}),"\n",(0,t.jsx)(n.p,{children:"The advantage of using lower-level cloud hosting services is their initial lower costs\u2014however, that comes at the expense of increased setup and maintenance complexity compared to microfrontend-specific cloud hosting solutions."}),"\n",(0,t.jsx)(n.p,{children:"Implementation details will vary from company to company. It's common for each microfrontend's files to be stored within a (virtual) folder within the s3 bucket and the manifest or import map listing all microfrontends made available in a JSON file. Web apps using the microfrontends may have their own S3 bucket or be within the same S3 bucket."}),"\n",(0,t.jsx)(n.h2,{id:"4-gcp-storage--cloud-cdn",children:"4. GCP Storage + Cloud CDN"}),"\n",(0,t.jsxs)(n.p,{children:["Google Cloud Platform provides equivalent low-level cloud services to AWS. The same technical details that apply to AWS S3 + Cloudfront also apply to ",(0,t.jsx)(n.a,{href:"https://cloud.google.com/storage?hl=en",children:"GCP Cloud Storage"})," and ",(0,t.jsx)(n.a,{href:"https://cloud.google.com/cdn/docs/overview",children:"GCP Cloud CDN"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"5-azure-storage--cdn",children:"5. Azure Storage + CDN"}),"\n",(0,t.jsxs)(n.p,{children:["Azure Storage provides equivalent low-level cloud services to AWS. The same technical details that apply to AWS S3 + Cloudfront also apply to ",(0,t.jsx)(n.a,{href:"https://azure.microsoft.com/en-us/products/category/storage",children:"Azure Storage"})," and ",(0,t.jsx)(n.a,{href:"https://azure.microsoft.com/en-us/products/cdn",children:"GCP Cloud CDN"}),"."]})]})}function h(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>o,x:()=>l});var t=s(6540);const i={},r=t.createContext(i);function o(e){const n=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/runtime~main.a89dcf8a.js b/assets/js/runtime~main.a280dc7d.js
similarity index 98%
rename from assets/js/runtime~main.a89dcf8a.js
rename to assets/js/runtime~main.a280dc7d.js
index f5d61ecc2..71b5047a5 100644
--- a/assets/js/runtime~main.a89dcf8a.js
+++ b/assets/js/runtime~main.a280dc7d.js
@@ -1 +1 @@
-(()=>{"use strict";var e,a,c,f,d={},b={};function r(e){var a=b[e];if(void 0!==a)return a.exports;var c=b[e]={id:e,loaded:!1,exports:{}};return d[e].call(c.exports,c,c.exports,r),c.loaded=!0,c.exports}r.m=d,r.c=b,e=[],r.O=(a,c,f,d)=>{if(!c){var b=1/0;for(i=0;i<e.length;i++){c=e[i][0],f=e[i][1],d=e[i][2];for(var t=!0,o=0;o<c.length;o++)(!1&d||b>=d)&&Object.keys(r.O).every((e=>r.O[e](c[o])))?c.splice(o--,1):(t=!1,d<b&&(b=d));if(t){e.splice(i--,1);var n=f();void 0!==n&&(a=n)}}return a}d=d||0;for(var i=e.length;i>0&&e[i-1][2]>d;i--)e[i]=e[i-1];e[i]=[c,f,d]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a:a}),a},c=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,f){if(1&f&&(e=this(e)),8&f)return e;if("object"==typeof e&&e){if(4&f&&e.__esModule)return e;if(16&f&&"function"==typeof e.then)return e}var d=Object.create(null);r.r(d);var b={};a=a||[null,c({}),c([]),c(c)];for(var t=2&f&&e;"object"==typeof t&&!~a.indexOf(t);t=c(t))Object.getOwnPropertyNames(t).forEach((a=>b[a]=()=>e[a]));return b.default=()=>e,r.d(d,b),d},r.d=(e,a)=>{for(var c in a)r.o(a,c)&&!r.o(e,c)&&Object.defineProperty(e,c,{enumerable:!0,get:a[c]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((a,c)=>(r.f[c](e,a),a)),[])),r.u=e=>"assets/js/"+({88:"cae0f04b",189:"3031e46b",220:"40951796",350:"9eb9fa54",373:"3ab9445b",446:"daa69925",467:"572e4edf",515:"1b186f64",569:"015816e2",667:"e4355444",806:"798c9bc2",1124:"ac1a782b",1295:"dc2cd7e2",1355:"7a54a545",1401:"a4df4865",1458:"01a1bba5",1529:"0abd59c6",1532:"caa2e070",1566:"2431ba31",1628:"0df1a66c",1666:"cdaae041",1834:"3827c3c6",1991:"b2b675dd",2043:"ce6e696b",2051:"e6baa823",2099:"b7efbaa4",2107:"cc32fbde",2138:"1a4e3797",2142:"076c147e",2288:"ef491088",2317:"ca5d36aa",2364:"f89f17ac",2546:"d3dd1f61",2570:"dce7fd61",2571:"9c153eaa",2590:"850be153",2594:"e076d91c",2598:"a5852e81",2634:"c4f5d8e4",2669:"5509b76f",2711:"9e4087bc",2723:"9d672d00",2729:"696a01cf",2862:"d7647bb5",2879:"5c035ad5",2950:"5b8adf66",3079:"ab6201ac",3249:"ccc49370",3314:"67152cfe",3315:"bdd8dcaf",3328:"decfdbba",3447:"ec93dc32",3513:"b2f554cd",3529:"3a7fefd0",3570:"cc73ed51",3737:"a1c1515a",3811:"f91e79c8",3893:"7bb2f638",3904:"8ad4811d",4043:"b025bb67",4050:"c41acfd1",4060:"e628667e",4067:"02af63f8",4095:"5e12ca1d",4199:"4f0789b6",4279:"528602c4",4343:"91e4d5ec",4370:"6cb48572",4445:"55102a22",4462:"9afda0ee",4498:"d6377ff4",4510:"76852a88",4570:"e6bcd470",4622:"7bb7102b",4732:"9d6f1d6a",4748:"bfcd17f4",4833:"69e6e3bb",4860:"e8db9b6a",4894:"80697847",5011:"017c7e36",5036:"4a6c08fa",5220:"99cd0956",5229:"fcc2aa60",5234:"e85cb86b",5281:"feb0df8a",5354:"0ae76a47",5391:"e84c24e5",5438:"42f9def7",5443:"561a3eb1",5450:"1dc3c8d9",5455:"0f85c961",5477:"420a4aff",5584:"a9668f36",5603:"93e8f896",5604:"075c7a17",5660:"38eb30df",5742:"c377a04b",5767:"8eb4e46b",5771:"6588f8a2",5807:"6c11b4de",5822:"d1104007",5840:"46c309cc",5878:"8c472a46",5894:"0a789486",6022:"2cd23ac7",6081:"78e9b454",6084:"1943dfb2",6095:"ae4abcdb",6101:"29aa1e09",6178:"8a734aad",6214:"b9edb02a",6226:"c867fe7c",6255:"5896a7ea",6349:"5118ee85",6451:"f57aa09c",6516:"a4cef419",6560:"08c25933",6564:"90e0a41c",6628:"f3344494",6664:"e74a79a5",6780:"940fc73a",6805:"98ffbda8",6887:"2e5fe557",6909:"823b648e",7011:"fcfac0f1",7030:"a57ccd44",7036:"e5846443",7077:"f539466a",7098:"a7bd4aaa",7137:"fa29c2d5",7153:"b5351572",7196:"d549428a",7265:"dcc53905",7291:"8f8ee7f5",7380:"ff185f4e",7472:"814f3328",7487:"50fa5667",7497:"ee4f9438",7512:"ac0c4088",7539:"2aac956c",7541:"0b8ff5c4",7586:"fe4bf730",7635:"8ac9c664",7643:"a6aa9e1f",7685:"fc03b22f",7690:"2e1d0e00",7727:"9efeee7f",7733:"0f572e6e",7745:"1b9bd3d9",7764:"c09e1667",7785:"3082ef22",7874:"a1a42c9b",8055:"9093cedc",8333:"d61e08fd",8401:"17896441",8406:"68a4a0c2",8423:"ee76fcac",8429:"3c561f1c",8528:"edba9c72",8550:"88ab1274",8564:"7a77816f",8581:"935f2afb",8602:"a998b65c",8775:"a9afa101",8819:"b3bcde3d",8849:"d488f8a7",8853:"dc7b4688",9005:"fad948d0",9048:"a94703ab",9126:"5c27e93c",9146:"a97faf63",9153:"febdff58",9268:"a6e5e601",9433:"96f9dd39",9509:"85376e8b",9531:"e469ac48",9647:"5e95c892",9672:"dfd9a880",9695:"674fa9c4",9801:"8999baf8",9903:"8bb54e26",9942:"377636fe"}[e]||e)+"."+{88:"302b823c",189:"5670f042",220:"e015c861",350:"05b0afa8",373:"a7c97221",416:"b444750d",446:"56cf738f",467:"59a8d603",515:"b8b6f6fd",569:"bac7eadf",667:"21ae6e4a",806:"77f68c98",1124:"eae9d71c",1295:"e89f6c2a",1333:"f2fdbb0a",1355:"9b35ba76",1401:"9b76658d",1458:"9de61a65",1529:"38be1e8f",1532:"bc0c013c",1566:"420d4c87",1628:"f727a3da",1666:"4d438b77",1834:"57c87c80",1991:"1b66eb44",2043:"a622a8e5",2051:"54712561",2099:"34fca0f5",2107:"4055c590",2138:"c77e0835",2142:"540f8134",2237:"142894c1",2288:"cabd5440",2317:"409281c7",2364:"bb9166d2",2546:"5da15dd0",2570:"7755820c",2571:"76ecf634",2590:"9b366fef",2594:"dad62b1c",2598:"1cb08ad6",2634:"11f81bd8",2669:"71fc14d2",2711:"97405554",2723:"4011f9b6",2729:"dcc743d4",2862:"3bd13d47",2879:"ba191d37",2950:"740d8833",3079:"3ed595a7",3249:"50862a89",3314:"85cb824b",3315:"754c87d5",3328:"b2cbabe6",3447:"dfcd9ea9",3513:"688862fe",3529:"cf8148cb",3570:"8c5f1ddf",3737:"8879917f",3811:"e78ed917",3893:"91b6fd4b",3904:"cf78ded4",4043:"dec3b70f",4050:"3b8ea987",4060:"e5230aa0",4067:"a718fc16",4095:"ab505c43",4199:"8232b41c",4279:"980add8a",4343:"b9111d9c",4370:"59d71911",4445:"5d58e1db",4462:"2539e8a4",4498:"e5513459",4510:"6f2f3bc4",4570:"e81456df",4622:"e6a1e618",4732:"5c3b5e5b",4748:"3081e5db",4833:"36673e20",4860:"36bc2cb7",4894:"1dfb400e",5011:"c76a7393",5036:"1c0d196e",5220:"5a9194cc",5229:"77000c5c",5234:"ee85fa5d",5281:"f01423cd",5354:"715dffee",5391:"15e65363",5438:"5f40b003",5443:"a321f3db",5450:"58bc5ed3",5455:"6f86e938",5477:"3c6518a2",5584:"72a96050",5603:"2d67edf6",5604:"17f0ee5e",5660:"fbec17cb",5742:"2d8ebb25",5767:"73d63b74",5771:"1746c76c",5807:"4e8bd98a",5822:"7c9607a5",5840:"aa74f28f",5878:"111bcb41",5894:"e62e73b7",6022:"cf954b65",6081:"a10eac35",6084:"35313978",6095:"166c5f89",6101:"c57f85b3",6178:"a5ac8c27",6214:"60c2637a",6226:"7348ee67",6255:"fbfb28b8",6349:"75add21e",6451:"3e59e506",6516:"52815850",6560:"bc5c0b94",6564:"80a1d33d",6628:"a5f4ab2d",6664:"b6966d56",6780:"aea705d4",6805:"9517be47",6887:"0c1ee0f3",6909:"33513b02",7011:"bd90c8c2",7030:"90090bc6",7036:"e129337c",7077:"64c97f52",7098:"0086a292",7137:"3df033ae",7153:"84a54bfa",7196:"bcd887d9",7265:"cd4bf74b",7291:"9d9b2e33",7380:"4918a68c",7472:"fc364f18",7487:"efd89bce",7497:"41f437e3",7512:"05ad754a",7539:"3a617416",7541:"f15eed1b",7586:"61038917",7635:"8a9854fa",7643:"773e115b",7685:"1f91bdd5",7690:"a143c35f",7727:"519666b9",7733:"0da0fc72",7745:"2484414b",7764:"85b10151",7785:"9d9061f0",7874:"e74ef182",8055:"69d8ccc9",8333:"f59ea560",8401:"662bd1ed",8406:"f5c01c0d",8423:"f8dc7e98",8429:"00e45382",8528:"a3b0b85e",8544:"151d5254",8550:"5e9df2c9",8564:"b1352cda",8581:"01fb47d4",8602:"437e4280",8775:"03960ff1",8819:"1079ba07",8849:"6571621e",8853:"5317364b",8913:"b6f04e6e",9005:"2379ab99",9048:"6b9d296d",9126:"1e0e84c4",9146:"496730f9",9153:"f973f826",9268:"ea7806ff",9433:"9ec96a47",9462:"5f105120",9509:"2f42710f",9531:"66eca5d4",9647:"d4a2a90d",9672:"497f0d49",9695:"16b34f74",9801:"cac8d9d2",9903:"29c41124",9942:"c4f03700"}[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),f={},r.l=(e,a,c,d)=>{if(f[e])f[e].push(a);else{var b,t;if(void 0!==c)for(var o=document.getElementsByTagName("script"),n=0;n<o.length;n++){var i=o[n];if(i.getAttribute("src")==e){b=i;break}}b||(t=!0,(b=document.createElement("script")).charset="utf-8",b.timeout=120,r.nc&&b.setAttribute("nonce",r.nc),b.src=e),f[e]=[a];var l=(a,c)=>{b.onerror=b.onload=null,clearTimeout(u);var d=f[e];if(delete f[e],b.parentNode&&b.parentNode.removeChild(b),d&&d.forEach((e=>e(c))),a)return a(c)},u=setTimeout(l.bind(null,void 0,{type:"timeout",target:b}),12e4);b.onerror=l.bind(null,b.onerror),b.onload=l.bind(null,b.onload),t&&document.head.appendChild(b)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.p="/",r.gca=function(e){return e={17896441:"8401",40951796:"220",80697847:"4894",cae0f04b:"88","3031e46b":"189","9eb9fa54":"350","3ab9445b":"373",daa69925:"446","572e4edf":"467","1b186f64":"515","015816e2":"569",e4355444:"667","798c9bc2":"806",ac1a782b:"1124",dc2cd7e2:"1295","7a54a545":"1355",a4df4865:"1401","01a1bba5":"1458","0abd59c6":"1529",caa2e070:"1532","2431ba31":"1566","0df1a66c":"1628",cdaae041:"1666","3827c3c6":"1834",b2b675dd:"1991",ce6e696b:"2043",e6baa823:"2051",b7efbaa4:"2099",cc32fbde:"2107","1a4e3797":"2138","076c147e":"2142",ef491088:"2288",ca5d36aa:"2317",f89f17ac:"2364",d3dd1f61:"2546",dce7fd61:"2570","9c153eaa":"2571","850be153":"2590",e076d91c:"2594",a5852e81:"2598",c4f5d8e4:"2634","5509b76f":"2669","9e4087bc":"2711","9d672d00":"2723","696a01cf":"2729",d7647bb5:"2862","5c035ad5":"2879","5b8adf66":"2950",ab6201ac:"3079",ccc49370:"3249","67152cfe":"3314",bdd8dcaf:"3315",decfdbba:"3328",ec93dc32:"3447",b2f554cd:"3513","3a7fefd0":"3529",cc73ed51:"3570",a1c1515a:"3737",f91e79c8:"3811","7bb2f638":"3893","8ad4811d":"3904",b025bb67:"4043",c41acfd1:"4050",e628667e:"4060","02af63f8":"4067","5e12ca1d":"4095","4f0789b6":"4199","528602c4":"4279","91e4d5ec":"4343","6cb48572":"4370","55102a22":"4445","9afda0ee":"4462",d6377ff4:"4498","76852a88":"4510",e6bcd470:"4570","7bb7102b":"4622","9d6f1d6a":"4732",bfcd17f4:"4748","69e6e3bb":"4833",e8db9b6a:"4860","017c7e36":"5011","4a6c08fa":"5036","99cd0956":"5220",fcc2aa60:"5229",e85cb86b:"5234",feb0df8a:"5281","0ae76a47":"5354",e84c24e5:"5391","42f9def7":"5438","561a3eb1":"5443","1dc3c8d9":"5450","0f85c961":"5455","420a4aff":"5477",a9668f36:"5584","93e8f896":"5603","075c7a17":"5604","38eb30df":"5660",c377a04b:"5742","8eb4e46b":"5767","6588f8a2":"5771","6c11b4de":"5807",d1104007:"5822","46c309cc":"5840","8c472a46":"5878","0a789486":"5894","2cd23ac7":"6022","78e9b454":"6081","1943dfb2":"6084",ae4abcdb:"6095","29aa1e09":"6101","8a734aad":"6178",b9edb02a:"6214",c867fe7c:"6226","5896a7ea":"6255","5118ee85":"6349",f57aa09c:"6451",a4cef419:"6516","08c25933":"6560","90e0a41c":"6564",f3344494:"6628",e74a79a5:"6664","940fc73a":"6780","98ffbda8":"6805","2e5fe557":"6887","823b648e":"6909",fcfac0f1:"7011",a57ccd44:"7030",e5846443:"7036",f539466a:"7077",a7bd4aaa:"7098",fa29c2d5:"7137",b5351572:"7153",d549428a:"7196",dcc53905:"7265","8f8ee7f5":"7291",ff185f4e:"7380","814f3328":"7472","50fa5667":"7487",ee4f9438:"7497",ac0c4088:"7512","2aac956c":"7539","0b8ff5c4":"7541",fe4bf730:"7586","8ac9c664":"7635",a6aa9e1f:"7643",fc03b22f:"7685","2e1d0e00":"7690","9efeee7f":"7727","0f572e6e":"7733","1b9bd3d9":"7745",c09e1667:"7764","3082ef22":"7785",a1a42c9b:"7874","9093cedc":"8055",d61e08fd:"8333","68a4a0c2":"8406",ee76fcac:"8423","3c561f1c":"8429",edba9c72:"8528","88ab1274":"8550","7a77816f":"8564","935f2afb":"8581",a998b65c:"8602",a9afa101:"8775",b3bcde3d:"8819",d488f8a7:"8849",dc7b4688:"8853",fad948d0:"9005",a94703ab:"9048","5c27e93c":"9126",a97faf63:"9146",febdff58:"9153",a6e5e601:"9268","96f9dd39":"9433","85376e8b":"9509",e469ac48:"9531","5e95c892":"9647",dfd9a880:"9672","674fa9c4":"9695","8999baf8":"9801","8bb54e26":"9903","377636fe":"9942"}[e]||e,r.p+r.u(e)},(()=>{var e={2973:0,1869:0};r.f.j=(a,c)=>{var f=r.o(e,a)?e[a]:void 0;if(0!==f)if(f)c.push(f[2]);else if(/^(1869|2973)$/.test(a))e[a]=0;else{var d=new Promise(((c,d)=>f=e[a]=[c,d]));c.push(f[2]=d);var b=r.p+r.u(a),t=new Error;r.l(b,(c=>{if(r.o(e,a)&&(0!==(f=e[a])&&(e[a]=void 0),f)){var d=c&&("load"===c.type?"missing":c.type),b=c&&c.target&&c.target.src;t.message="Loading chunk "+a+" failed.\n("+d+": "+b+")",t.name="ChunkLoadError",t.type=d,t.request=b,f[1](t)}}),"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,c)=>{var f,d,b=c[0],t=c[1],o=c[2],n=0;if(b.some((a=>0!==e[a]))){for(f in t)r.o(t,f)&&(r.m[f]=t[f]);if(o)var i=o(r)}for(a&&a(c);n<b.length;n++)d=b[n],r.o(e,d)&&e[d]&&e[d][0](),e[d]=0;return r.O(i)},c=self.webpackChunk=self.webpackChunk||[];c.forEach(a.bind(null,0)),c.push=a.bind(null,c.push.bind(c))})()})();
\ No newline at end of file
+(()=>{"use strict";var e,a,c,f,d={},b={};function r(e){var a=b[e];if(void 0!==a)return a.exports;var c=b[e]={id:e,loaded:!1,exports:{}};return d[e].call(c.exports,c,c.exports,r),c.loaded=!0,c.exports}r.m=d,r.c=b,e=[],r.O=(a,c,f,d)=>{if(!c){var b=1/0;for(i=0;i<e.length;i++){c=e[i][0],f=e[i][1],d=e[i][2];for(var t=!0,o=0;o<c.length;o++)(!1&d||b>=d)&&Object.keys(r.O).every((e=>r.O[e](c[o])))?c.splice(o--,1):(t=!1,d<b&&(b=d));if(t){e.splice(i--,1);var n=f();void 0!==n&&(a=n)}}return a}d=d||0;for(var i=e.length;i>0&&e[i-1][2]>d;i--)e[i]=e[i-1];e[i]=[c,f,d]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a:a}),a},c=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,f){if(1&f&&(e=this(e)),8&f)return e;if("object"==typeof e&&e){if(4&f&&e.__esModule)return e;if(16&f&&"function"==typeof e.then)return e}var d=Object.create(null);r.r(d);var b={};a=a||[null,c({}),c([]),c(c)];for(var t=2&f&&e;"object"==typeof t&&!~a.indexOf(t);t=c(t))Object.getOwnPropertyNames(t).forEach((a=>b[a]=()=>e[a]));return b.default=()=>e,r.d(d,b),d},r.d=(e,a)=>{for(var c in a)r.o(a,c)&&!r.o(e,c)&&Object.defineProperty(e,c,{enumerable:!0,get:a[c]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((a,c)=>(r.f[c](e,a),a)),[])),r.u=e=>"assets/js/"+({88:"cae0f04b",189:"3031e46b",220:"40951796",350:"9eb9fa54",373:"3ab9445b",446:"daa69925",467:"572e4edf",515:"1b186f64",569:"015816e2",667:"e4355444",806:"798c9bc2",1124:"ac1a782b",1295:"dc2cd7e2",1355:"7a54a545",1401:"a4df4865",1458:"01a1bba5",1529:"0abd59c6",1532:"caa2e070",1566:"2431ba31",1628:"0df1a66c",1666:"cdaae041",1834:"3827c3c6",1991:"b2b675dd",2043:"ce6e696b",2051:"e6baa823",2099:"b7efbaa4",2107:"cc32fbde",2138:"1a4e3797",2142:"076c147e",2288:"ef491088",2317:"ca5d36aa",2364:"f89f17ac",2546:"d3dd1f61",2570:"dce7fd61",2571:"9c153eaa",2590:"850be153",2594:"e076d91c",2598:"a5852e81",2634:"c4f5d8e4",2669:"5509b76f",2711:"9e4087bc",2723:"9d672d00",2729:"696a01cf",2862:"d7647bb5",2879:"5c035ad5",2950:"5b8adf66",3079:"ab6201ac",3249:"ccc49370",3314:"67152cfe",3315:"bdd8dcaf",3328:"decfdbba",3447:"ec93dc32",3513:"b2f554cd",3529:"3a7fefd0",3570:"cc73ed51",3737:"a1c1515a",3811:"f91e79c8",3893:"7bb2f638",3904:"8ad4811d",4043:"b025bb67",4050:"c41acfd1",4060:"e628667e",4067:"02af63f8",4095:"5e12ca1d",4199:"4f0789b6",4279:"528602c4",4343:"91e4d5ec",4370:"6cb48572",4445:"55102a22",4462:"9afda0ee",4498:"d6377ff4",4510:"76852a88",4570:"e6bcd470",4622:"7bb7102b",4732:"9d6f1d6a",4748:"bfcd17f4",4833:"69e6e3bb",4860:"e8db9b6a",4894:"80697847",5011:"017c7e36",5036:"4a6c08fa",5220:"99cd0956",5229:"fcc2aa60",5234:"e85cb86b",5281:"feb0df8a",5354:"0ae76a47",5391:"e84c24e5",5438:"42f9def7",5443:"561a3eb1",5450:"1dc3c8d9",5455:"0f85c961",5477:"420a4aff",5584:"a9668f36",5603:"93e8f896",5604:"075c7a17",5660:"38eb30df",5742:"c377a04b",5767:"8eb4e46b",5771:"6588f8a2",5807:"6c11b4de",5822:"d1104007",5840:"46c309cc",5878:"8c472a46",5894:"0a789486",6022:"2cd23ac7",6081:"78e9b454",6084:"1943dfb2",6095:"ae4abcdb",6101:"29aa1e09",6178:"8a734aad",6214:"b9edb02a",6226:"c867fe7c",6255:"5896a7ea",6349:"5118ee85",6451:"f57aa09c",6516:"a4cef419",6560:"08c25933",6564:"90e0a41c",6628:"f3344494",6664:"e74a79a5",6780:"940fc73a",6805:"98ffbda8",6887:"2e5fe557",6909:"823b648e",7011:"fcfac0f1",7030:"a57ccd44",7036:"e5846443",7077:"f539466a",7098:"a7bd4aaa",7137:"fa29c2d5",7153:"b5351572",7196:"d549428a",7265:"dcc53905",7291:"8f8ee7f5",7380:"ff185f4e",7472:"814f3328",7487:"50fa5667",7497:"ee4f9438",7512:"ac0c4088",7539:"2aac956c",7541:"0b8ff5c4",7586:"fe4bf730",7635:"8ac9c664",7643:"a6aa9e1f",7685:"fc03b22f",7690:"2e1d0e00",7727:"9efeee7f",7733:"0f572e6e",7745:"1b9bd3d9",7764:"c09e1667",7785:"3082ef22",7874:"a1a42c9b",8055:"9093cedc",8333:"d61e08fd",8401:"17896441",8406:"68a4a0c2",8423:"ee76fcac",8429:"3c561f1c",8528:"edba9c72",8550:"88ab1274",8564:"7a77816f",8581:"935f2afb",8602:"a998b65c",8775:"a9afa101",8819:"b3bcde3d",8849:"d488f8a7",8853:"dc7b4688",9005:"fad948d0",9048:"a94703ab",9126:"5c27e93c",9146:"a97faf63",9153:"febdff58",9268:"a6e5e601",9433:"96f9dd39",9509:"85376e8b",9531:"e469ac48",9647:"5e95c892",9672:"dfd9a880",9695:"674fa9c4",9801:"8999baf8",9903:"8bb54e26",9942:"377636fe"}[e]||e)+"."+{88:"302b823c",189:"5670f042",220:"e015c861",350:"05b0afa8",373:"a7c97221",416:"b444750d",446:"56cf738f",467:"59a8d603",515:"b8b6f6fd",569:"bac7eadf",667:"21ae6e4a",806:"77f68c98",1124:"eae9d71c",1295:"e89f6c2a",1333:"f2fdbb0a",1355:"9b35ba76",1401:"9b76658d",1458:"9de61a65",1529:"38be1e8f",1532:"bc0c013c",1566:"420d4c87",1628:"f727a3da",1666:"4d438b77",1834:"57c87c80",1991:"1b66eb44",2043:"a622a8e5",2051:"54712561",2099:"34fca0f5",2107:"4055c590",2138:"c77e0835",2142:"540f8134",2237:"142894c1",2288:"cabd5440",2317:"409281c7",2364:"bb9166d2",2546:"5da15dd0",2570:"7755820c",2571:"76ecf634",2590:"9b366fef",2594:"dad62b1c",2598:"1cb08ad6",2634:"11f81bd8",2669:"71fc14d2",2711:"97405554",2723:"4011f9b6",2729:"dcc743d4",2862:"3bd13d47",2879:"ba191d37",2950:"740d8833",3079:"3ed595a7",3249:"50862a89",3314:"85cb824b",3315:"754c87d5",3328:"b2cbabe6",3447:"dfcd9ea9",3513:"d3168130",3529:"cf8148cb",3570:"8c5f1ddf",3737:"8879917f",3811:"e78ed917",3893:"91b6fd4b",3904:"241ae99a",4043:"dec3b70f",4050:"3b8ea987",4060:"e5230aa0",4067:"a718fc16",4095:"ab505c43",4199:"8232b41c",4279:"980add8a",4343:"b9111d9c",4370:"59d71911",4445:"5d58e1db",4462:"2539e8a4",4498:"e5513459",4510:"6f2f3bc4",4570:"e81456df",4622:"e6a1e618",4732:"5c3b5e5b",4748:"3081e5db",4833:"36673e20",4860:"36bc2cb7",4894:"1dfb400e",5011:"c76a7393",5036:"1c0d196e",5220:"5a9194cc",5229:"77000c5c",5234:"ee85fa5d",5281:"f01423cd",5354:"715dffee",5391:"15e65363",5438:"5f40b003",5443:"a321f3db",5450:"58bc5ed3",5455:"6f86e938",5477:"3c6518a2",5584:"72a96050",5603:"2d67edf6",5604:"17f0ee5e",5660:"fbec17cb",5742:"2d8ebb25",5767:"73d63b74",5771:"1746c76c",5807:"4e8bd98a",5822:"7c9607a5",5840:"aa74f28f",5878:"111bcb41",5894:"e62e73b7",6022:"cf954b65",6081:"a10eac35",6084:"35313978",6095:"166c5f89",6101:"c57f85b3",6178:"a5ac8c27",6214:"60c2637a",6226:"7348ee67",6255:"fbfb28b8",6349:"75add21e",6451:"3e59e506",6516:"52815850",6560:"bc5c0b94",6564:"80a1d33d",6628:"a5f4ab2d",6664:"b6966d56",6780:"aea705d4",6805:"9517be47",6887:"0c1ee0f3",6909:"33513b02",7011:"bd90c8c2",7030:"90090bc6",7036:"e129337c",7077:"64c97f52",7098:"0086a292",7137:"3df033ae",7153:"84a54bfa",7196:"bcd887d9",7265:"cd4bf74b",7291:"9d9b2e33",7380:"4918a68c",7472:"fc364f18",7487:"efd89bce",7497:"41f437e3",7512:"05ad754a",7539:"3a617416",7541:"f15eed1b",7586:"61038917",7635:"8a9854fa",7643:"773e115b",7685:"12f50ff3",7690:"a143c35f",7727:"519666b9",7733:"0da0fc72",7745:"2484414b",7764:"85b10151",7785:"9d9061f0",7874:"e74ef182",8055:"69d8ccc9",8333:"f59ea560",8401:"662bd1ed",8406:"f5c01c0d",8423:"f8dc7e98",8429:"00e45382",8528:"a3b0b85e",8544:"151d5254",8550:"5e9df2c9",8564:"b1352cda",8581:"01fb47d4",8602:"437e4280",8775:"03960ff1",8819:"1079ba07",8849:"6571621e",8853:"5317364b",8913:"b6f04e6e",9005:"2379ab99",9048:"6b9d296d",9126:"1e0e84c4",9146:"496730f9",9153:"f973f826",9268:"ea7806ff",9433:"9ec96a47",9462:"5f105120",9509:"2f42710f",9531:"66eca5d4",9647:"d4a2a90d",9672:"497f0d49",9695:"16b34f74",9801:"cac8d9d2",9903:"29c41124",9942:"c4f03700"}[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),f={},r.l=(e,a,c,d)=>{if(f[e])f[e].push(a);else{var b,t;if(void 0!==c)for(var o=document.getElementsByTagName("script"),n=0;n<o.length;n++){var i=o[n];if(i.getAttribute("src")==e){b=i;break}}b||(t=!0,(b=document.createElement("script")).charset="utf-8",b.timeout=120,r.nc&&b.setAttribute("nonce",r.nc),b.src=e),f[e]=[a];var l=(a,c)=>{b.onerror=b.onload=null,clearTimeout(u);var d=f[e];if(delete f[e],b.parentNode&&b.parentNode.removeChild(b),d&&d.forEach((e=>e(c))),a)return a(c)},u=setTimeout(l.bind(null,void 0,{type:"timeout",target:b}),12e4);b.onerror=l.bind(null,b.onerror),b.onload=l.bind(null,b.onload),t&&document.head.appendChild(b)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.p="/",r.gca=function(e){return e={17896441:"8401",40951796:"220",80697847:"4894",cae0f04b:"88","3031e46b":"189","9eb9fa54":"350","3ab9445b":"373",daa69925:"446","572e4edf":"467","1b186f64":"515","015816e2":"569",e4355444:"667","798c9bc2":"806",ac1a782b:"1124",dc2cd7e2:"1295","7a54a545":"1355",a4df4865:"1401","01a1bba5":"1458","0abd59c6":"1529",caa2e070:"1532","2431ba31":"1566","0df1a66c":"1628",cdaae041:"1666","3827c3c6":"1834",b2b675dd:"1991",ce6e696b:"2043",e6baa823:"2051",b7efbaa4:"2099",cc32fbde:"2107","1a4e3797":"2138","076c147e":"2142",ef491088:"2288",ca5d36aa:"2317",f89f17ac:"2364",d3dd1f61:"2546",dce7fd61:"2570","9c153eaa":"2571","850be153":"2590",e076d91c:"2594",a5852e81:"2598",c4f5d8e4:"2634","5509b76f":"2669","9e4087bc":"2711","9d672d00":"2723","696a01cf":"2729",d7647bb5:"2862","5c035ad5":"2879","5b8adf66":"2950",ab6201ac:"3079",ccc49370:"3249","67152cfe":"3314",bdd8dcaf:"3315",decfdbba:"3328",ec93dc32:"3447",b2f554cd:"3513","3a7fefd0":"3529",cc73ed51:"3570",a1c1515a:"3737",f91e79c8:"3811","7bb2f638":"3893","8ad4811d":"3904",b025bb67:"4043",c41acfd1:"4050",e628667e:"4060","02af63f8":"4067","5e12ca1d":"4095","4f0789b6":"4199","528602c4":"4279","91e4d5ec":"4343","6cb48572":"4370","55102a22":"4445","9afda0ee":"4462",d6377ff4:"4498","76852a88":"4510",e6bcd470:"4570","7bb7102b":"4622","9d6f1d6a":"4732",bfcd17f4:"4748","69e6e3bb":"4833",e8db9b6a:"4860","017c7e36":"5011","4a6c08fa":"5036","99cd0956":"5220",fcc2aa60:"5229",e85cb86b:"5234",feb0df8a:"5281","0ae76a47":"5354",e84c24e5:"5391","42f9def7":"5438","561a3eb1":"5443","1dc3c8d9":"5450","0f85c961":"5455","420a4aff":"5477",a9668f36:"5584","93e8f896":"5603","075c7a17":"5604","38eb30df":"5660",c377a04b:"5742","8eb4e46b":"5767","6588f8a2":"5771","6c11b4de":"5807",d1104007:"5822","46c309cc":"5840","8c472a46":"5878","0a789486":"5894","2cd23ac7":"6022","78e9b454":"6081","1943dfb2":"6084",ae4abcdb:"6095","29aa1e09":"6101","8a734aad":"6178",b9edb02a:"6214",c867fe7c:"6226","5896a7ea":"6255","5118ee85":"6349",f57aa09c:"6451",a4cef419:"6516","08c25933":"6560","90e0a41c":"6564",f3344494:"6628",e74a79a5:"6664","940fc73a":"6780","98ffbda8":"6805","2e5fe557":"6887","823b648e":"6909",fcfac0f1:"7011",a57ccd44:"7030",e5846443:"7036",f539466a:"7077",a7bd4aaa:"7098",fa29c2d5:"7137",b5351572:"7153",d549428a:"7196",dcc53905:"7265","8f8ee7f5":"7291",ff185f4e:"7380","814f3328":"7472","50fa5667":"7487",ee4f9438:"7497",ac0c4088:"7512","2aac956c":"7539","0b8ff5c4":"7541",fe4bf730:"7586","8ac9c664":"7635",a6aa9e1f:"7643",fc03b22f:"7685","2e1d0e00":"7690","9efeee7f":"7727","0f572e6e":"7733","1b9bd3d9":"7745",c09e1667:"7764","3082ef22":"7785",a1a42c9b:"7874","9093cedc":"8055",d61e08fd:"8333","68a4a0c2":"8406",ee76fcac:"8423","3c561f1c":"8429",edba9c72:"8528","88ab1274":"8550","7a77816f":"8564","935f2afb":"8581",a998b65c:"8602",a9afa101:"8775",b3bcde3d:"8819",d488f8a7:"8849",dc7b4688:"8853",fad948d0:"9005",a94703ab:"9048","5c27e93c":"9126",a97faf63:"9146",febdff58:"9153",a6e5e601:"9268","96f9dd39":"9433","85376e8b":"9509",e469ac48:"9531","5e95c892":"9647",dfd9a880:"9672","674fa9c4":"9695","8999baf8":"9801","8bb54e26":"9903","377636fe":"9942"}[e]||e,r.p+r.u(e)},(()=>{var e={2973:0,1869:0};r.f.j=(a,c)=>{var f=r.o(e,a)?e[a]:void 0;if(0!==f)if(f)c.push(f[2]);else if(/^(1869|2973)$/.test(a))e[a]=0;else{var d=new Promise(((c,d)=>f=e[a]=[c,d]));c.push(f[2]=d);var b=r.p+r.u(a),t=new Error;r.l(b,(c=>{if(r.o(e,a)&&(0!==(f=e[a])&&(e[a]=void 0),f)){var d=c&&("load"===c.type?"missing":c.type),b=c&&c.target&&c.target.src;t.message="Loading chunk "+a+" failed.\n("+d+": "+b+")",t.name="ChunkLoadError",t.type=d,t.request=b,f[1](t)}}),"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,c)=>{var f,d,b=c[0],t=c[1],o=c[2],n=0;if(b.some((a=>0!==e[a]))){for(f in t)r.o(t,f)&&(r.m[f]=t[f]);if(o)var i=o(r)}for(a&&a(c);n<b.length;n++)d=b[n],r.o(e,d)&&e[d]&&e[d][0](),e[d]=0;return r.O(i)},c=self.webpackChunk=self.webpackChunk||[];c.forEach(a.bind(null,0)),c.push=a.bind(null,c.push.bind(c))})()})();
\ No newline at end of file
diff --git a/blog/2016/02/26/a-case-for-soa-in-the-browser/index.html b/blog/2016/02/26/a-case-for-soa-in-the-browser/index.html
index 769d5a338..4e7b84385 100644
--- a/blog/2016/02/26/a-case-for-soa-in-the-browser/index.html
+++ b/blog/2016/02/26/a-case-for-soa-in-the-browser/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/blog/2016/12/16/a-step-by-step-guide-to-single-spa/index.html b/blog/2016/12/16/a-step-by-step-guide-to-single-spa/index.html
index c82846b0a..4343b7ca8 100644
--- a/blog/2016/12/16/a-step-by-step-guide-to-single-spa/index.html
+++ b/blog/2016/12/16/a-step-by-step-guide-to-single-spa/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/blog/2018/06/19/single-spa-parcels-explained/index.html b/blog/2018/06/19/single-spa-parcels-explained/index.html
index e2c98ab2b..353bd7b9b 100644
--- a/blog/2018/06/19/single-spa-parcels-explained/index.html
+++ b/blog/2018/06/19/single-spa-parcels-explained/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/blog/2019/02/20/single-spa-inspector/index.html b/blog/2019/02/20/single-spa-inspector/index.html
index b1efe5261..9fb562e57 100644
--- a/blog/2019/02/20/single-spa-inspector/index.html
+++ b/blog/2019/02/20/single-spa-inspector/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/blog/2020/02/24/single-spa-5/index.html b/blog/2020/02/24/single-spa-5/index.html
index 50e581246..dc16ec494 100644
--- a/blog/2020/02/24/single-spa-5/index.html
+++ b/blog/2020/02/24/single-spa-5/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/blog/2023/08/22/single-spa-core-is-expanding/index.html b/blog/2023/08/22/single-spa-core-is-expanding/index.html
index 1ce09df1c..612084100 100644
--- a/blog/2023/08/22/single-spa-core-is-expanding/index.html
+++ b/blog/2023/08/22/single-spa-core-is-expanding/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/blog/2023/10/11/introducing-single-spa-new-core-team-members/index.html b/blog/2023/10/11/introducing-single-spa-new-core-team-members/index.html
index 4168425ca..2c63dffdf 100644
--- a/blog/2023/10/11/introducing-single-spa-new-core-team-members/index.html
+++ b/blog/2023/10/11/introducing-single-spa-new-core-team-members/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/blog/2023/11/07/core-team-meeting-notes/index.html b/blog/2023/11/07/core-team-meeting-notes/index.html
index d18274241..b3f902c01 100644
--- a/blog/2023/11/07/core-team-meeting-notes/index.html
+++ b/blog/2023/11/07/core-team-meeting-notes/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/blog/2023/11/27/single-spa-6/index.html b/blog/2023/11/27/single-spa-6/index.html
index 4f92f7636..587a5104e 100644
--- a/blog/2023/11/27/single-spa-6/index.html
+++ b/blog/2023/11/27/single-spa-6/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/blog/2023/12/12/core-team-meeting-notes/index.html b/blog/2023/12/12/core-team-meeting-notes/index.html
index 4d3f4d00c..f86c6e0c5 100644
--- a/blog/2023/12/12/core-team-meeting-notes/index.html
+++ b/blog/2023/12/12/core-team-meeting-notes/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/blog/2024/01/03/core-team-meeting-notes/index.html b/blog/2024/01/03/core-team-meeting-notes/index.html
index fa2f24b72..441fa7e34 100644
--- a/blog/2024/01/03/core-team-meeting-notes/index.html
+++ b/blog/2024/01/03/core-team-meeting-notes/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/blog/2024/02/14/core-team-meeting-notes/index.html b/blog/2024/02/14/core-team-meeting-notes/index.html
index 35c9d4bd8..d746a91e3 100644
--- a/blog/2024/02/14/core-team-meeting-notes/index.html
+++ b/blog/2024/02/14/core-team-meeting-notes/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/blog/2024/03/12/core-team-meeting-notes/index.html b/blog/2024/03/12/core-team-meeting-notes/index.html
index fb59b751f..9dc6ac1cf 100644
--- a/blog/2024/03/12/core-team-meeting-notes/index.html
+++ b/blog/2024/03/12/core-team-meeting-notes/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/blog/2024/03/18/top-5-microfrontend-hosting-solutions/index.html b/blog/2024/03/18/top-5-microfrontend-hosting-solutions/index.html
index cf5cc4e5e..2dcf841c6 100644
--- a/blog/2024/03/18/top-5-microfrontend-hosting-solutions/index.html
+++ b/blog/2024/03/18/top-5-microfrontend-hosting-solutions/index.html
@@ -3,7 +3,7 @@
 <head>
 <meta charset="UTF-8">
 <meta name="generator" content="Docusaurus v3.1.1">
-<title data-rh="true">Top 5 Microfrontend Hosting Solutions | single-spa</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://single-spa.js.org/img/docusaurus.png"><meta data-rh="true" name="twitter:image" content="https://single-spa.js.org/img/docusaurus.png"><meta data-rh="true" property="og:url" content="https://single-spa.js.org/blog/2024/03/18/top-5-microfrontend-hosting-solutions"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docusaurus_tag" content="default"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docsearch:docusaurus_tag" content="default"><meta data-rh="true" property="og:title" content="Top 5 Microfrontend Hosting Solutions | single-spa"><meta data-rh="true" name="description" content="With rapid growth in recent years, microfrontends have become a popular solution with many companies, from large software organizations to small independent dev teams. Microfrontend hosting can get complicated quickly but it is a crucial aspect of scaling software organizations&#x27; development cycle. Whether companies are using single-spa, module federation, or any other microfrontends tools, the management of CI/CD pipelines, deployments, CDNs, and service discovery is something all companies will have to solve."><meta data-rh="true" property="og:description" content="With rapid growth in recent years, microfrontends have become a popular solution with many companies, from large software organizations to small independent dev teams. Microfrontend hosting can get complicated quickly but it is a crucial aspect of scaling software organizations&#x27; development cycle. Whether companies are using single-spa, module federation, or any other microfrontends tools, the management of CI/CD pipelines, deployments, CDNs, and service discovery is something all companies will have to solve."><meta data-rh="true" property="og:type" content="article"><meta data-rh="true" property="article:published_time" content="2024-03-18T00:00:00.000Z"><meta data-rh="true" property="article:author" content="https://x.com/joelbdenning"><link data-rh="true" rel="icon" href="/img/single-spa-mark-magenta.svg"><link data-rh="true" rel="canonical" href="https://single-spa.js.org/blog/2024/03/18/top-5-microfrontend-hosting-solutions"><link data-rh="true" rel="alternate" href="https://single-spa.js.org/blog/2024/03/18/top-5-microfrontend-hosting-solutions" hreflang="en"><link data-rh="true" rel="alternate" href="https://single-spa.js.org/blog/2024/03/18/top-5-microfrontend-hosting-solutions" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://FWAC4N89WA-dsn.algolia.net" crossorigin="anonymous"><link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="single-spa RSS Feed">
+<title data-rh="true">Top 5 Microfrontend Hosting Solutions | single-spa</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://single-spa.js.org/img/docusaurus.png"><meta data-rh="true" name="twitter:image" content="https://single-spa.js.org/img/docusaurus.png"><meta data-rh="true" property="og:url" content="https://single-spa.js.org/blog/2024/03/18/top-5-microfrontend-hosting-solutions"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docusaurus_tag" content="default"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docsearch:docusaurus_tag" content="default"><meta data-rh="true" property="og:title" content="Top 5 Microfrontend Hosting Solutions | single-spa"><meta data-rh="true" name="description" content="With rapid growth in recent years, microfrontends have become a popular solution with many companies, from large software organizations to small independent dev teams. Microfrontend hosting can get complicated quickly but it is a crucial aspect of scaling software organizations&#x27; development cycle. Whether companies are using single-spa, module federation, or any other microfrontends tools, the management of CI/CD pipelines, deployments, CDNs, and service discovery is something all companies will have to solve."><meta data-rh="true" property="og:description" content="With rapid growth in recent years, microfrontends have become a popular solution with many companies, from large software organizations to small independent dev teams. Microfrontend hosting can get complicated quickly but it is a crucial aspect of scaling software organizations&#x27; development cycle. Whether companies are using single-spa, module federation, or any other microfrontends tools, the management of CI/CD pipelines, deployments, CDNs, and service discovery is something all companies will have to solve."><meta data-rh="true" property="og:type" content="article"><meta data-rh="true" property="article:published_time" content="2024-03-18T00:00:00.000Z"><link data-rh="true" rel="icon" href="/img/single-spa-mark-magenta.svg"><link data-rh="true" rel="canonical" href="https://single-spa.js.org/blog/2024/03/18/top-5-microfrontend-hosting-solutions"><link data-rh="true" rel="alternate" href="https://single-spa.js.org/blog/2024/03/18/top-5-microfrontend-hosting-solutions" hreflang="en"><link data-rh="true" rel="alternate" href="https://single-spa.js.org/blog/2024/03/18/top-5-microfrontend-hosting-solutions" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://FWAC4N89WA-dsn.algolia.net" crossorigin="anonymous"><link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="single-spa RSS Feed">
 <link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="single-spa Atom Feed">
 
 <link rel="preconnect" href="https://www.google-analytics.com">
@@ -14,11 +14,11 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
-<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/single-spa-mark-magenta.svg" alt="single-spa Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/single-spa-mark-magenta.svg" alt="single-spa Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">single-spa</b></a><a class="navbar__item navbar__link" style="white-space:nowrap;padding:0.25rem 0.5rem 0.2rem 0.25rem;font-size:calc(0.9 * var(--ifm-font-size-base));text-decoration:underline" href="/versions">6.x</a><a class="navbar__item navbar__link" href="/docs/faq/">FAQ</a><a class="navbar__item navbar__link" href="/docs/">Docs</a><a href="https://single-spa-workshop.com" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Courses</a><a class="navbar__item navbar__link" href="/help/">Help</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog/">Blog</a><a href="https://opencollective.com/single-spa" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Donate<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/single-spa/single-spa" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a class="navbar__item navbar__link" href="/languages">简Жहि Languages</a></div><div class="navbar__items navbar__items--right"><a href="https://baseplate.cloud" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Deploy</a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="container margin-vert--lg"><div class="row"><aside class="col col--3"><nav class="sidebar_re4s thin-scrollbar" aria-label="Blog recent posts navigation"><div class="sidebarItemTitle_pO2u margin-bottom--md">Recent posts</div><ul class="sidebarItemList_Yudw clean-list"><li class="sidebarItem__DBe"><a aria-current="page" class="sidebarItemLink_mo7H sidebarItemLinkActive_I1ZP" href="/blog/2024/03/18/top-5-microfrontend-hosting-solutions">Top 5 Microfrontend Hosting Solutions</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/03/12/core-team-meeting-notes">March 2024 Core Team Meeting</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/02/14/core-team-meeting-notes">February 2024 Core Team Meeting</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/01/03/core-team-meeting-notes">January 2024 Core Team Meeting</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/12/12/core-team-meeting-notes">December 2023 Core Team Meeting</a></li></ul></nav></aside><main class="col col--7" itemscope="" itemtype="https://schema.org/Blog"><article itemprop="blogPost" itemscope="" itemtype="https://schema.org/BlogPosting"><meta itemprop="description" content="With rapid growth in recent years, microfrontends have become a popular solution with many companies, from large software organizations to small independent dev teams. Microfrontend hosting can get complicated quickly but it is a crucial aspect of scaling software organizations&#x27; development cycle. Whether companies are using single-spa, module federation, or any other microfrontends tools, the management of CI/CD pipelines, deployments, CDNs, and service discovery is something all companies will have to solve."><header><h1 class="title_f1Hy" itemprop="headline">Top 5 Microfrontend Hosting Solutions</h1><div class="container_mt6G margin-vert--md"><time datetime="2024-03-18T00:00:00.000Z" itemprop="datePublished">March 18, 2024</time> · <!-- -->8 min read</div><div class="margin-top--md margin-bottom--sm row"><div class="col col--6 authorCol_Hf19"><div class="avatar margin-bottom--sm"><a href="https://x.com/joelbdenning" target="_blank" rel="noopener noreferrer" class="avatar__photo-link"><img class="avatar__photo" src="https://avatars.githubusercontent.com/u/5524384" alt="Joel Denning" itemprop="image"></a><div class="avatar__intro" itemprop="author" itemscope="" itemtype="https://schema.org/Person"><div class="avatar__name"><a href="https://x.com/joelbdenning" target="_blank" rel="noopener noreferrer" itemprop="url"><span itemprop="name">Joel Denning</span></a></div></div></div></div></div></header><div id="__blog-post-container" class="markdown" itemprop="articleBody"><p>With rapid growth in recent years, microfrontends have become a popular solution with many companies, from large software organizations to small independent dev teams. Microfrontend hosting can get complicated quickly but it is a crucial aspect of scaling software organizations&#x27; development cycle. Whether companies are using single-spa, module federation, or any other microfrontends tools, the management of CI/CD pipelines, deployments, CDNs, and service discovery is something all companies will have to solve.</p>
+<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/single-spa-mark-magenta.svg" alt="single-spa Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/single-spa-mark-magenta.svg" alt="single-spa Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">single-spa</b></a><a class="navbar__item navbar__link" style="white-space:nowrap;padding:0.25rem 0.5rem 0.2rem 0.25rem;font-size:calc(0.9 * var(--ifm-font-size-base));text-decoration:underline" href="/versions">6.x</a><a class="navbar__item navbar__link" href="/docs/faq/">FAQ</a><a class="navbar__item navbar__link" href="/docs/">Docs</a><a href="https://single-spa-workshop.com" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Courses</a><a class="navbar__item navbar__link" href="/help/">Help</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog/">Blog</a><a href="https://opencollective.com/single-spa" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Donate<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/single-spa/single-spa" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a class="navbar__item navbar__link" href="/languages">简Жहि Languages</a></div><div class="navbar__items navbar__items--right"><a href="https://baseplate.cloud" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Deploy</a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="container margin-vert--lg"><div class="row"><aside class="col col--3"><nav class="sidebar_re4s thin-scrollbar" aria-label="Blog recent posts navigation"><div class="sidebarItemTitle_pO2u margin-bottom--md">Recent posts</div><ul class="sidebarItemList_Yudw clean-list"><li class="sidebarItem__DBe"><a aria-current="page" class="sidebarItemLink_mo7H sidebarItemLinkActive_I1ZP" href="/blog/2024/03/18/top-5-microfrontend-hosting-solutions">Top 5 Microfrontend Hosting Solutions</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/03/12/core-team-meeting-notes">March 2024 Core Team Meeting</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/02/14/core-team-meeting-notes">February 2024 Core Team Meeting</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/01/03/core-team-meeting-notes">January 2024 Core Team Meeting</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/12/12/core-team-meeting-notes">December 2023 Core Team Meeting</a></li></ul></nav></aside><main class="col col--7" itemscope="" itemtype="https://schema.org/Blog"><article itemprop="blogPost" itemscope="" itemtype="https://schema.org/BlogPosting"><meta itemprop="description" content="With rapid growth in recent years, microfrontends have become a popular solution with many companies, from large software organizations to small independent dev teams. Microfrontend hosting can get complicated quickly but it is a crucial aspect of scaling software organizations&#x27; development cycle. Whether companies are using single-spa, module federation, or any other microfrontends tools, the management of CI/CD pipelines, deployments, CDNs, and service discovery is something all companies will have to solve."><header><h1 class="title_f1Hy" itemprop="headline">Top 5 Microfrontend Hosting Solutions</h1><div class="container_mt6G margin-vert--md"><time datetime="2024-03-18T00:00:00.000Z" itemprop="datePublished">March 18, 2024</time> · <!-- -->8 min read</div></header><div id="__blog-post-container" class="markdown" itemprop="articleBody"><p>With rapid growth in recent years, microfrontends have become a popular solution with many companies, from large software organizations to small independent dev teams. Microfrontend hosting can get complicated quickly but it is a crucial aspect of scaling software organizations&#x27; development cycle. Whether companies are using single-spa, module federation, or any other microfrontends tools, the management of CI/CD pipelines, deployments, CDNs, and service discovery is something all companies will have to solve.</p>
 <p>So what’s the most effective solution? Because microfrontend hosting is a relatively new space, most companies have a hard time knowing where to start. Fortunately, there are very good options out there, and unless you have a good reason to, you don’t have to build it out yourself. Here you’ll find a list of the best hosting solutions and the important factors you’ll need to consider to make the decision.</p>
 <h2 class="anchor anchorWithStickyNavbar_LWe7" id="server-side-versus-client-side-rendering">Server-side versus client-side rendering<a href="#server-side-versus-client-side-rendering" class="hash-link" aria-label="Direct link to Server-side versus client-side rendering" title="Direct link to Server-side versus client-side rendering">​</a></h2>
 <p>This article focuses on hosting solutions for client-side rendered microfrontends, since the majority of microfrontend implementations rely solely on <a href="https://ferie.medium.com/what-is-the-client-side-rendering-and-how-it-works-c90210e2cd14" target="_blank" rel="noopener noreferrer">client-side rendering</a>.</p>
diff --git a/blog/archive/index.html b/blog/archive/index.html
index e2ed53c72..e2cfb5bd3 100644
--- a/blog/archive/index.html
+++ b/blog/archive/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/blog/atom.xml b/blog/atom.xml
index fcd5b755e..4a3366f62 100644
--- a/blog/atom.xml
+++ b/blog/atom.xml
@@ -63,10 +63,6 @@
 <p>Google Cloud Platform provides equivalent low-level cloud services to AWS. The same technical details that apply to AWS S3 + Cloudfront also apply to <a href="https://cloud.google.com/storage?hl=en" target="_blank" rel="noopener noreferrer">GCP Cloud Storage</a> and <a href="https://cloud.google.com/cdn/docs/overview" target="_blank" rel="noopener noreferrer">GCP Cloud CDN</a>.</p>
 <h2 class="anchor anchorWithStickyNavbar_LWe7" id="5-azure-storage--cdn">5. Azure Storage + CDN<a href="https://single-spa.js.org/blog/2024/03/18/top-5-microfrontend-hosting-solutions#5-azure-storage--cdn" class="hash-link" aria-label="Direct link to 5. Azure Storage + CDN" title="Direct link to 5. Azure Storage + CDN">​</a></h2>
 <p>Azure Storage provides equivalent low-level cloud services to AWS. The same technical details that apply to AWS S3 + Cloudfront also apply to <a href="https://azure.microsoft.com/en-us/products/category/storage" target="_blank" rel="noopener noreferrer">Azure Storage</a> and <a href="https://azure.microsoft.com/en-us/products/cdn" target="_blank" rel="noopener noreferrer">GCP Cloud CDN</a>.</p>]]></content>
-        <author>
-            <name>Joel Denning</name>
-            <uri>https://x.com/joelbdenning</uri>
-        </author>
     </entry>
     <entry>
         <title type="html"><![CDATA[March 2024 Core Team Meeting]]></title>
diff --git a/blog/index.html b/blog/index.html
index 30ece0956..e2634ca67 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -14,11 +14,11 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
-<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/single-spa-mark-magenta.svg" alt="single-spa Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/single-spa-mark-magenta.svg" alt="single-spa Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">single-spa</b></a><a class="navbar__item navbar__link" style="white-space:nowrap;padding:0.25rem 0.5rem 0.2rem 0.25rem;font-size:calc(0.9 * var(--ifm-font-size-base));text-decoration:underline" href="/versions">6.x</a><a class="navbar__item navbar__link" href="/docs/faq/">FAQ</a><a class="navbar__item navbar__link" href="/docs/">Docs</a><a href="https://single-spa-workshop.com" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Courses</a><a class="navbar__item navbar__link" href="/help/">Help</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog/">Blog</a><a href="https://opencollective.com/single-spa" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Donate<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/single-spa/single-spa" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a class="navbar__item navbar__link" href="/languages">简Жहि Languages</a></div><div class="navbar__items navbar__items--right"><a href="https://baseplate.cloud" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Deploy</a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="container margin-vert--lg"><div class="row"><aside class="col col--3"><nav class="sidebar_re4s thin-scrollbar" aria-label="Blog recent posts navigation"><div class="sidebarItemTitle_pO2u margin-bottom--md">Recent posts</div><ul class="sidebarItemList_Yudw clean-list"><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/03/18/top-5-microfrontend-hosting-solutions">Top 5 Microfrontend Hosting Solutions</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/03/12/core-team-meeting-notes">March 2024 Core Team Meeting</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/02/14/core-team-meeting-notes">February 2024 Core Team Meeting</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/01/03/core-team-meeting-notes">January 2024 Core Team Meeting</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/12/12/core-team-meeting-notes">December 2023 Core Team Meeting</a></li></ul></nav></aside><main class="col col--7" itemscope="" itemtype="https://schema.org/Blog"><article class="margin-bottom--xl" itemprop="blogPost" itemscope="" itemtype="https://schema.org/BlogPosting"><meta itemprop="description" content="With rapid growth in recent years, microfrontends have become a popular solution with many companies, from large software organizations to small independent dev teams. Microfrontend hosting can get complicated quickly but it is a crucial aspect of scaling software organizations&#x27; development cycle. Whether companies are using single-spa, module federation, or any other microfrontends tools, the management of CI/CD pipelines, deployments, CDNs, and service discovery is something all companies will have to solve."><header><h2 class="title_f1Hy" itemprop="headline"><a itemprop="url" href="/blog/2024/03/18/top-5-microfrontend-hosting-solutions">Top 5 Microfrontend Hosting Solutions</a></h2><div class="container_mt6G margin-vert--md"><time datetime="2024-03-18T00:00:00.000Z" itemprop="datePublished">March 18, 2024</time> · <!-- -->8 min read</div><div class="margin-top--md margin-bottom--sm row"><div class="col col--6 authorCol_Hf19"><div class="avatar margin-bottom--sm"><a href="https://x.com/joelbdenning" target="_blank" rel="noopener noreferrer" class="avatar__photo-link"><img class="avatar__photo" src="https://avatars.githubusercontent.com/u/5524384" alt="Joel Denning" itemprop="image"></a><div class="avatar__intro" itemprop="author" itemscope="" itemtype="https://schema.org/Person"><div class="avatar__name"><a href="https://x.com/joelbdenning" target="_blank" rel="noopener noreferrer" itemprop="url"><span itemprop="name">Joel Denning</span></a></div></div></div></div></div></header><div class="markdown" itemprop="articleBody"><p>With rapid growth in recent years, microfrontends have become a popular solution with many companies, from large software organizations to small independent dev teams. Microfrontend hosting can get complicated quickly but it is a crucial aspect of scaling software organizations&#x27; development cycle. Whether companies are using single-spa, module federation, or any other microfrontends tools, the management of CI/CD pipelines, deployments, CDNs, and service discovery is something all companies will have to solve.</p>
+<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/single-spa-mark-magenta.svg" alt="single-spa Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/single-spa-mark-magenta.svg" alt="single-spa Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">single-spa</b></a><a class="navbar__item navbar__link" style="white-space:nowrap;padding:0.25rem 0.5rem 0.2rem 0.25rem;font-size:calc(0.9 * var(--ifm-font-size-base));text-decoration:underline" href="/versions">6.x</a><a class="navbar__item navbar__link" href="/docs/faq/">FAQ</a><a class="navbar__item navbar__link" href="/docs/">Docs</a><a href="https://single-spa-workshop.com" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Courses</a><a class="navbar__item navbar__link" href="/help/">Help</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog/">Blog</a><a href="https://opencollective.com/single-spa" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Donate<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/single-spa/single-spa" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a class="navbar__item navbar__link" href="/languages">简Жहि Languages</a></div><div class="navbar__items navbar__items--right"><a href="https://baseplate.cloud" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Deploy</a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="container margin-vert--lg"><div class="row"><aside class="col col--3"><nav class="sidebar_re4s thin-scrollbar" aria-label="Blog recent posts navigation"><div class="sidebarItemTitle_pO2u margin-bottom--md">Recent posts</div><ul class="sidebarItemList_Yudw clean-list"><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/03/18/top-5-microfrontend-hosting-solutions">Top 5 Microfrontend Hosting Solutions</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/03/12/core-team-meeting-notes">March 2024 Core Team Meeting</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/02/14/core-team-meeting-notes">February 2024 Core Team Meeting</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/01/03/core-team-meeting-notes">January 2024 Core Team Meeting</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/12/12/core-team-meeting-notes">December 2023 Core Team Meeting</a></li></ul></nav></aside><main class="col col--7" itemscope="" itemtype="https://schema.org/Blog"><article class="margin-bottom--xl" itemprop="blogPost" itemscope="" itemtype="https://schema.org/BlogPosting"><meta itemprop="description" content="With rapid growth in recent years, microfrontends have become a popular solution with many companies, from large software organizations to small independent dev teams. Microfrontend hosting can get complicated quickly but it is a crucial aspect of scaling software organizations&#x27; development cycle. Whether companies are using single-spa, module federation, or any other microfrontends tools, the management of CI/CD pipelines, deployments, CDNs, and service discovery is something all companies will have to solve."><header><h2 class="title_f1Hy" itemprop="headline"><a itemprop="url" href="/blog/2024/03/18/top-5-microfrontend-hosting-solutions">Top 5 Microfrontend Hosting Solutions</a></h2><div class="container_mt6G margin-vert--md"><time datetime="2024-03-18T00:00:00.000Z" itemprop="datePublished">March 18, 2024</time> · <!-- -->8 min read</div></header><div class="markdown" itemprop="articleBody"><p>With rapid growth in recent years, microfrontends have become a popular solution with many companies, from large software organizations to small independent dev teams. Microfrontend hosting can get complicated quickly but it is a crucial aspect of scaling software organizations&#x27; development cycle. Whether companies are using single-spa, module federation, or any other microfrontends tools, the management of CI/CD pipelines, deployments, CDNs, and service discovery is something all companies will have to solve.</p>
 <p>So what’s the most effective solution? Because microfrontend hosting is a relatively new space, most companies have a hard time knowing where to start. Fortunately, there are very good options out there, and unless you have a good reason to, you don’t have to build it out yourself. Here you’ll find a list of the best hosting solutions and the important factors you’ll need to consider to make the decision.</p>
 <h2 class="anchor anchorWithStickyNavbar_LWe7" id="server-side-versus-client-side-rendering">Server-side versus client-side rendering<a href="#server-side-versus-client-side-rendering" class="hash-link" aria-label="Direct link to Server-side versus client-side rendering" title="Direct link to Server-side versus client-side rendering">​</a></h2>
 <p>This article focuses on hosting solutions for client-side rendered microfrontends, since the majority of microfrontend implementations rely solely on <a href="https://ferie.medium.com/what-is-the-client-side-rendering-and-how-it-works-c90210e2cd14" target="_blank" rel="noopener noreferrer">client-side rendering</a>.</p>
diff --git a/blog/page/2/index.html b/blog/page/2/index.html
index 897b5a752..a91483fcb 100644
--- a/blog/page/2/index.html
+++ b/blog/page/2/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/contributors/index.html b/contributors/index.html
index d58051724..3411a5b42 100644
--- a/contributors/index.html
+++ b/contributors/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/api/index.html b/docs/4.x/api/index.html
index 3ae0cf068..2965732da 100644
--- a/docs/4.x/api/index.html
+++ b/docs/4.x/api/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/building-applications/index.html b/docs/4.x/building-applications/index.html
index c87a8e486..4cc7cef6e 100644
--- a/docs/4.x/building-applications/index.html
+++ b/docs/4.x/building-applications/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/code-of-conduct/index.html b/docs/4.x/code-of-conduct/index.html
index 9986d97a6..67e6e0cd5 100644
--- a/docs/4.x/code-of-conduct/index.html
+++ b/docs/4.x/code-of-conduct/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/configuration/index.html b/docs/4.x/configuration/index.html
index af90d6e98..bb146fa5b 100644
--- a/docs/4.x/configuration/index.html
+++ b/docs/4.x/configuration/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/contributing-overview/index.html b/docs/4.x/contributing-overview/index.html
index 3dc4c2a99..6b8665ddb 100644
--- a/docs/4.x/contributing-overview/index.html
+++ b/docs/4.x/contributing-overview/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/ecosystem-angular/index.html b/docs/4.x/ecosystem-angular/index.html
index 86e4148ed..c2cb382f1 100644
--- a/docs/4.x/ecosystem-angular/index.html
+++ b/docs/4.x/ecosystem-angular/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/ecosystem-angularjs/index.html b/docs/4.x/ecosystem-angularjs/index.html
index 3a9c9a2c9..94effdd02 100644
--- a/docs/4.x/ecosystem-angularjs/index.html
+++ b/docs/4.x/ecosystem-angularjs/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/ecosystem-backbone/index.html b/docs/4.x/ecosystem-backbone/index.html
index 22886e3fb..32c6ecd43 100644
--- a/docs/4.x/ecosystem-backbone/index.html
+++ b/docs/4.x/ecosystem-backbone/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/ecosystem-cycle/index.html b/docs/4.x/ecosystem-cycle/index.html
index 79c39ca18..a84b0c40d 100644
--- a/docs/4.x/ecosystem-cycle/index.html
+++ b/docs/4.x/ecosystem-cycle/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/ecosystem-ember/index.html b/docs/4.x/ecosystem-ember/index.html
index 2ff346ef3..8c753a69e 100644
--- a/docs/4.x/ecosystem-ember/index.html
+++ b/docs/4.x/ecosystem-ember/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/ecosystem-html-web-components/index.html b/docs/4.x/ecosystem-html-web-components/index.html
index 0f95b2829..1eba2ef86 100644
--- a/docs/4.x/ecosystem-html-web-components/index.html
+++ b/docs/4.x/ecosystem-html-web-components/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/ecosystem-inferno/index.html b/docs/4.x/ecosystem-inferno/index.html
index 6f8c7005c..9543203ac 100644
--- a/docs/4.x/ecosystem-inferno/index.html
+++ b/docs/4.x/ecosystem-inferno/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/ecosystem-leaked-globals/index.html b/docs/4.x/ecosystem-leaked-globals/index.html
index 4e429825d..5f6ed1343 100644
--- a/docs/4.x/ecosystem-leaked-globals/index.html
+++ b/docs/4.x/ecosystem-leaked-globals/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/ecosystem-preact/index.html b/docs/4.x/ecosystem-preact/index.html
index 8393f99c0..dc9663db5 100644
--- a/docs/4.x/ecosystem-preact/index.html
+++ b/docs/4.x/ecosystem-preact/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/ecosystem-react/index.html b/docs/4.x/ecosystem-react/index.html
index e1bb6b273..8de659016 100644
--- a/docs/4.x/ecosystem-react/index.html
+++ b/docs/4.x/ecosystem-react/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/ecosystem-riot/index.html b/docs/4.x/ecosystem-riot/index.html
index 867a91102..498aa0db2 100644
--- a/docs/4.x/ecosystem-riot/index.html
+++ b/docs/4.x/ecosystem-riot/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/ecosystem-svelte/index.html b/docs/4.x/ecosystem-svelte/index.html
index 2e790f625..98d64b1e2 100644
--- a/docs/4.x/ecosystem-svelte/index.html
+++ b/docs/4.x/ecosystem-svelte/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/ecosystem-vue/index.html b/docs/4.x/ecosystem-vue/index.html
index 0334f02fb..54af71f0e 100644
--- a/docs/4.x/ecosystem-vue/index.html
+++ b/docs/4.x/ecosystem-vue/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/ecosystem/index.html b/docs/4.x/ecosystem/index.html
index 35c8e73db..4f3d505d3 100644
--- a/docs/4.x/ecosystem/index.html
+++ b/docs/4.x/ecosystem/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/examples/index.html b/docs/4.x/examples/index.html
index b4f5e42d7..501876c21 100644
--- a/docs/4.x/examples/index.html
+++ b/docs/4.x/examples/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/faq/index.html b/docs/4.x/faq/index.html
index 71314f8a0..9679fef95 100644
--- a/docs/4.x/faq/index.html
+++ b/docs/4.x/faq/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/getting-started-overview/index.html b/docs/4.x/getting-started-overview/index.html
index ef3ff9d0e..4dae36438 100644
--- a/docs/4.x/getting-started-overview/index.html
+++ b/docs/4.x/getting-started-overview/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/glossary/index.html b/docs/4.x/glossary/index.html
index ef9482e91..970569146 100644
--- a/docs/4.x/glossary/index.html
+++ b/docs/4.x/glossary/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/migrating-angularJS-tutorial/index.html b/docs/4.x/migrating-angularJS-tutorial/index.html
index 393edaa25..38211107c 100644
--- a/docs/4.x/migrating-angularJS-tutorial/index.html
+++ b/docs/4.x/migrating-angularJS-tutorial/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/migrating-existing-spas/index.html b/docs/4.x/migrating-existing-spas/index.html
index 758e6758f..9781bed38 100644
--- a/docs/4.x/migrating-existing-spas/index.html
+++ b/docs/4.x/migrating-existing-spas/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/migrating-react-tutorial/index.html b/docs/4.x/migrating-react-tutorial/index.html
index c139d24eb..7d166294d 100644
--- a/docs/4.x/migrating-react-tutorial/index.html
+++ b/docs/4.x/migrating-react-tutorial/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/parcels-api/index.html b/docs/4.x/parcels-api/index.html
index c47988140..d7dfb489e 100644
--- a/docs/4.x/parcels-api/index.html
+++ b/docs/4.x/parcels-api/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/parcels-overview/index.html b/docs/4.x/parcels-overview/index.html
index fd0cdfd67..d83525ccc 100644
--- a/docs/4.x/parcels-overview/index.html
+++ b/docs/4.x/parcels-overview/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/separating-applications/index.html b/docs/4.x/separating-applications/index.html
index fdbc5385c..537b4d5e9 100644
--- a/docs/4.x/separating-applications/index.html
+++ b/docs/4.x/separating-applications/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/4.x/starting-from-scratch/index.html b/docs/4.x/starting-from-scratch/index.html
index 752cbbc91..f61c3849f 100644
--- a/docs/4.x/starting-from-scratch/index.html
+++ b/docs/4.x/starting-from-scratch/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/api/index.html b/docs/5.x/api/index.html
index f1c7e5257..f77b091ae 100644
--- a/docs/5.x/api/index.html
+++ b/docs/5.x/api/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/building-applications/index.html b/docs/5.x/building-applications/index.html
index 81c85948f..eafe33cb2 100644
--- a/docs/5.x/building-applications/index.html
+++ b/docs/5.x/building-applications/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/code-of-conduct/index.html b/docs/5.x/code-of-conduct/index.html
index f881abb7a..c015ea219 100644
--- a/docs/5.x/code-of-conduct/index.html
+++ b/docs/5.x/code-of-conduct/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/configuration/index.html b/docs/5.x/configuration/index.html
index 9e0406d1a..2490f6040 100644
--- a/docs/5.x/configuration/index.html
+++ b/docs/5.x/configuration/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/contributing-overview/index.html b/docs/5.x/contributing-overview/index.html
index ed19e4dee..ee7467c8f 100644
--- a/docs/5.x/contributing-overview/index.html
+++ b/docs/5.x/contributing-overview/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/create-single-spa/index.html b/docs/5.x/create-single-spa/index.html
index 4e1204fa1..7a2cf6e1b 100644
--- a/docs/5.x/create-single-spa/index.html
+++ b/docs/5.x/create-single-spa/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/devtools/index.html b/docs/5.x/devtools/index.html
index bd932e7b6..76d8aeab8 100644
--- a/docs/5.x/devtools/index.html
+++ b/docs/5.x/devtools/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/ecosystem-alpinejs/index.html b/docs/5.x/ecosystem-alpinejs/index.html
index 7fd7f8fc0..601a8cfdb 100644
--- a/docs/5.x/ecosystem-alpinejs/index.html
+++ b/docs/5.x/ecosystem-alpinejs/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/ecosystem-angular/index.html b/docs/5.x/ecosystem-angular/index.html
index f1186c7b0..c1c9571f0 100644
--- a/docs/5.x/ecosystem-angular/index.html
+++ b/docs/5.x/ecosystem-angular/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/ecosystem-angularjs/index.html b/docs/5.x/ecosystem-angularjs/index.html
index 28813a2bd..177688544 100644
--- a/docs/5.x/ecosystem-angularjs/index.html
+++ b/docs/5.x/ecosystem-angularjs/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/ecosystem-backbone/index.html b/docs/5.x/ecosystem-backbone/index.html
index cd0458996..e4a93d22f 100644
--- a/docs/5.x/ecosystem-backbone/index.html
+++ b/docs/5.x/ecosystem-backbone/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/ecosystem-css/index.html b/docs/5.x/ecosystem-css/index.html
index 01c19b315..aedd8bc13 100644
--- a/docs/5.x/ecosystem-css/index.html
+++ b/docs/5.x/ecosystem-css/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/ecosystem-cycle/index.html b/docs/5.x/ecosystem-cycle/index.html
index 0f0668a8a..eaa6f8bf1 100644
--- a/docs/5.x/ecosystem-cycle/index.html
+++ b/docs/5.x/ecosystem-cycle/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/ecosystem-dojo/index.html b/docs/5.x/ecosystem-dojo/index.html
index 83ed68799..c7a2c91bb 100644
--- a/docs/5.x/ecosystem-dojo/index.html
+++ b/docs/5.x/ecosystem-dojo/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/ecosystem-ember/index.html b/docs/5.x/ecosystem-ember/index.html
index a7d649662..11705e021 100644
--- a/docs/5.x/ecosystem-ember/index.html
+++ b/docs/5.x/ecosystem-ember/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/ecosystem-html-web-components/index.html b/docs/5.x/ecosystem-html-web-components/index.html
index 93d2849b4..79d1ac976 100644
--- a/docs/5.x/ecosystem-html-web-components/index.html
+++ b/docs/5.x/ecosystem-html-web-components/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/ecosystem-inferno/index.html b/docs/5.x/ecosystem-inferno/index.html
index 11be997e7..b447d0291 100644
--- a/docs/5.x/ecosystem-inferno/index.html
+++ b/docs/5.x/ecosystem-inferno/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/ecosystem-leaked-globals/index.html b/docs/5.x/ecosystem-leaked-globals/index.html
index 0d75ee965..c5c8150e8 100644
--- a/docs/5.x/ecosystem-leaked-globals/index.html
+++ b/docs/5.x/ecosystem-leaked-globals/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/ecosystem-preact/index.html b/docs/5.x/ecosystem-preact/index.html
index 8d2ecaa01..d68119f7f 100644
--- a/docs/5.x/ecosystem-preact/index.html
+++ b/docs/5.x/ecosystem-preact/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/ecosystem-react/index.html b/docs/5.x/ecosystem-react/index.html
index da3836956..3c2638bfe 100644
--- a/docs/5.x/ecosystem-react/index.html
+++ b/docs/5.x/ecosystem-react/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/ecosystem-riot/index.html b/docs/5.x/ecosystem-riot/index.html
index e63fa0ce6..cc883f75c 100644
--- a/docs/5.x/ecosystem-riot/index.html
+++ b/docs/5.x/ecosystem-riot/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/ecosystem-snowpack/index.html b/docs/5.x/ecosystem-snowpack/index.html
index c90148295..5d46011d6 100644
--- a/docs/5.x/ecosystem-snowpack/index.html
+++ b/docs/5.x/ecosystem-snowpack/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/ecosystem-svelte/index.html b/docs/5.x/ecosystem-svelte/index.html
index 19cc8118f..a5330a888 100644
--- a/docs/5.x/ecosystem-svelte/index.html
+++ b/docs/5.x/ecosystem-svelte/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/ecosystem-vite/index.html b/docs/5.x/ecosystem-vite/index.html
index fc4dfcaaf..b587599ad 100644
--- a/docs/5.x/ecosystem-vite/index.html
+++ b/docs/5.x/ecosystem-vite/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/ecosystem-vue/index.html b/docs/5.x/ecosystem-vue/index.html
index 157e5a5e3..d27965ba1 100644
--- a/docs/5.x/ecosystem-vue/index.html
+++ b/docs/5.x/ecosystem-vue/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/ecosystem/index.html b/docs/5.x/ecosystem/index.html
index 85d6a5030..cc1d19ae8 100644
--- a/docs/5.x/ecosystem/index.html
+++ b/docs/5.x/ecosystem/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/examples/index.html b/docs/5.x/examples/index.html
index 89098b84f..93d6a8166 100644
--- a/docs/5.x/examples/index.html
+++ b/docs/5.x/examples/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/faq/index.html b/docs/5.x/faq/index.html
index 7f868871e..e40fc3f80 100644
--- a/docs/5.x/faq/index.html
+++ b/docs/5.x/faq/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/getting-started-overview/index.html b/docs/5.x/getting-started-overview/index.html
index 04396d745..a8c89298e 100644
--- a/docs/5.x/getting-started-overview/index.html
+++ b/docs/5.x/getting-started-overview/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/glossary/index.html b/docs/5.x/glossary/index.html
index ce6b6f6f5..bd6872c48 100644
--- a/docs/5.x/glossary/index.html
+++ b/docs/5.x/glossary/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/layout-api/index.html b/docs/5.x/layout-api/index.html
index 7b335e3a1..128bd9ab2 100644
--- a/docs/5.x/layout-api/index.html
+++ b/docs/5.x/layout-api/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/layout-definition/index.html b/docs/5.x/layout-definition/index.html
index f04f9ea00..8b5b41e68 100644
--- a/docs/5.x/layout-definition/index.html
+++ b/docs/5.x/layout-definition/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/layout-overview/index.html b/docs/5.x/layout-overview/index.html
index a039a7cab..a064b313f 100644
--- a/docs/5.x/layout-overview/index.html
+++ b/docs/5.x/layout-overview/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/microfrontends-concept/index.html b/docs/5.x/microfrontends-concept/index.html
index 1cd363174..bfc4d19e8 100644
--- a/docs/5.x/microfrontends-concept/index.html
+++ b/docs/5.x/microfrontends-concept/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/migrating-existing-spas/index.html b/docs/5.x/migrating-existing-spas/index.html
index 53cf028b4..361c0111c 100644
--- a/docs/5.x/migrating-existing-spas/index.html
+++ b/docs/5.x/migrating-existing-spas/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/module-types/index.html b/docs/5.x/module-types/index.html
index 782ff447c..a4d54401e 100644
--- a/docs/5.x/module-types/index.html
+++ b/docs/5.x/module-types/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/parcels-api/index.html b/docs/5.x/parcels-api/index.html
index e0d4eb620..61471b208 100644
--- a/docs/5.x/parcels-api/index.html
+++ b/docs/5.x/parcels-api/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/parcels-overview/index.html b/docs/5.x/parcels-overview/index.html
index cff974f75..069d37277 100644
--- a/docs/5.x/parcels-overview/index.html
+++ b/docs/5.x/parcels-overview/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/recommended-setup/index.html b/docs/5.x/recommended-setup/index.html
index 11725ef36..463e69449 100644
--- a/docs/5.x/recommended-setup/index.html
+++ b/docs/5.x/recommended-setup/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/separating-applications/index.html b/docs/5.x/separating-applications/index.html
index c32046d71..a77a41282 100644
--- a/docs/5.x/separating-applications/index.html
+++ b/docs/5.x/separating-applications/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/shared-webpack-configs/index.html b/docs/5.x/shared-webpack-configs/index.html
index 22fc03226..d48446cb7 100644
--- a/docs/5.x/shared-webpack-configs/index.html
+++ b/docs/5.x/shared-webpack-configs/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/single-spa-playground/index.html b/docs/5.x/single-spa-playground/index.html
index 741fc0c82..ac9974320 100644
--- a/docs/5.x/single-spa-playground/index.html
+++ b/docs/5.x/single-spa-playground/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/ssr-overview/index.html b/docs/5.x/ssr-overview/index.html
index f093a6275..6b9e835e7 100644
--- a/docs/5.x/ssr-overview/index.html
+++ b/docs/5.x/ssr-overview/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/testing/e2e/index.html b/docs/5.x/testing/e2e/index.html
index cb94646e2..1f0180d5d 100644
--- a/docs/5.x/testing/e2e/index.html
+++ b/docs/5.x/testing/e2e/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/testing/units/index.html b/docs/5.x/testing/units/index.html
index 25cb22da2..2a33c3f60 100644
--- a/docs/5.x/testing/units/index.html
+++ b/docs/5.x/testing/units/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/5.x/videos/index.html b/docs/5.x/videos/index.html
index 963cc0e15..25964c7c7 100644
--- a/docs/5.x/videos/index.html
+++ b/docs/5.x/videos/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/api/index.html b/docs/api/index.html
index a42970348..785440a89 100644
--- a/docs/api/index.html
+++ b/docs/api/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/building-applications/index.html b/docs/building-applications/index.html
index cbbd3d992..bc0de8552 100644
--- a/docs/building-applications/index.html
+++ b/docs/building-applications/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/code-of-conduct/index.html b/docs/code-of-conduct/index.html
index d37cb341f..040eff0aa 100644
--- a/docs/code-of-conduct/index.html
+++ b/docs/code-of-conduct/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/configuration/index.html b/docs/configuration/index.html
index 5d7dde533..afe7de236 100644
--- a/docs/configuration/index.html
+++ b/docs/configuration/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/contributing-overview/index.html b/docs/contributing-overview/index.html
index 6c45c8d70..4847ae388 100644
--- a/docs/contributing-overview/index.html
+++ b/docs/contributing-overview/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/create-single-spa/index.html b/docs/create-single-spa/index.html
index 76be0ae4c..8591f805b 100644
--- a/docs/create-single-spa/index.html
+++ b/docs/create-single-spa/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/devtools/index.html b/docs/devtools/index.html
index 520fedda1..bb9f81851 100644
--- a/docs/devtools/index.html
+++ b/docs/devtools/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/ecosystem-alpinejs/index.html b/docs/ecosystem-alpinejs/index.html
index 69bdbef44..9b9491990 100644
--- a/docs/ecosystem-alpinejs/index.html
+++ b/docs/ecosystem-alpinejs/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/ecosystem-angular/index.html b/docs/ecosystem-angular/index.html
index 17bb577f8..d3c3e0dbb 100644
--- a/docs/ecosystem-angular/index.html
+++ b/docs/ecosystem-angular/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/ecosystem-angularjs/index.html b/docs/ecosystem-angularjs/index.html
index 686740fb2..7e227cd5e 100644
--- a/docs/ecosystem-angularjs/index.html
+++ b/docs/ecosystem-angularjs/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/ecosystem-backbone/index.html b/docs/ecosystem-backbone/index.html
index 311734feb..8b6f04854 100644
--- a/docs/ecosystem-backbone/index.html
+++ b/docs/ecosystem-backbone/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/ecosystem-css/index.html b/docs/ecosystem-css/index.html
index 966f7eb47..81c3f657c 100644
--- a/docs/ecosystem-css/index.html
+++ b/docs/ecosystem-css/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/ecosystem-cycle/index.html b/docs/ecosystem-cycle/index.html
index dc53e7a22..40121c3e4 100644
--- a/docs/ecosystem-cycle/index.html
+++ b/docs/ecosystem-cycle/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/ecosystem-dojo/index.html b/docs/ecosystem-dojo/index.html
index d67e61ed0..15f0f3c56 100644
--- a/docs/ecosystem-dojo/index.html
+++ b/docs/ecosystem-dojo/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/ecosystem-ember/index.html b/docs/ecosystem-ember/index.html
index 01869a9b7..dc68a2f39 100644
--- a/docs/ecosystem-ember/index.html
+++ b/docs/ecosystem-ember/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/ecosystem-html-web-components/index.html b/docs/ecosystem-html-web-components/index.html
index bbe3679d4..4455e0da0 100644
--- a/docs/ecosystem-html-web-components/index.html
+++ b/docs/ecosystem-html-web-components/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/ecosystem-inferno/index.html b/docs/ecosystem-inferno/index.html
index 2959a2e4b..bb605379a 100644
--- a/docs/ecosystem-inferno/index.html
+++ b/docs/ecosystem-inferno/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/ecosystem-leaked-globals/index.html b/docs/ecosystem-leaked-globals/index.html
index 35e1e1b45..0f79a5904 100644
--- a/docs/ecosystem-leaked-globals/index.html
+++ b/docs/ecosystem-leaked-globals/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/ecosystem-preact/index.html b/docs/ecosystem-preact/index.html
index 15e65fa04..62da6146d 100644
--- a/docs/ecosystem-preact/index.html
+++ b/docs/ecosystem-preact/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/ecosystem-react/index.html b/docs/ecosystem-react/index.html
index 612358623..7668898d5 100644
--- a/docs/ecosystem-react/index.html
+++ b/docs/ecosystem-react/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/ecosystem-riot/index.html b/docs/ecosystem-riot/index.html
index 1dcb087a6..b292fe0a7 100644
--- a/docs/ecosystem-riot/index.html
+++ b/docs/ecosystem-riot/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/ecosystem-snowpack/index.html b/docs/ecosystem-snowpack/index.html
index 42f8fc23b..d34773231 100644
--- a/docs/ecosystem-snowpack/index.html
+++ b/docs/ecosystem-snowpack/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/ecosystem-svelte/index.html b/docs/ecosystem-svelte/index.html
index 8d2bc34d0..1634e2772 100644
--- a/docs/ecosystem-svelte/index.html
+++ b/docs/ecosystem-svelte/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/ecosystem-vite/index.html b/docs/ecosystem-vite/index.html
index 1ceb0c1ee..abef5f967 100644
--- a/docs/ecosystem-vite/index.html
+++ b/docs/ecosystem-vite/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/ecosystem-vue/index.html b/docs/ecosystem-vue/index.html
index dc713d893..002fb5802 100644
--- a/docs/ecosystem-vue/index.html
+++ b/docs/ecosystem-vue/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/ecosystem/index.html b/docs/ecosystem/index.html
index 772181772..b06fa1cc6 100644
--- a/docs/ecosystem/index.html
+++ b/docs/ecosystem/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/examples/index.html b/docs/examples/index.html
index e2e128d82..3fb2303c2 100644
--- a/docs/examples/index.html
+++ b/docs/examples/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/faq/index.html b/docs/faq/index.html
index b94d9c2e2..43c456dc1 100644
--- a/docs/faq/index.html
+++ b/docs/faq/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/getting-started-overview/index.html b/docs/getting-started-overview/index.html
index 1bc91d029..d60915bc7 100644
--- a/docs/getting-started-overview/index.html
+++ b/docs/getting-started-overview/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/glossary/index.html b/docs/glossary/index.html
index 94036b157..c5aae8767 100644
--- a/docs/glossary/index.html
+++ b/docs/glossary/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/index.html b/docs/index.html
index 5c3fc15f2..8f02c57dc 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/layout-api/index.html b/docs/layout-api/index.html
index 5952e0976..bf985cae0 100644
--- a/docs/layout-api/index.html
+++ b/docs/layout-api/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/layout-definition/index.html b/docs/layout-definition/index.html
index 729182a9e..bf8a59a54 100644
--- a/docs/layout-definition/index.html
+++ b/docs/layout-definition/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/layout-overview/index.html b/docs/layout-overview/index.html
index 351beac01..c21366fc3 100644
--- a/docs/layout-overview/index.html
+++ b/docs/layout-overview/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/microfrontends-concept/index.html b/docs/microfrontends-concept/index.html
index a877c9d53..450baadb8 100644
--- a/docs/microfrontends-concept/index.html
+++ b/docs/microfrontends-concept/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/migrating-existing-spas/index.html b/docs/migrating-existing-spas/index.html
index f8adc6c16..5ae2a1240 100644
--- a/docs/migrating-existing-spas/index.html
+++ b/docs/migrating-existing-spas/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/module-types/index.html b/docs/module-types/index.html
index 8eb3c0da6..cc1d6dccf 100644
--- a/docs/module-types/index.html
+++ b/docs/module-types/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/next/index.html b/docs/next/index.html
index bc21fda9f..b3b0b7017 100644
--- a/docs/next/index.html
+++ b/docs/next/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/parcels-api/index.html b/docs/parcels-api/index.html
index d63ef1131..94dbd7308 100644
--- a/docs/parcels-api/index.html
+++ b/docs/parcels-api/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/parcels-overview/index.html b/docs/parcels-overview/index.html
index 730ba6681..4d1e1f88b 100644
--- a/docs/parcels-overview/index.html
+++ b/docs/parcels-overview/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/recommended-setup/index.html b/docs/recommended-setup/index.html
index 3aead1489..c2cd21d7e 100644
--- a/docs/recommended-setup/index.html
+++ b/docs/recommended-setup/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/separating-applications/index.html b/docs/separating-applications/index.html
index f44f4e99b..7cd0ab40c 100644
--- a/docs/separating-applications/index.html
+++ b/docs/separating-applications/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/shared-webpack-configs/index.html b/docs/shared-webpack-configs/index.html
index 2fca719e4..5cf57bee2 100644
--- a/docs/shared-webpack-configs/index.html
+++ b/docs/shared-webpack-configs/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/single-spa-playground/index.html b/docs/single-spa-playground/index.html
index 0afb1a259..5e89119b9 100644
--- a/docs/single-spa-playground/index.html
+++ b/docs/single-spa-playground/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/ssr-overview/index.html b/docs/ssr-overview/index.html
index 655fecc19..d9960b84f 100644
--- a/docs/ssr-overview/index.html
+++ b/docs/ssr-overview/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/testing/e2e/index.html b/docs/testing/e2e/index.html
index bbd45849e..90a5f1e85 100644
--- a/docs/testing/e2e/index.html
+++ b/docs/testing/e2e/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/testing/units/index.html b/docs/testing/units/index.html
index a5b74fd71..1fe2ff0de 100644
--- a/docs/testing/units/index.html
+++ b/docs/testing/units/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/docs/videos/index.html b/docs/videos/index.html
index 015f646d8..37bbd6b51 100644
--- a/docs/videos/index.html
+++ b/docs/videos/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/error/index.html b/error/index.html
index a69d5939d..249277705 100644
--- a/error/index.html
+++ b/error/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/help/index.html b/help/index.html
index 3769bb50b..fa00e69ea 100644
--- a/help/index.html
+++ b/help/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/index.html b/index.html
index ca28b91d2..0f8b7e3b3 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/languages/index.html b/languages/index.html
index 847d86984..536a2d7a5 100644
--- a/languages/index.html
+++ b/languages/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/privacy/single-spa-inspector-privacy-policy/index.html b/privacy/single-spa-inspector-privacy-policy/index.html
index bb47cfff0..afd09510c 100644
--- a/privacy/single-spa-inspector-privacy-policy/index.html
+++ b/privacy/single-spa-inspector-privacy-policy/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/search/index.html b/search/index.html
index 409eac963..068340c83 100644
--- a/search/index.html
+++ b/search/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/sponsors/index.html b/sponsors/index.html
index fa3360b41..878904629 100644
--- a/sponsors/index.html
+++ b/sponsors/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/users/index.html b/users/index.html
index 78a971fe0..8afd2fc83 100644
--- a/users/index.html
+++ b/users/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
diff --git a/versions/index.html b/versions/index.html
index f56bf5906..a34c4c8c6 100644
--- a/versions/index.html
+++ b/versions/index.html
@@ -14,7 +14,7 @@
 <link rel="search" type="application/opensearchdescription+xml" title="single-spa" href="/opensearch.xml">
 <script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
 <script src="/js/index.js"></script><link rel="stylesheet" href="/assets/css/styles.f37aaac0.css">
-<script src="/assets/js/runtime~main.a89dcf8a.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a280dc7d.js" defer="defer"></script>
 <script src="/assets/js/main.6d65efb8.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">