diff --git a/404.html b/404.html index b360b88af..2478d7557 100644 --- a/404.html +++ b/404.html @@ -14,8 +14,8 @@ - - + +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

diff --git a/assets/js/814f3328.abea1b02.js b/assets/js/814f3328.abea1b02.js deleted file mode 100644 index dda8fab83..000000000 --- a/assets/js/814f3328.abea1b02.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[7472],{5513:e=>{e.exports=JSON.parse('{"title":"Recent posts","items":[{"title":"March 2024 Core Team Meeting","permalink":"/blog/2024/03/12/core-team-meeting-notes","unlisted":false},{"title":"February 2024 Core Team Meeting","permalink":"/blog/2024/02/14/core-team-meeting-notes","unlisted":false},{"title":"January 2024 Core Team Meeting","permalink":"/blog/2024/01/03/core-team-meeting-notes","unlisted":false},{"title":"December 2023 Core Team Meeting","permalink":"/blog/2023/12/12/core-team-meeting-notes","unlisted":false},{"title":"single-spa 6","permalink":"/blog/2023/11/27/single-spa-6","unlisted":false}]}')}}]); \ No newline at end of file diff --git a/assets/js/814f3328.fc364f18.js b/assets/js/814f3328.fc364f18.js new file mode 100644 index 000000000..20b852540 --- /dev/null +++ b/assets/js/814f3328.fc364f18.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[7472],{5513:e=>{e.exports=JSON.parse('{"title":"Recent posts","items":[{"title":"Top 5 Microfrontend Hosting Solutions","permalink":"/blog/2024/03/18/top-5-microfrontend-hosting-solutions","unlisted":false},{"title":"March 2024 Core Team Meeting","permalink":"/blog/2024/03/12/core-team-meeting-notes","unlisted":false},{"title":"February 2024 Core Team Meeting","permalink":"/blog/2024/02/14/core-team-meeting-notes","unlisted":false},{"title":"January 2024 Core Team Meeting","permalink":"/blog/2024/01/03/core-team-meeting-notes","unlisted":false},{"title":"December 2023 Core Team Meeting","permalink":"/blog/2023/12/12/core-team-meeting-notes","unlisted":false}]}')}}]); \ No newline at end of file diff --git a/assets/js/8ad4811d.cf78ded4.js b/assets/js/8ad4811d.cf78ded4.js new file mode 100644 index 000000000..c8d768a52 --- /dev/null +++ b/assets/js/8ad4811d.cf78ded4.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 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:""}),", and ",(0,t.jsx)(n.code,{children:" - - + + -
Skip to main content

A Case for SOA in the Browser

· 6 min read
Bret Little

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.

+

A Case for SOA in the Browser

· 6 min read
Bret Little

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.

The 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?

What is Service-oriented Architecture?​

The 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.

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 35e75213a..c82846b0a 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,12 +14,12 @@ - - + + -

A step-by-step guide to single-spa

· 10 min read
Joel Denning

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.

-

But using single-spa for the first time can be tricky because you’ll come across terms like “application lifecycles”, “root application”, “loading function”, “child application”, and “activity function.”

+

A step-by-step guide to single-spa

· 10 min read
Joel Denning

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.

+

But using single-spa for the first time can be tricky because you’ll come across terms like “application lifecycles”, “root application”, “loading function”, “child application”, and “activity function.”

This blog post will take you through setting things up and what choices you have when using single-spa. It’s based on what I’ve seen at Canopy Tax where we went from an Angular 1 monolith to an Angular 1, React, and Svelte polyglot.

If you’d like to jump straight to a fully working, self contained code example, check out this webpack single-spa starter project.

Step One: choose a module loader.​

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 360bfc14d..e2c98ab2b 100644 --- a/blog/2018/06/19/single-spa-parcels-explained/index.html +++ b/blog/2018/06/19/single-spa-parcels-explained/index.html @@ -14,11 +14,11 @@ - - + + -

single-spa parcels, explained

· 4 min read
Joel Denning

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.

+

single-spa parcels, explained

· 4 min read
Joel Denning

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.

And with the release of version 4, I’m pleased to announce that 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.

Another way to do framework agnostic components?​

For those familiar with web components and custom elements, you may be wondering why a JavaScript library would try to do what browsers are starting natively to do.

diff --git a/blog/2019/02/20/single-spa-inspector/index.html b/blog/2019/02/20/single-spa-inspector/index.html index e1a35626c..b1efe5261 100644 --- a/blog/2019/02/20/single-spa-inspector/index.html +++ b/blog/2019/02/20/single-spa-inspector/index.html @@ -14,11 +14,11 @@ - - + + -

single-spa Inspector and 4.1

· 2 min read
Anthony Frehner

Background​

+

single-spa Inspector and 4.1

· 2 min read
Anthony Frehner

Background​

For a long time, Canopy has had the benefit of using a tool called 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.

With that in mind, I'm proud to announce an initial release for 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.

Current Inspector Features​

diff --git a/blog/2020/02/24/single-spa-5/index.html b/blog/2020/02/24/single-spa-5/index.html index b8aa8e7f0..50e581246 100644 --- a/blog/2020/02/24/single-spa-5/index.html +++ b/blog/2020/02/24/single-spa-5/index.html @@ -14,11 +14,11 @@ - - + + -

single-spa 5

· 5 min read
Joel Denning

Today we released single-spa@5.0.0.

+

single-spa 5

· 5 min read
Joel Denning

Today we released single-spa@5.0.0.

Here are the highlights:

  • Performance focus: 35% decrease in library size.
    • 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 837343df4..1ce09df1c 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,11 +14,11 @@ - - + + -

    The single-spa core team is expanding

    · 2 min read

    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.

    +

    The single-spa core team is expanding

    · 2 min read

    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.

    Our 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.

    Single-spa owes its success to the people and companies who support it. If you want to contribute but aren’t 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’re 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.

    The 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’s important to state that Convex will not poach developers away from companies who allow their developers to help us maintain single-spa—our priority is nurturing the growth and development of the single-spa ecosystem.

    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 d4da3932c..4168425ca 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,11 +14,11 @@ - - + + -

    Introducing Single-Spa's New Core Team Members

    · 2 min read

    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.

    +

    Introducing Single-Spa's New Core Team Members

    · 2 min read

    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.

    Meet the Team​

    Artur Androsovych

    Artur 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.

    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 ff4a494a0..d18274241 100644 --- a/blog/2023/11/07/core-team-meeting-notes/index.html +++ b/blog/2023/11/07/core-team-meeting-notes/index.html @@ -14,11 +14,11 @@ - - + + -

    November 2023 Core Team Meeting

    · One min read

    Attendees: Joel Denning, Milan Kovacic, Jake Hayes

    +

    November 2023 Core Team Meeting

    · One min read

    Attendees: Joel Denning, Milan Kovacic, Jake Hayes

    November 2023 Roadmap​

    1. Release single-spa@6 as latest
      2. diff --git a/blog/2023/11/27/single-spa-6/index.html b/blog/2023/11/27/single-spa-6/index.html index 60593ce1f..4f92f7636 100644 --- a/blog/2023/11/27/single-spa-6/index.html +++ b/blog/2023/11/27/single-spa-6/index.html @@ -14,11 +14,11 @@ - - + + -

      single-spa 6

      · 10 min read
      Joel Denning

      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!

      +

      single-spa 6

      · 10 min read
      Joel Denning

      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!

      Note from single-spa's creator​

      On September 22, 2015, I pushed single-spa's initial commit. 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). The future of microfrontends still includes single-spa.

      On December 11, 2023, the company I founded is launching a product called 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 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 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.

      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 ba72c8d7b..4d3f4d00c 100644 --- a/blog/2023/12/12/core-team-meeting-notes/index.html +++ b/blog/2023/12/12/core-team-meeting-notes/index.html @@ -14,11 +14,11 @@ - - + + -

      December 2023 Core Team Meeting

      · One min read

      Attendees: Artur Androsovych, Ian Bacher, Jake Hayes, Milan Kovacic

      +

      December 2023 Core Team Meeting

      · One min read

      Attendees: Artur Androsovych, Ian Bacher, Jake Hayes, Milan Kovacic

      Achievements and Progress from November​

      • Successfully released single-spa version 6, marking a significant milestone in the project's development
        • 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 bb5035730..fa2f24b72 100644 --- a/blog/2024/01/03/core-team-meeting-notes/index.html +++ b/blog/2024/01/03/core-team-meeting-notes/index.html @@ -14,11 +14,11 @@ - - + + -

        January 2024 Core Team Meeting

        · One min read

        Attendees: Joel Denning Jake Hayes, Milan Kovacic

        +

        January 2024 Core Team Meeting

        · One min read

        Attendees: Joel Denning Jake Hayes, Milan Kovacic

        Achievements and Progress from December​

        \ No newline at end of file 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 8a92bebcc..fb59b751f 100644 --- a/blog/2024/03/12/core-team-meeting-notes/index.html +++ b/blog/2024/03/12/core-team-meeting-notes/index.html @@ -14,11 +14,11 @@ - - + + -

        March 2024 Core Team Meeting

        · 2 min read

        Attendees: Joel Denning, Milan Kovacic

        +

        March 2024 Core Team Meeting

        · 2 min read

        Attendees: Joel Denning, Milan Kovacic

        Date: 2024-03-13

        Meeting Agenda​

          @@ -37,6 +37,6 @@

          single-spa CL

          See single-spa issue 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.

          Shared dependencies management​

          Baseplate Cloud plans to use JSPM CDN 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.

          -

          We didn't decide on anything concrete - just brainstormed solutions. Ideally the open source ecosystem can self-host shared dependencies as well.

        +

        We didn't decide on anything concrete - just brainstormed solutions. Ideally the open source ecosystem can self-host shared dependencies as well.

        \ No newline at end of file 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 new file mode 100644 index 000000000..cf5cc4e5e --- /dev/null +++ b/blog/2024/03/18/top-5-microfrontend-hosting-solutions/index.html @@ -0,0 +1,72 @@ + + + + + +Top 5 Microfrontend Hosting Solutions | single-spa + + + + + + + + + + + + + + +

        Top 5 Microfrontend Hosting Solutions

        · 8 min read
        Joel Denning

        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.

        +

        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.

        +

        Server-side versus client-side rendering​

        +

        This article focuses on hosting solutions for client-side rendered microfrontends, since the majority of microfrontend implementations rely solely on client-side rendering.

        +

        Server-side rendering of microfrontends often involves one or more docker containers that run NodeJS to render React, Angular, or Vue applications. For optimal performance, single-spa server rendering also supports a single NodeJS runtime (rather than network requests between docker containers).

        +

        If your organization uses server-side rendering, the following rankings will still apply but may require some additional consideration that isn’t covered here.

        +

        Low-level vs high-level hosting solutions​

        +

        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.

        +

        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.

        +

        Solution comparison​

        +
        Baseplate CloudZephyr CloudS3 + CloudfrontGCP Storage + Cloud CDNAzure Storage + CDN
        Global availability✓ (via Cloudflare)✓ (Cloudflare / Netlify)✓✓✓
        Web app hosting 1✓✓✓✓✓
        Environments support 2✓✓(manual)(manual)(manual)
        Autogenerated CI pipelines 3✓(planned)✗✗✗
        Automated microfrontend creation✓ (via API and CLI)✓(manual)(manual)(manual)
        Custom domains✓ (via DNS records)✓✓✓✓
        Route / layout management 4✓ (single-spa-layout template)(manual)(manual)(manual)(manual)
        Self-owned assets storage 5✓ (optional bring-your-own-s3-bucket)✓✓✓✓
        Edge-side HTML rendering optimizations 6✓(planned)✗✗✗
        Service discovery 7✓✓(manual)(manual)(manual)
        CORS / CSP / Cache Control✓ (sensible defaults, fully customizable)(planned)✓✓✓
        Usage metrics✓(planned)(manual)(manual)(manual)
        Full audit trail 8✓✓(manual)(manual)(manual)
        Permissions management✓ (comprehensive, including microfrontend ownership)✓✓✓✓
        Shared dependency management 9(planned)✓(manual)(manual)(manual)
        Server rendering support(planned)(planned)✗✗✗
        Microfrontend marketplace 10(planned)(planned)✗✗✗
        Rolling deployments 11(planned)(planned)✗✗✗
        +
          +
        1. Web apps hosting refers to hosting the parent/root HTML file that initializes the microfrontends necessary for client-side rendering.
          2. +
        2. 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.
          3. +
        3. Auto-generated CI pipelines refers to generating configuration files for Github workflow, Azure Pipelines, Gitlab CI and other CI/CD tools.
          4. +
        4. Route / layout management refers to managing the in-browser URL routes and DOM layout for microfrontends.
          5. +
        5. 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.
          6. +
        6. Edge-side HTML rendering optimizations refers to dynamically changing the HTML file for a web app via code that runs in 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, <link rel=preload>, and <script> elements so that the browser begins downloading the necessary resources for the current URL as quickly as possible.
          7. +
        7. Service discovery refers to all available microfrontends easily cross-communicating with each other. This is often done via import maps or other manifest files.
          8. +
        8. Full audit trail refers to logs for all deployments, infrastructure changes, and configuration changes within the microfrontends system.
          9. +
        9. 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.
          10. +
        10. Microfrontend marketplace refers to purchasing or installing pre-made microfrontends into a company's system.
          11. +
        11. 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.
          12. +
        +

        1. Baseplate Cloud​

        +

        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’s 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.

        +

        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.

        +

        Baseplate supports the following features:

        +
          +
        • Web apps hosting
          • +
        • Custom domains for web apps and static assets
          • +
        • Unlimited deployable environments
          • +
        • Unlimited microfrontends
          • +
        • Autogenerated CI/CD pipelines
          • +
        • Full audit trail
          • +
        • Microfrontend-specific usage metrics
          • +
        • CORS, CSP, and Cache-Control configuration
          • +
        • Edge-side performance optimizations
          • +
        +

        Also of note, Baseplate CDN is a source-available Cloudflare worker designed for maximum performance and best practices. It is globally available at all Cloudflare edge locations.

        +

        2. Zephyr Cloud​

        +

        From the creators of Module Federation, 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.

        +

        3. AWS S3 + Cloudfront​

        +

        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 Cloudflare distribution that acts as a public CDN, with a private S3 bucket as the origin containing all static web files (Javascript, CSS, HTML) needed.

        +

        The advantage of using lower-level cloud hosting services is their initial lower costs—however, that comes at the expense of increased setup and maintenance complexity compared to microfrontend-specific cloud hosting solutions.

        +

        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.

        +

        4. GCP Storage + Cloud CDN​

        +

        Google 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 and GCP Cloud CDN.

        +

        5. Azure Storage + CDN​

        +

        Azure Storage provides equivalent low-level cloud services to AWS. The same technical details that apply to AWS S3 + Cloudfront also apply to Azure Storage and GCP Cloud CDN.

        + + \ No newline at end of file diff --git a/blog/archive/index.html b/blog/archive/index.html index 1f5355f9e..e2ed53c72 100644 --- a/blog/archive/index.html +++ b/blog/archive/index.html @@ -14,10 +14,10 @@ - - + + -

        Archive

        Archive

        2024​

        2023​

        2020​

        2019​

        2018​

        2016​

        +

        Archive

        Archive

        2024​

        2023​

        2020​

        2019​

        2018​

        2016​

        \ No newline at end of file diff --git a/blog/atom.xml b/blog/atom.xml index dbd1b3fb6..fcd5b755e 100644 --- a/blog/atom.xml +++ b/blog/atom.xml @@ -2,11 +2,72 @@ https://single-spa.js.org/blog single-spa Blog - 2024-03-12T00:00:00.000Z + 2024-03-18T00:00:00.000Z https://github.com/jpmonette/feed single-spa Blog https://single-spa.js.org/img/single-spa-mark-magenta.svg + + <![CDATA[Top 5 Microfrontend Hosting Solutions]]> + https://single-spa.js.org/blog/2024/03/18/top-5-microfrontend-hosting-solutions + + 2024-03-18T00:00:00.000Z + + 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.

        +

        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.

        +

        Server-side versus client-side rendering​

        +

        This article focuses on hosting solutions for client-side rendered microfrontends, since the majority of microfrontend implementations rely solely on client-side rendering.

        +

        Server-side rendering of microfrontends often involves one or more docker containers that run NodeJS to render React, Angular, or Vue applications. For optimal performance, single-spa server rendering also supports a single NodeJS runtime (rather than network requests between docker containers).

        +

        If your organization uses server-side rendering, the following rankings will still apply but may require some additional consideration that isn’t covered here.

        +

        Low-level vs high-level hosting solutions​

        +

        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.

        +

        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.

        +

        Solution comparison​

        +
        Baseplate CloudZephyr CloudS3 + CloudfrontGCP Storage + Cloud CDNAzure Storage + CDN
        Global availability✓ (via Cloudflare)✓ (Cloudflare / Netlify)✓✓✓
        Web app hosting 1✓✓✓✓✓
        Environments support 2✓✓(manual)(manual)(manual)
        Autogenerated CI pipelines 3✓(planned)✗✗✗
        Automated microfrontend creation✓ (via API and CLI)✓(manual)(manual)(manual)
        Custom domains✓ (via DNS records)✓✓✓✓
        Route / layout management 4✓ (single-spa-layout template)(manual)(manual)(manual)(manual)
        Self-owned assets storage 5✓ (optional bring-your-own-s3-bucket)✓✓✓✓
        Edge-side HTML rendering optimizations 6✓(planned)✗✗✗
        Service discovery 7✓✓(manual)(manual)(manual)
        CORS / CSP / Cache Control✓ (sensible defaults, fully customizable)(planned)✓✓✓
        Usage metrics✓(planned)(manual)(manual)(manual)
        Full audit trail 8✓✓(manual)(manual)(manual)
        Permissions management✓ (comprehensive, including microfrontend ownership)✓✓✓✓
        Shared dependency management 9(planned)✓(manual)(manual)(manual)
        Server rendering support(planned)(planned)✗✗✗
        Microfrontend marketplace 10(planned)(planned)✗✗✗
        Rolling deployments 11(planned)(planned)✗✗✗
        +
          +
        1. Web apps hosting refers to hosting the parent/root HTML file that initializes the microfrontends necessary for client-side rendering.
          2. +
        2. 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.
          3. +
        3. Auto-generated CI pipelines refers to generating configuration files for Github workflow, Azure Pipelines, Gitlab CI and other CI/CD tools.
          4. +
        4. Route / layout management refers to managing the in-browser URL routes and DOM layout for microfrontends.
          5. +
        5. 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.
          6. +
        6. Edge-side HTML rendering optimizations refers to dynamically changing the HTML file for a web app via code that runs in 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, <link rel=preload>, and <script> elements so that the browser begins downloading the necessary resources for the current URL as quickly as possible.
          7. +
        7. Service discovery refers to all available microfrontends easily cross-communicating with each other. This is often done via import maps or other manifest files.
          8. +
        8. Full audit trail refers to logs for all deployments, infrastructure changes, and configuration changes within the microfrontends system.
          9. +
        9. 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.
          10. +
        10. Microfrontend marketplace refers to purchasing or installing pre-made microfrontends into a company's system.
          11. +
        11. 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.
          12. +
        +

        1. Baseplate Cloud​

        +

        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’s 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.

        +

        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.

        +

        Baseplate supports the following features:

        +
          +
        • Web apps hosting
          • +
        • Custom domains for web apps and static assets
          • +
        • Unlimited deployable environments
          • +
        • Unlimited microfrontends
          • +
        • Autogenerated CI/CD pipelines
          • +
        • Full audit trail
          • +
        • Microfrontend-specific usage metrics
          • +
        • CORS, CSP, and Cache-Control configuration
          • +
        • Edge-side performance optimizations
          • +
        +

        Also of note, Baseplate CDN is a source-available Cloudflare worker designed for maximum performance and best practices. It is globally available at all Cloudflare edge locations.

        +

        2. Zephyr Cloud​

        +

        From the creators of Module Federation, 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.

        +

        3. AWS S3 + Cloudfront​

        +

        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 Cloudflare distribution that acts as a public CDN, with a private S3 bucket as the origin containing all static web files (Javascript, CSS, HTML) needed.

        +

        The advantage of using lower-level cloud hosting services is their initial lower costs—however, that comes at the expense of increased setup and maintenance complexity compared to microfrontend-specific cloud hosting solutions.

        +

        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.

        +

        4. GCP Storage + Cloud CDN​

        +

        Google 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 and GCP Cloud CDN.

        +

        5. Azure Storage + CDN​

        +

        Azure Storage provides equivalent low-level cloud services to AWS. The same technical details that apply to AWS S3 + Cloudfront also apply to Azure Storage and GCP Cloud CDN.

        ]]>         + + Joel Denning + https://x.com/joelbdenning + +         <![CDATA[March 2024 Core Team Meeting]]> https://single-spa.js.org/blog/2024/03/12/core-team-meeting-notes diff --git a/blog/index.html b/blog/index.html index af24b719c..30ece0956 100644 --- a/blog/index.html +++ b/blog/index.html @@ -14,11 +14,60 @@ - - + + -

        · 2 min read

        Attendees: Joel Denning, Milan Kovacic

        +

        · 8 min read
        Joel Denning

        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.

        +

        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.

        +

        Server-side versus client-side rendering​

        +

        This article focuses on hosting solutions for client-side rendered microfrontends, since the majority of microfrontend implementations rely solely on client-side rendering.

        +

        Server-side rendering of microfrontends often involves one or more docker containers that run NodeJS to render React, Angular, or Vue applications. For optimal performance, single-spa server rendering also supports a single NodeJS runtime (rather than network requests between docker containers).

        +

        If your organization uses server-side rendering, the following rankings will still apply but may require some additional consideration that isn’t covered here.

        +

        Low-level vs high-level hosting solutions​

        +

        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.

        +

        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.

        +

        Solution comparison​

        +
        Baseplate CloudZephyr CloudS3 + CloudfrontGCP Storage + Cloud CDNAzure Storage + CDN
        Global availability✓ (via Cloudflare)✓ (Cloudflare / Netlify)✓✓✓
        Web app hosting 1✓✓✓✓✓
        Environments support 2✓✓(manual)(manual)(manual)
        Autogenerated CI pipelines 3✓(planned)✗✗✗
        Automated microfrontend creation✓ (via API and CLI)✓(manual)(manual)(manual)
        Custom domains✓ (via DNS records)✓✓✓✓
        Route / layout management 4✓ (single-spa-layout template)(manual)(manual)(manual)(manual)
        Self-owned assets storage 5✓ (optional bring-your-own-s3-bucket)✓✓✓✓
        Edge-side HTML rendering optimizations 6✓(planned)✗✗✗
        Service discovery 7✓✓(manual)(manual)(manual)
        CORS / CSP / Cache Control✓ (sensible defaults, fully customizable)(planned)✓✓✓
        Usage metrics✓(planned)(manual)(manual)(manual)
        Full audit trail 8✓✓(manual)(manual)(manual)
        Permissions management✓ (comprehensive, including microfrontend ownership)✓✓✓✓
        Shared dependency management 9(planned)✓(manual)(manual)(manual)
        Server rendering support(planned)(planned)✗✗✗
        Microfrontend marketplace 10(planned)(planned)✗✗✗
        Rolling deployments 11(planned)(planned)✗✗✗
        +
          +
        1. Web apps hosting refers to hosting the parent/root HTML file that initializes the microfrontends necessary for client-side rendering.
          2. +
        2. 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.
          3. +
        3. Auto-generated CI pipelines refers to generating configuration files for Github workflow, Azure Pipelines, Gitlab CI and other CI/CD tools.
          4. +
        4. Route / layout management refers to managing the in-browser URL routes and DOM layout for microfrontends.
          5. +
        5. 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.
          6. +
        6. Edge-side HTML rendering optimizations refers to dynamically changing the HTML file for a web app via code that runs in 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, <link rel=preload>, and <script> elements so that the browser begins downloading the necessary resources for the current URL as quickly as possible.
          7. +
        7. Service discovery refers to all available microfrontends easily cross-communicating with each other. This is often done via import maps or other manifest files.
          8. +
        8. Full audit trail refers to logs for all deployments, infrastructure changes, and configuration changes within the microfrontends system.
          9. +
        9. 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.
          10. +
        10. Microfrontend marketplace refers to purchasing or installing pre-made microfrontends into a company's system.
          11. +
        11. 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.
          12. +
        +

        1. Baseplate Cloud​

        +

        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’s 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.

        +

        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.

        +

        Baseplate supports the following features:

        +
          +
        • Web apps hosting
          • +
        • Custom domains for web apps and static assets
          • +
        • Unlimited deployable environments
          • +
        • Unlimited microfrontends
          • +
        • Autogenerated CI/CD pipelines
          • +
        • Full audit trail
          • +
        • Microfrontend-specific usage metrics
          • +
        • CORS, CSP, and Cache-Control configuration
          • +
        • Edge-side performance optimizations
          • +
        +

        Also of note, Baseplate CDN is a source-available Cloudflare worker designed for maximum performance and best practices. It is globally available at all Cloudflare edge locations.

        +

        2. Zephyr Cloud​

        +

        From the creators of Module Federation, 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.

        +

        3. AWS S3 + Cloudfront​

        +

        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 Cloudflare distribution that acts as a public CDN, with a private S3 bucket as the origin containing all static web files (Javascript, CSS, HTML) needed.

        +

        The advantage of using lower-level cloud hosting services is their initial lower costs—however, that comes at the expense of increased setup and maintenance complexity compared to microfrontend-specific cloud hosting solutions.

        +

        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.

        +

        4. GCP Storage + Cloud CDN​

        +

        Google 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 and GCP Cloud CDN.

        +

        5. Azure Storage + CDN​

        +

        Azure Storage provides equivalent low-level cloud services to AWS. The same technical details that apply to AWS S3 + Cloudfront also apply to Azure Storage and GCP Cloud CDN.

        · 2 min read

        Attendees: Joel Denning, Milan Kovacic

        Date: 2024-03-13

        Meeting Agenda​

        · 2 min read
        Anthony Frehner

        Background​

        -

        For a long time, Canopy has had the benefit of using a tool called 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.

        -

        With that in mind, I'm proud to announce an initial release for 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.

        -

        Current Inspector Features​

        -
          -
        • List registered applications
          • -
        • Show application status
          • -
        • Force an app to mount or unmount
          • -
        • Hover over an app name to have an "inspect element"-like view of your apps (Overlays)
          • -
        -

        (Note: Overlays require a small update to your code, but should hopefully be simple! See how to configure app overlays)

        -

        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.

        -

        single-spa 4.1​

        -

        single-spa 4.1 was released, which includes a couple of key updates:

        -
          -
        1. Support for single-spa Inspector
          2. -
        2. ESM bundle output
          3. -
        3. Simpmlified test configuration for developers/contributors to single-spa
          4. -
        -

        For 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.

        -

        We 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.

        -

        Help Wanted!​

        -

        If 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 and hack away!

        -

        We 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. :)

        -

        Thank you!

        +

        Please contribute to our code and ecosystem, join our single-spa slack channel, follow our official Twitter account, and contribute to our open collective. The single-spa core team all have full-time jobs and maintain this project on a volunteer basis.

        \ No newline at end of file diff --git a/blog/page/2/index.html b/blog/page/2/index.html index a4f822d73..897b5a752 100644 --- a/blog/page/2/index.html +++ b/blog/page/2/index.html @@ -14,11 +14,35 @@ - - + + -

        · 4 min read
        Joel Denning

        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.

        +

        · 2 min read
        Anthony Frehner

        Background​

        +

        For a long time, Canopy has had the benefit of using a tool called 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.

        +

        With that in mind, I'm proud to announce an initial release for 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.

        +

        Current Inspector Features​

        +
          +
        • List registered applications
          • +
        • Show application status
          • +
        • Force an app to mount or unmount
          • +
        • Hover over an app name to have an "inspect element"-like view of your apps (Overlays)
          • +
        +

        (Note: Overlays require a small update to your code, but should hopefully be simple! See how to configure app overlays)

        +

        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.

        +

        single-spa 4.1​

        +

        single-spa 4.1 was released, which includes a couple of key updates:

        +
          +
        1. Support for single-spa Inspector
          2. +
        2. ESM bundle output
          3. +
        3. Simpmlified test configuration for developers/contributors to single-spa
          4. +
        +

        For 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.

        +

        We 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.

        +

        Help Wanted!​

        +

        If 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 and hack away!

        +

        We 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. :)

        +

        Thank you!

        · 4 min read
        Joel Denning

        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.

        And with the release of version 4, I’m pleased to announce that 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.

        Another way to do framework agnostic components?​

        For those familiar with web components and custom elements, you may be wondering why a JavaScript library would try to do what browsers are starting natively to do.

        @@ -102,7 +126,7 @@ 

        import singleSpaAngularJS from "single-spa-angularjs";
        import angular from "angular";
        import "./app.module.js";
        import "./routes.js";

        const domElementGetter = () => document.getElementById("cool-app");

        const angularLifecycles = singleSpaAngularJS({
          angular,
          domElementGetter,
          mainAngularModule: "single-spa-app",
          uiRouter: true,
          preserveGlobal: true,
        });

        export const bootstrap = [
          aboutToBootstrap,
          angularLifecycles.bootstrap,
          doneBootstrapping,
        ];

        export const mount = [angularLifecycles.mount];

        export const unmount = [angularLifecycles.unmount];

        function aboutToBootstrap() {
          console.log("about to bootstrapping");
          return Promise.resolve();
        }

        function doneBootstrap() {
          console.log("finished bootstrapping");
          return Promise.resolve();
        }

        In this example, we use a helper library called single-spa-angularjs which abstracts away the specifics of initializing Angular 1 apps. This blogpost doesn’t show you the app.module.js or routes.js files, but you can see an example implementation here.

        The pattern is to call singleSpaAngularJS at the very beginning, which returns bootstrap, mount, and unmount lifecycle functions for you.

        -

        You might notice that this time the lifecycles are exported as arrays of functions instead of just functions — you can choose whichever works best for you.

        +

        You might notice that this time the lifecycles are exported as arrays of functions instead of just functions — you can choose whichever works best for you.

        The 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.

        To learn more about single-spa helper libraries, check out these github projects:

        diff --git a/blog/rss.xml b/blog/rss.xml index 43947875f..036573e77 100644 --- a/blog/rss.xml +++ b/blog/rss.xml @@ -4,10 +4,67 @@ single-spa Blog https://single-spa.js.org/blog single-spa Blog - Tue, 12 Mar 2024 00:00:00 GMT + Mon, 18 Mar 2024 00:00:00 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed en + + <![CDATA[Top 5 Microfrontend Hosting Solutions]]> + https://single-spa.js.org/blog/2024/03/18/top-5-microfrontend-hosting-solutions + https://single-spa.js.org/blog/2024/03/18/top-5-microfrontend-hosting-solutions + Mon, 18 Mar 2024 00:00:00 GMT + + 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.

        +

        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.

        +

        Server-side versus client-side rendering​

        +

        This article focuses on hosting solutions for client-side rendered microfrontends, since the majority of microfrontend implementations rely solely on client-side rendering.

        +

        Server-side rendering of microfrontends often involves one or more docker containers that run NodeJS to render React, Angular, or Vue applications. For optimal performance, single-spa server rendering also supports a single NodeJS runtime (rather than network requests between docker containers).

        +

        If your organization uses server-side rendering, the following rankings will still apply but may require some additional consideration that isn’t covered here.

        +

        Low-level vs high-level hosting solutions​

        +

        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.

        +

        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.

        +

        Solution comparison​

        +
        Baseplate CloudZephyr CloudS3 + CloudfrontGCP Storage + Cloud CDNAzure Storage + CDN
        Global availability✓ (via Cloudflare)✓ (Cloudflare / Netlify)✓✓✓
        Web app hosting 1✓✓✓✓✓
        Environments support 2✓✓(manual)(manual)(manual)
        Autogenerated CI pipelines 3✓(planned)✗✗✗
        Automated microfrontend creation✓ (via API and CLI)✓(manual)(manual)(manual)
        Custom domains✓ (via DNS records)✓✓✓✓
        Route / layout management 4✓ (single-spa-layout template)(manual)(manual)(manual)(manual)
        Self-owned assets storage 5✓ (optional bring-your-own-s3-bucket)✓✓✓✓
        Edge-side HTML rendering optimizations 6✓(planned)✗✗✗
        Service discovery 7✓✓(manual)(manual)(manual)
        CORS / CSP / Cache Control✓ (sensible defaults, fully customizable)(planned)✓✓✓
        Usage metrics✓(planned)(manual)(manual)(manual)
        Full audit trail 8✓✓(manual)(manual)(manual)
        Permissions management✓ (comprehensive, including microfrontend ownership)✓✓✓✓
        Shared dependency management 9(planned)✓(manual)(manual)(manual)
        Server rendering support(planned)(planned)✗✗✗
        Microfrontend marketplace 10(planned)(planned)✗✗✗
        Rolling deployments 11(planned)(planned)✗✗✗
        +
          +
        1. Web apps hosting refers to hosting the parent/root HTML file that initializes the microfrontends necessary for client-side rendering.
          2. +
        2. 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.
          3. +
        3. Auto-generated CI pipelines refers to generating configuration files for Github workflow, Azure Pipelines, Gitlab CI and other CI/CD tools.
          4. +
        4. Route / layout management refers to managing the in-browser URL routes and DOM layout for microfrontends.
          5. +
        5. 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.
          6. +
        6. Edge-side HTML rendering optimizations refers to dynamically changing the HTML file for a web app via code that runs in 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, <link rel=preload>, and <script> elements so that the browser begins downloading the necessary resources for the current URL as quickly as possible.
          7. +
        7. Service discovery refers to all available microfrontends easily cross-communicating with each other. This is often done via import maps or other manifest files.
          8. +
        8. Full audit trail refers to logs for all deployments, infrastructure changes, and configuration changes within the microfrontends system.
          9. +
        9. 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.
          10. +
        10. Microfrontend marketplace refers to purchasing or installing pre-made microfrontends into a company's system.
          11. +
        11. 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.
          12. +
        +

        1. Baseplate Cloud​

        +

        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’s 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.

        +

        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.

        +

        Baseplate supports the following features:

        +
          +
        • Web apps hosting
          • +
        • Custom domains for web apps and static assets
          • +
        • Unlimited deployable environments
          • +
        • Unlimited microfrontends
          • +
        • Autogenerated CI/CD pipelines
          • +
        • Full audit trail
          • +
        • Microfrontend-specific usage metrics
          • +
        • CORS, CSP, and Cache-Control configuration
          • +
        • Edge-side performance optimizations
          • +
        +

        Also of note, Baseplate CDN is a source-available Cloudflare worker designed for maximum performance and best practices. It is globally available at all Cloudflare edge locations.

        +

        2. Zephyr Cloud​

        +

        From the creators of Module Federation, 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.

        +

        3. AWS S3 + Cloudfront​

        +

        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 Cloudflare distribution that acts as a public CDN, with a private S3 bucket as the origin containing all static web files (Javascript, CSS, HTML) needed.

        +

        The advantage of using lower-level cloud hosting services is their initial lower costs—however, that comes at the expense of increased setup and maintenance complexity compared to microfrontend-specific cloud hosting solutions.

        +

        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.

        +

        4. GCP Storage + Cloud CDN​

        +

        Google 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 and GCP Cloud CDN.

        +

        5. Azure Storage + CDN​

        +

        Azure Storage provides equivalent low-level cloud services to AWS. The same technical details that apply to AWS S3 + Cloudfront also apply to Azure Storage and GCP Cloud CDN.

        ]]>         +         <![CDATA[March 2024 Core Team Meeting]]> https://single-spa.js.org/blog/2024/03/12/core-team-meeting-notes diff --git a/contributors/index.html b/contributors/index.html index d7862f35a..d58051724 100644 --- a/contributors/index.html +++ b/contributors/index.html @@ -14,8 +14,8 @@ - - + +

        Core Team Members

        Contributors
        single-spa
        single-spa-angularjs
        single-spa-angular
        single-spa-cycle
        single-spa-ember
        single-spa-inferno
        single-spa-preact
        single-spa-react
        single-spa-svelte
        single-spa-vue
        single-spa.js.org
        diff --git a/docs/4.x/api/index.html b/docs/4.x/api/index.html index 9e60b47cd..3ae0cf068 100644 --- a/docs/4.x/api/index.html +++ b/docs/4.x/api/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        Applications API

        single-spa exports named functions and variables rather than a single default export. diff --git a/docs/4.x/building-applications/index.html b/docs/4.x/building-applications/index.html index 2e7313036..c87a8e486 100644 --- a/docs/4.x/building-applications/index.html +++ b/docs/4.x/building-applications/index.html @@ -14,8 +14,8 @@ - - + +

        Version: 4.x

        Building single-spa applications

        A single-spa registered application is everything that a normal SPA is, except that it doesn't have an HTML page. In a single-spa world, your SPA contains many registered applications, where each has its own framework. Registered applications have their own client-side routing and their own frameworks/libraries. They render their own HTML and have full freedom to do whatever they want, whenever they are mounted. The concept of being mounted refers to whether a registered application is putting content on the DOM or not. What determines if a registered application is mounted is its activity function. Whenever a registered application is not mounted, it should remain completely dormant until mounted.

        diff --git a/docs/4.x/code-of-conduct/index.html b/docs/4.x/code-of-conduct/index.html index 3ce8fb199..9986d97a6 100644 --- a/docs/4.x/code-of-conduct/index.html +++ b/docs/4.x/code-of-conduct/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        Code of Conduct

        This code of conduct outlines our expectations for participants within the single-spa community, as well as steps to reporting unacceptable behavior. We are committed to providing a welcoming and inspiring community for all and expect our code of conduct to be honored. Anyone who violates this code of conduct may be banned from the community.

        diff --git a/docs/4.x/configuration/index.html b/docs/4.x/configuration/index.html index dd3521051..af90d6e98 100644 --- a/docs/4.x/configuration/index.html +++ b/docs/4.x/configuration/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        Configuring single-spa

        The single-spa root config consists of the following:

        diff --git a/docs/4.x/contributing-overview/index.html b/docs/4.x/contributing-overview/index.html index daa7a3830..3dc4c2a99 100644 --- a/docs/4.x/contributing-overview/index.html +++ b/docs/4.x/contributing-overview/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        Contributing to Single-spa

        Thanks for checking out single-spa! We're excited to hear and learn from you.

        diff --git a/docs/4.x/ecosystem-angular/index.html b/docs/4.x/ecosystem-angular/index.html index 593e3588c..86e4148ed 100644 --- a/docs/4.x/ecosystem-angular/index.html +++ b/docs/4.x/ecosystem-angular/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        single-spa-angular

        Introduction​

        diff --git a/docs/4.x/ecosystem-angularjs/index.html b/docs/4.x/ecosystem-angularjs/index.html index e81b9800c..3a9c9a2c9 100644 --- a/docs/4.x/ecosystem-angularjs/index.html +++ b/docs/4.x/ecosystem-angularjs/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        single-spa-angularjs

        single-spa-angularjs is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for for use with AngularJS. Check out the single-spa-angularjs github.

        diff --git a/docs/4.x/ecosystem-backbone/index.html b/docs/4.x/ecosystem-backbone/index.html index 0f70d41ee..22886e3fb 100644 --- a/docs/4.x/ecosystem-backbone/index.html +++ b/docs/4.x/ecosystem-backbone/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        single-spa-backbone

        A single-spa helper library which provides lifecycle events for building single-spa applications using Backbone.

        diff --git a/docs/4.x/ecosystem-cycle/index.html b/docs/4.x/ecosystem-cycle/index.html index 1252c3d65..79c39ca18 100644 --- a/docs/4.x/ecosystem-cycle/index.html +++ b/docs/4.x/ecosystem-cycle/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        single-spa-cycle

        single-spa-cycle is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for for use with Cycle.js. Check out the single-spa-cycle github.

        diff --git a/docs/4.x/ecosystem-ember/index.html b/docs/4.x/ecosystem-ember/index.html index 24da4407d..2ff346ef3 100644 --- a/docs/4.x/ecosystem-ember/index.html +++ b/docs/4.x/ecosystem-ember/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        single-spa-ember

        single-spa-ember is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for for use with Ember.js. Check out the single-spa-ember github.

        diff --git a/docs/4.x/ecosystem-html-web-components/index.html b/docs/4.x/ecosystem-html-web-components/index.html index 42484de12..0f95b2829 100644 --- a/docs/4.x/ecosystem-html-web-components/index.html +++ b/docs/4.x/ecosystem-html-web-components/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        single-spa-html

        single-spa-html is a helper library for mounting raw HTML and web components as diff --git a/docs/4.x/ecosystem-inferno/index.html b/docs/4.x/ecosystem-inferno/index.html index 522af9eff..6f8c7005c 100644 --- a/docs/4.x/ecosystem-inferno/index.html +++ b/docs/4.x/ecosystem-inferno/index.html @@ -14,8 +14,8 @@ - - + +

        Version: 4.x

        single-spa-inferno

        single-spa-inferno is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for for use with Inferno. Check out the single-spa-inferno github.

        diff --git a/docs/4.x/ecosystem-leaked-globals/index.html b/docs/4.x/ecosystem-leaked-globals/index.html index 37efb159c..4e429825d 100644 --- a/docs/4.x/ecosystem-leaked-globals/index.html +++ b/docs/4.x/ecosystem-leaked-globals/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        single-spa-leaked-globals

        single-spa-leaked-globals is a helper library for dealing with single-spa-applications diff --git a/docs/4.x/ecosystem-preact/index.html b/docs/4.x/ecosystem-preact/index.html index 000a3f54d..8393f99c0 100644 --- a/docs/4.x/ecosystem-preact/index.html +++ b/docs/4.x/ecosystem-preact/index.html @@ -14,8 +14,8 @@ - - + +

        Version: 4.x

        single-spa-preact

        single-spa-preact is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for for use with Preact. Check out the single-spa-preact github.

        diff --git a/docs/4.x/ecosystem-react/index.html b/docs/4.x/ecosystem-react/index.html index 12acee581..e1bb6b273 100644 --- a/docs/4.x/ecosystem-react/index.html +++ b/docs/4.x/ecosystem-react/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        single-spa-react

        Build Status

        diff --git a/docs/4.x/ecosystem-riot/index.html b/docs/4.x/ecosystem-riot/index.html index 9b6b5cde8..867a91102 100644 --- a/docs/4.x/ecosystem-riot/index.html +++ b/docs/4.x/ecosystem-riot/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        single-spa-riot

        single-spa-riot is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for for use with riot. Check out the single-spa-riot github.

        diff --git a/docs/4.x/ecosystem-svelte/index.html b/docs/4.x/ecosystem-svelte/index.html index fdc6b1150..2e790f625 100644 --- a/docs/4.x/ecosystem-svelte/index.html +++ b/docs/4.x/ecosystem-svelte/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        single-spa-svelte

        single-spa-svelte is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for for use with svelte. Check out the single-spa-svelte github.

        diff --git a/docs/4.x/ecosystem-vue/index.html b/docs/4.x/ecosystem-vue/index.html index d793c13d8..0334f02fb 100644 --- a/docs/4.x/ecosystem-vue/index.html +++ b/docs/4.x/ecosystem-vue/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        single-spa-vue

        single-spa-vue is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for for use with Vue.js. Check out the single-spa-vue github.

        diff --git a/docs/4.x/ecosystem/index.html b/docs/4.x/ecosystem/index.html index ec2ae9a9c..35c8e73db 100644 --- a/docs/4.x/ecosystem/index.html +++ b/docs/4.x/ecosystem/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        The single-spa ecosystem

        The single-spa ecosystem is quickly growing to support as many frameworks and build tools as possible.

        diff --git a/docs/4.x/examples/index.html b/docs/4.x/examples/index.html index 7c3430396..b4f5e42d7 100644 --- a/docs/4.x/examples/index.html +++ b/docs/4.x/examples/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        Single-spa Examples

        There are a variety of single-spa example repositories, each for different use cases:

        diff --git a/docs/4.x/faq/index.html b/docs/4.x/faq/index.html index 7dc7ebf10..71314f8a0 100644 --- a/docs/4.x/faq/index.html +++ b/docs/4.x/faq/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        Frequently Asked Questions

        What does single-spa do?​

        diff --git a/docs/4.x/getting-started-overview/index.html b/docs/4.x/getting-started-overview/index.html index 789a0631e..ef3ff9d0e 100644 --- a/docs/4.x/getting-started-overview/index.html +++ b/docs/4.x/getting-started-overview/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        Getting Started with single-spa

        JavaScript Microfrontends​

        diff --git a/docs/4.x/glossary/index.html b/docs/4.x/glossary/index.html index fcef918f9..ef9482e91 100644 --- a/docs/4.x/glossary/index.html +++ b/docs/4.x/glossary/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        Glossary

        Activity Function
        Application
        Application
        Helpers
        are a library that already implements single-spa lifecycle functions for a specific framework.
        Lifecycles
        module loader
        Microservices
        registerApplication
        diff --git a/docs/4.x/migrating-angularJS-tutorial/index.html b/docs/4.x/migrating-angularJS-tutorial/index.html index b435c65b0..393edaa25 100644 --- a/docs/4.x/migrating-angularJS-tutorial/index.html +++ b/docs/4.x/migrating-angularJS-tutorial/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        Migrating an Existing AngularJS Project

        Project Setup​

        diff --git a/docs/4.x/migrating-existing-spas/index.html b/docs/4.x/migrating-existing-spas/index.html index 1310eecbd..758e6758f 100644 --- a/docs/4.x/migrating-existing-spas/index.html +++ b/docs/4.x/migrating-existing-spas/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        Migrating existing SPAs

        If you're interested in migrating existing SPAs into a single-spa, you'll diff --git a/docs/4.x/migrating-react-tutorial/index.html b/docs/4.x/migrating-react-tutorial/index.html index 6cd597894..c139d24eb 100644 --- a/docs/4.x/migrating-react-tutorial/index.html +++ b/docs/4.x/migrating-react-tutorial/index.html @@ -14,8 +14,8 @@ - - + +

        Version: 4.x

        Migrating an Existing React Project

        Project Setup​

        diff --git a/docs/4.x/parcels-api/index.html b/docs/4.x/parcels-api/index.html index 40b91a777..c47988140 100644 --- a/docs/4.x/parcels-api/index.html +++ b/docs/4.x/parcels-api/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        Parcels API

        Most parcel methods will be called on the parcel itself, with the exception being around mounting.

        diff --git a/docs/4.x/parcels-overview/index.html b/docs/4.x/parcels-overview/index.html index 8b9ac8809..fd0cdfd67 100644 --- a/docs/4.x/parcels-overview/index.html +++ b/docs/4.x/parcels-overview/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        Parcels

        A single-spa parcel is a framework agnostic component. It is a chunk of functionality meant to be mounted manually by an application, without having to worry about which framework was used to implement the parcel or application. Parcels use similar methodology as registered applications but are mounted by a manual function call rather than the activity function. diff --git a/docs/4.x/separating-applications/index.html b/docs/4.x/separating-applications/index.html index 2c7f50f9f..fdbc5385c 100644 --- a/docs/4.x/separating-applications/index.html +++ b/docs/4.x/separating-applications/index.html @@ -14,8 +14,8 @@ - - + +

        Version: 4.x

        Splitting up applications

        In a large, microserviced system, your root single-spa configuration and each of the applications should probably have its own git repository. How to do that in a JavaScript project isn't necessarily clear, so some options are listed below.

        diff --git a/docs/4.x/starting-from-scratch/index.html b/docs/4.x/starting-from-scratch/index.html index 979d8636e..752cbbc91 100644 --- a/docs/4.x/starting-from-scratch/index.html +++ b/docs/4.x/starting-from-scratch/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 4.x

        Starting From Scratch

        single-spa allows you to build micro frontends that coexist and can each be written with their own framework. This will allow you and your team to:

        diff --git a/docs/5.x/api/index.html b/docs/5.x/api/index.html index 1ddd5f10f..f1c7e5257 100644 --- a/docs/5.x/api/index.html +++ b/docs/5.x/api/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        Applications API

        Single-spa exports named functions and variables rather than a single default export. diff --git a/docs/5.x/building-applications/index.html b/docs/5.x/building-applications/index.html index 2eb334a51..81c85948f 100644 --- a/docs/5.x/building-applications/index.html +++ b/docs/5.x/building-applications/index.html @@ -14,8 +14,8 @@ - - + +

        Version: 5.x

        Building single-spa applications

        A single-spa registered application is everything that a normal SPA is, except that it doesn't have an HTML page. In a single-spa world, your SPA contains many registered applications, where each has its own framework. Registered applications have their own client-side routing and their own frameworks/libraries. They render their own HTML and have full freedom to do whatever they want, whenever they are mounted. The concept of being mounted refers to whether a registered application is putting content on the DOM or not. What determines if a registered application is mounted is its activity function. Whenever a registered application is not mounted, it should remain completely dormant until mounted.

        diff --git a/docs/5.x/code-of-conduct/index.html b/docs/5.x/code-of-conduct/index.html index af0e7a3a1..f881abb7a 100644 --- a/docs/5.x/code-of-conduct/index.html +++ b/docs/5.x/code-of-conduct/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        Code of Conduct

        This code of conduct outlines our expectations for participants within the single-spa community, as well as steps to reporting unacceptable behavior. We are committed to providing a welcoming and inspiring community for all and expect our code of conduct to be honored. Anyone who violates this code of conduct may be banned from the community.

        diff --git a/docs/5.x/configuration/index.html b/docs/5.x/configuration/index.html index ced2fb9ef..9e0406d1a 100644 --- a/docs/5.x/configuration/index.html +++ b/docs/5.x/configuration/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        Configuring single-spa

        The single-spa root config consists of the following:

        diff --git a/docs/5.x/contributing-overview/index.html b/docs/5.x/contributing-overview/index.html index 2a425bc6c..ed19e4dee 100644 --- a/docs/5.x/contributing-overview/index.html +++ b/docs/5.x/contributing-overview/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        Contributing to Single-spa

        List of current contributors

        diff --git a/docs/5.x/create-single-spa/index.html b/docs/5.x/create-single-spa/index.html index 96b2e3955..4e1204fa1 100644 --- a/docs/5.x/create-single-spa/index.html +++ b/docs/5.x/create-single-spa/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        create-single-spa

        Single-spa offers a CLI for those who prefer autogenerated and managed configurations for webpack, babel, jest, etc. You do not have to use the CLI in order to use single-spa.

        diff --git a/docs/5.x/devtools/index.html b/docs/5.x/devtools/index.html index 9bebfc32d..bd932e7b6 100644 --- a/docs/5.x/devtools/index.html +++ b/docs/5.x/devtools/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        single-spa-inspector

        The single-spa-inspector is a Firefox/Chrome devtools extension to provide utilities for helping with single-spa applications. Github project.

        diff --git a/docs/5.x/ecosystem-alpinejs/index.html b/docs/5.x/ecosystem-alpinejs/index.html index 5b70ce9c5..7fd7f8fc0 100644 --- a/docs/5.x/ecosystem-alpinejs/index.html +++ b/docs/5.x/ecosystem-alpinejs/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        single-spa-alpinejs

        single-spa-alpinejs is a helper library for mounting alpinejs components as diff --git a/docs/5.x/ecosystem-angular/index.html b/docs/5.x/ecosystem-angular/index.html index 00419edf8..f1186c7b0 100644 --- a/docs/5.x/ecosystem-angular/index.html +++ b/docs/5.x/ecosystem-angular/index.html @@ -14,8 +14,8 @@ - - + +

        Version: 5.x

        single-spa-angular

        Project Status​

        diff --git a/docs/5.x/ecosystem-angularjs/index.html b/docs/5.x/ecosystem-angularjs/index.html index fab7b7d8c..28813a2bd 100644 --- a/docs/5.x/ecosystem-angularjs/index.html +++ b/docs/5.x/ecosystem-angularjs/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        single-spa-angularjs

        single-spa-angularjs is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for use with AngularJS. Check out the single-spa-angularjs github.

        diff --git a/docs/5.x/ecosystem-backbone/index.html b/docs/5.x/ecosystem-backbone/index.html index 2d65eebf5..cd0458996 100644 --- a/docs/5.x/ecosystem-backbone/index.html +++ b/docs/5.x/ecosystem-backbone/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        single-spa-backbone

        A single-spa helper library which provides lifecycle events for building single-spa applications using Backbone.

        diff --git a/docs/5.x/ecosystem-css/index.html b/docs/5.x/ecosystem-css/index.html index d1a8fcb2a..01c19b315 100644 --- a/docs/5.x/ecosystem-css/index.html +++ b/docs/5.x/ecosystem-css/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        CSS

        In a microfrontends architecture, it's important to have both shared CSS and microfrontend-specific CSS. There should only be one copy of all shared CSS, and CSS specific to a microfrontend should be scoped so that class names do not collide between microfrontends.

        diff --git a/docs/5.x/ecosystem-cycle/index.html b/docs/5.x/ecosystem-cycle/index.html index c8c37e098..0f0668a8a 100644 --- a/docs/5.x/ecosystem-cycle/index.html +++ b/docs/5.x/ecosystem-cycle/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        single-spa-cycle

        single-spa-cycle is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for for use with Cycle.js. Check out the single-spa-cycle github.

        diff --git a/docs/5.x/ecosystem-dojo/index.html b/docs/5.x/ecosystem-dojo/index.html index 85cb21ff7..83ed68799 100644 --- a/docs/5.x/ecosystem-dojo/index.html +++ b/docs/5.x/ecosystem-dojo/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        single-spa-dojo

        Build Status

        diff --git a/docs/5.x/ecosystem-ember/index.html b/docs/5.x/ecosystem-ember/index.html index 21a1e3064..a7d649662 100644 --- a/docs/5.x/ecosystem-ember/index.html +++ b/docs/5.x/ecosystem-ember/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        single-spa-ember

        single-spa-ember is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for use with Ember.js. Check out the single-spa-ember github.

        diff --git a/docs/5.x/ecosystem-html-web-components/index.html b/docs/5.x/ecosystem-html-web-components/index.html index afdd968fc..93d2849b4 100644 --- a/docs/5.x/ecosystem-html-web-components/index.html +++ b/docs/5.x/ecosystem-html-web-components/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        single-spa-html

        single-spa-html is a helper library for mounting raw HTML and web components as diff --git a/docs/5.x/ecosystem-inferno/index.html b/docs/5.x/ecosystem-inferno/index.html index 219d0b29c..11be997e7 100644 --- a/docs/5.x/ecosystem-inferno/index.html +++ b/docs/5.x/ecosystem-inferno/index.html @@ -14,8 +14,8 @@ - - + +

        Version: 5.x

        single-spa-inferno

        single-spa-inferno is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for for use with Inferno. Check out the single-spa-inferno github.

        diff --git a/docs/5.x/ecosystem-leaked-globals/index.html b/docs/5.x/ecosystem-leaked-globals/index.html index da49dd25e..0d75ee965 100644 --- a/docs/5.x/ecosystem-leaked-globals/index.html +++ b/docs/5.x/ecosystem-leaked-globals/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        single-spa-leaked-globals

        single-spa-leaked-globals is a helper library for dealing with single-spa-applications diff --git a/docs/5.x/ecosystem-preact/index.html b/docs/5.x/ecosystem-preact/index.html index b559c544b..8d2ecaa01 100644 --- a/docs/5.x/ecosystem-preact/index.html +++ b/docs/5.x/ecosystem-preact/index.html @@ -14,8 +14,8 @@ - - + +

        Version: 5.x

        single-spa-preact

        single-spa-preact is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for for use with Preact. Check out the single-spa-preact github.

        diff --git a/docs/5.x/ecosystem-react/index.html b/docs/5.x/ecosystem-react/index.html index 00984cb60..da3836956 100644 --- a/docs/5.x/ecosystem-react/index.html +++ b/docs/5.x/ecosystem-react/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        single-spa-react

        Build Status

        diff --git a/docs/5.x/ecosystem-riot/index.html b/docs/5.x/ecosystem-riot/index.html index 0af7ec696..e63fa0ce6 100644 --- a/docs/5.x/ecosystem-riot/index.html +++ b/docs/5.x/ecosystem-riot/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        single-spa-riot

        single-spa-riot is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for for use with riot. Check out the single-spa-riot github.

        diff --git a/docs/5.x/ecosystem-snowpack/index.html b/docs/5.x/ecosystem-snowpack/index.html index 4e78dd2de..c90148295 100644 --- a/docs/5.x/ecosystem-snowpack/index.html +++ b/docs/5.x/ecosystem-snowpack/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        Snowpack

        Snowpack is a tool for both local development and the building of applications. It uses in-browser ES modules during development, and then bundles with webpack (or other build tools) for production.

        diff --git a/docs/5.x/ecosystem-svelte/index.html b/docs/5.x/ecosystem-svelte/index.html index e13e444d5..19cc8118f 100644 --- a/docs/5.x/ecosystem-svelte/index.html +++ b/docs/5.x/ecosystem-svelte/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        single-spa-svelte

        single-spa-svelte is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for for use with svelte. Check out the single-spa-svelte github.

        diff --git a/docs/5.x/ecosystem-vite/index.html b/docs/5.x/ecosystem-vite/index.html index e6db181fe..fc4dfcaaf 100644 --- a/docs/5.x/ecosystem-vite/index.html +++ b/docs/5.x/ecosystem-vite/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        Vite

        Vite is a tool for both local development and the building of applications. It was created within the Vue ecosystem, but can be used with other UI frameworks, too.

        diff --git a/docs/5.x/ecosystem-vue/index.html b/docs/5.x/ecosystem-vue/index.html index af34d78b1..157e5a5e3 100644 --- a/docs/5.x/ecosystem-vue/index.html +++ b/docs/5.x/ecosystem-vue/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        single-spa-vue

        single-spa-vue is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for use with Vue.js. Check out the single-spa-vue github.

        diff --git a/docs/5.x/ecosystem/index.html b/docs/5.x/ecosystem/index.html index d8026ee7a..85d6a5030 100644 --- a/docs/5.x/ecosystem/index.html +++ b/docs/5.x/ecosystem/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        The single-spa ecosystem

        The single-spa ecosystem is quickly growing to support as many frameworks and build tools as possible.

        diff --git a/docs/5.x/examples/index.html b/docs/5.x/examples/index.html index 09bad9425..89098b84f 100644 --- a/docs/5.x/examples/index.html +++ b/docs/5.x/examples/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        Single-spa Examples

        Core team examples​

        diff --git a/docs/5.x/faq/index.html b/docs/5.x/faq/index.html index 2068df6b0..7f868871e 100644 --- a/docs/5.x/faq/index.html +++ b/docs/5.x/faq/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        Frequently Asked Questions

        What does single-spa do?​

        diff --git a/docs/5.x/getting-started-overview/index.html b/docs/5.x/getting-started-overview/index.html index a25d4509b..04396d745 100644 --- a/docs/5.x/getting-started-overview/index.html +++ b/docs/5.x/getting-started-overview/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        Getting Started with single-spa

        JavaScript Microfrontends​

        diff --git a/docs/5.x/glossary/index.html b/docs/5.x/glossary/index.html index 9a93593b6..ce6b6f6f5 100644 --- a/docs/5.x/glossary/index.html +++ b/docs/5.x/glossary/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        Glossary

        Activity Function
        Application
        Application
        Helpers
        are a library that already implements single-spa lifecycle functions for a specific framework.
        Lifecycles
        module loader
        Microservices
        registerApplication
        diff --git a/docs/5.x/layout-api/index.html b/docs/5.x/layout-api/index.html index 4260cf813..7b335e3a1 100644 --- a/docs/5.x/layout-api/index.html +++ b/docs/5.x/layout-api/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        Layout Engine API

        The single-spa-layout library exposes several javascript functions as a public API.

        diff --git a/docs/5.x/layout-definition/index.html b/docs/5.x/layout-definition/index.html index 64c1770a3..f04f9ea00 100644 --- a/docs/5.x/layout-definition/index.html +++ b/docs/5.x/layout-definition/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        Layout Definition

        A layout is a combination of HTMLElements, routes, and single-spa applications. Layout is defined statically in your root config to handle your top level routes and dom elements. Single-spa-layout should not be used outside of the root config; instead, a UI framework (React, Angular, Vue) should handle layouts within the applications.

        diff --git a/docs/5.x/layout-overview/index.html b/docs/5.x/layout-overview/index.html index c44e0127c..a039a7cab 100644 --- a/docs/5.x/layout-overview/index.html +++ b/docs/5.x/layout-overview/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        Layout Engine

        Introduction​

        diff --git a/docs/5.x/microfrontends-concept/index.html b/docs/5.x/microfrontends-concept/index.html index c24065fe6..1cd363174 100644 --- a/docs/5.x/microfrontends-concept/index.html +++ b/docs/5.x/microfrontends-concept/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        Concept: Microfrontends

        diff --git a/docs/5.x/migrating-existing-spas/index.html b/docs/5.x/migrating-existing-spas/index.html index c4fa77781..53cf028b4 100644 --- a/docs/5.x/migrating-existing-spas/index.html +++ b/docs/5.x/migrating-existing-spas/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        Migrating existing SPAs

        If you're interested in migrating existing SPAs into a single-spa, you'll diff --git a/docs/5.x/module-types/index.html b/docs/5.x/module-types/index.html index 042875513..782ff447c 100644 --- a/docs/5.x/module-types/index.html +++ b/docs/5.x/module-types/index.html @@ -14,8 +14,8 @@ - - + +

        Version: 5.x

        Concept: single-spa Microfrontend Types

        diff --git a/docs/5.x/parcels-api/index.html b/docs/5.x/parcels-api/index.html index 9da90174b..e0d4eb620 100644 --- a/docs/5.x/parcels-api/index.html +++ b/docs/5.x/parcels-api/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        Parcels API

        Most parcel methods will be called on the parcel itself, with the exception being around mounting.

        diff --git a/docs/5.x/parcels-overview/index.html b/docs/5.x/parcels-overview/index.html index c64a23ffe..cff974f75 100644 --- a/docs/5.x/parcels-overview/index.html +++ b/docs/5.x/parcels-overview/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        Parcels

        Parcels are an advanced feature of single-spa. We recommend that you use applications as the primary type of microfrontend in your architecture. See this explanation for more details

        diff --git a/docs/5.x/recommended-setup/index.html b/docs/5.x/recommended-setup/index.html index da822d6d4..11725ef36 100644 --- a/docs/5.x/recommended-setup/index.html +++ b/docs/5.x/recommended-setup/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        The Recommended Setup

        The single-spa npm package is not opinionated about your build tools, CI process, or local development workflow. However, to implement single-spa you will have to figure all of those things out (and more). To help you decide how to approach these problems, the single-spa core team has put together a "recommended setup" that gives an opinionated approach to solving the practical problems of microfrontends.

        diff --git a/docs/5.x/separating-applications/index.html b/docs/5.x/separating-applications/index.html index eb88a07cd..c32046d71 100644 --- a/docs/5.x/separating-applications/index.html +++ b/docs/5.x/separating-applications/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        Splitting up applications

        In a large, microserviced system, your root single-spa configuration and each of the applications should probably have its own git repository. How to do that in a JavaScript project isn't necessarily clear, so some options are listed below.

        diff --git a/docs/5.x/shared-webpack-configs/index.html b/docs/5.x/shared-webpack-configs/index.html index 3bc92dbb2..22fc03226 100644 --- a/docs/5.x/shared-webpack-configs/index.html +++ b/docs/5.x/shared-webpack-configs/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        Shared Webpack configs

        single-spa also publishes a few shared Webpack config packages that include basics needed for creating single-spa applications. These configs are used by applications generated with create-single-spa, and can be used as a starting point to extend/modify a custom configuration for your organization/team.

        diff --git a/docs/5.x/single-spa-playground/index.html b/docs/5.x/single-spa-playground/index.html index 8461aecc6..741fc0c82 100644 --- a/docs/5.x/single-spa-playground/index.html +++ b/docs/5.x/single-spa-playground/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        single-spa-playground

        Playground website

        diff --git a/docs/5.x/ssr-overview/index.html b/docs/5.x/ssr-overview/index.html index a2078318e..f093a6275 100644 --- a/docs/5.x/ssr-overview/index.html +++ b/docs/5.x/ssr-overview/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        Server Side Rendering

        Intro to SSR​

        diff --git a/docs/5.x/testing/e2e/index.html b/docs/5.x/testing/e2e/index.html index 8536c162a..cb94646e2 100644 --- a/docs/5.x/testing/e2e/index.html +++ b/docs/5.x/testing/e2e/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        E2E testing

        info

        As microfrontends gain widespread adoption, testing tools will catch up and the testing story will improve.

        diff --git a/docs/5.x/testing/units/index.html b/docs/5.x/testing/units/index.html index c8c09f277..25cb22da2 100644 --- a/docs/5.x/testing/units/index.html +++ b/docs/5.x/testing/units/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        Unit testing

        info

        As microfrontends gain widespread adoption, testing tools will catch up and the testing story will improve.

        diff --git a/docs/5.x/videos/index.html b/docs/5.x/videos/index.html index 28227be1c..963cc0e15 100644 --- a/docs/5.x/videos/index.html +++ b/docs/5.x/videos/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 5.x

        Video Tutorials

        A variety of video tutorials exist from both the single-spa core team and other community members.

        diff --git a/docs/api/index.html b/docs/api/index.html index a29e1d5ec..a42970348 100644 --- a/docs/api/index.html +++ b/docs/api/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        Applications API

        Single-spa exports named functions and variables rather than a single default export. diff --git a/docs/building-applications/index.html b/docs/building-applications/index.html index df20bad34..cbbd3d992 100644 --- a/docs/building-applications/index.html +++ b/docs/building-applications/index.html @@ -14,8 +14,8 @@ - - + +

        Version: 6.x

        Building single-spa applications

        A single-spa registered application is everything that a normal SPA is, except that it doesn't have an HTML page. In a single-spa world, your SPA contains many registered applications, where each has its own framework. Registered applications have their own client-side routing and their own frameworks/libraries. They render their own HTML and have full freedom to do whatever they want, whenever they are mounted. The concept of being mounted refers to whether a registered application is putting content on the DOM or not. What determines if a registered application is mounted is its activity function. Whenever a registered application is not mounted, it should remain completely dormant until mounted.

        diff --git a/docs/code-of-conduct/index.html b/docs/code-of-conduct/index.html index b5a0c326a..d37cb341f 100644 --- a/docs/code-of-conduct/index.html +++ b/docs/code-of-conduct/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        Code of Conduct

        This code of conduct outlines our expectations for participants within the single-spa community, as well as steps to reporting unacceptable behavior. We are committed to providing a welcoming and inspiring community for all and expect our code of conduct to be honored. Anyone who violates this code of conduct may be banned from the community.

        diff --git a/docs/configuration/index.html b/docs/configuration/index.html index a0ac6f13e..5d7dde533 100644 --- a/docs/configuration/index.html +++ b/docs/configuration/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        Configuring single-spa

        The single-spa root config consists of the following:

        diff --git a/docs/contributing-overview/index.html b/docs/contributing-overview/index.html index de2c43c3e..6c45c8d70 100644 --- a/docs/contributing-overview/index.html +++ b/docs/contributing-overview/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        Contributing to Single-spa

        List of current contributors

        diff --git a/docs/create-single-spa/index.html b/docs/create-single-spa/index.html index c597abe5c..76be0ae4c 100644 --- a/docs/create-single-spa/index.html +++ b/docs/create-single-spa/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        create-single-spa

        Single-spa offers a CLI for those who prefer autogenerated and managed configurations for webpack, babel, jest, etc. You do not have to use the CLI in order to use single-spa.

        diff --git a/docs/devtools/index.html b/docs/devtools/index.html index c53b316ca..520fedda1 100644 --- a/docs/devtools/index.html +++ b/docs/devtools/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        single-spa-inspector

        The single-spa-inspector is a Firefox/Chrome devtools extension to provide utilities for helping with single-spa applications. Github project.

        diff --git a/docs/ecosystem-alpinejs/index.html b/docs/ecosystem-alpinejs/index.html index 28bf4216b..69bdbef44 100644 --- a/docs/ecosystem-alpinejs/index.html +++ b/docs/ecosystem-alpinejs/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        single-spa-alpinejs

        single-spa-alpinejs is a helper library for mounting alpinejs components as diff --git a/docs/ecosystem-angular/index.html b/docs/ecosystem-angular/index.html index 2138a3d87..17bb577f8 100644 --- a/docs/ecosystem-angular/index.html +++ b/docs/ecosystem-angular/index.html @@ -14,8 +14,8 @@ - - + +

        Version: 6.x

        single-spa-angular

        Project Status​

        diff --git a/docs/ecosystem-angularjs/index.html b/docs/ecosystem-angularjs/index.html index 8f94edab9..686740fb2 100644 --- a/docs/ecosystem-angularjs/index.html +++ b/docs/ecosystem-angularjs/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        single-spa-angularjs

        single-spa-angularjs is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for use with AngularJS. Check out the single-spa-angularjs github.

        diff --git a/docs/ecosystem-backbone/index.html b/docs/ecosystem-backbone/index.html index 31dddbf46..311734feb 100644 --- a/docs/ecosystem-backbone/index.html +++ b/docs/ecosystem-backbone/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        single-spa-backbone

        A single-spa helper library which provides lifecycle events for building single-spa applications using Backbone.

        diff --git a/docs/ecosystem-css/index.html b/docs/ecosystem-css/index.html index e640c9f8f..966f7eb47 100644 --- a/docs/ecosystem-css/index.html +++ b/docs/ecosystem-css/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        CSS

        In a microfrontends architecture, it's important to have both shared CSS and microfrontend-specific CSS. There should only be one copy of all shared CSS, and CSS specific to a microfrontend should be scoped so that class names do not collide between microfrontends.

        diff --git a/docs/ecosystem-cycle/index.html b/docs/ecosystem-cycle/index.html index 556ee9f60..dc53e7a22 100644 --- a/docs/ecosystem-cycle/index.html +++ b/docs/ecosystem-cycle/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        single-spa-cycle

        single-spa-cycle is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for for use with Cycle.js. Check out the single-spa-cycle github.

        diff --git a/docs/ecosystem-dojo/index.html b/docs/ecosystem-dojo/index.html index 20560f0ef..d67e61ed0 100644 --- a/docs/ecosystem-dojo/index.html +++ b/docs/ecosystem-dojo/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        single-spa-dojo

        Build Status

        diff --git a/docs/ecosystem-ember/index.html b/docs/ecosystem-ember/index.html index c9a44db55..01869a9b7 100644 --- a/docs/ecosystem-ember/index.html +++ b/docs/ecosystem-ember/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        single-spa-ember

        single-spa-ember is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for use with Ember.js. Check out the single-spa-ember github.

        diff --git a/docs/ecosystem-html-web-components/index.html b/docs/ecosystem-html-web-components/index.html index a0db88042..bbe3679d4 100644 --- a/docs/ecosystem-html-web-components/index.html +++ b/docs/ecosystem-html-web-components/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        single-spa-html

        single-spa-html is a helper library for mounting raw HTML and web components as diff --git a/docs/ecosystem-inferno/index.html b/docs/ecosystem-inferno/index.html index 73c939f39..2959a2e4b 100644 --- a/docs/ecosystem-inferno/index.html +++ b/docs/ecosystem-inferno/index.html @@ -14,8 +14,8 @@ - - + +

        Version: 6.x

        single-spa-inferno

        single-spa-inferno is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for for use with Inferno. Check out the single-spa-inferno github.

        diff --git a/docs/ecosystem-leaked-globals/index.html b/docs/ecosystem-leaked-globals/index.html index e06cec218..35e1e1b45 100644 --- a/docs/ecosystem-leaked-globals/index.html +++ b/docs/ecosystem-leaked-globals/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        single-spa-leaked-globals

        single-spa-leaked-globals is a helper library for dealing with single-spa-applications diff --git a/docs/ecosystem-preact/index.html b/docs/ecosystem-preact/index.html index 46c390e7a..15e65fa04 100644 --- a/docs/ecosystem-preact/index.html +++ b/docs/ecosystem-preact/index.html @@ -14,8 +14,8 @@ - - + +

        Version: 6.x

        single-spa-preact

        single-spa-preact is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for for use with Preact. Check out the single-spa-preact github.

        diff --git a/docs/ecosystem-react/index.html b/docs/ecosystem-react/index.html index 162655e58..612358623 100644 --- a/docs/ecosystem-react/index.html +++ b/docs/ecosystem-react/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        single-spa-react

        Build Status

        diff --git a/docs/ecosystem-riot/index.html b/docs/ecosystem-riot/index.html index 8212a58e5..1dcb087a6 100644 --- a/docs/ecosystem-riot/index.html +++ b/docs/ecosystem-riot/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        single-spa-riot

        single-spa-riot is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for for use with riot. Check out the single-spa-riot github.

        diff --git a/docs/ecosystem-snowpack/index.html b/docs/ecosystem-snowpack/index.html index e2579128d..42f8fc23b 100644 --- a/docs/ecosystem-snowpack/index.html +++ b/docs/ecosystem-snowpack/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        Snowpack

        Snowpack is a tool for both local development and the building of applications. It uses in-browser ES modules during development, and then bundles with webpack (or other build tools) for production.

        diff --git a/docs/ecosystem-svelte/index.html b/docs/ecosystem-svelte/index.html index 089fd641e..8d2bc34d0 100644 --- a/docs/ecosystem-svelte/index.html +++ b/docs/ecosystem-svelte/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        single-spa-svelte

        single-spa-svelte is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for for use with svelte. Check out the single-spa-svelte github.

        diff --git a/docs/ecosystem-vite/index.html b/docs/ecosystem-vite/index.html index d79e0e360..1ceb0c1ee 100644 --- a/docs/ecosystem-vite/index.html +++ b/docs/ecosystem-vite/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        Vite

        Vite is a tool for both local development and the building of applications. It was created within the Vue ecosystem, but can be used with other UI frameworks, too.

        diff --git a/docs/ecosystem-vue/index.html b/docs/ecosystem-vue/index.html index 315ec034e..dc713d893 100644 --- a/docs/ecosystem-vue/index.html +++ b/docs/ecosystem-vue/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        single-spa-vue

        single-spa-vue is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for use with Vue.js. Check out the single-spa-vue github.

        diff --git a/docs/ecosystem/index.html b/docs/ecosystem/index.html index d52271060..772181772 100644 --- a/docs/ecosystem/index.html +++ b/docs/ecosystem/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        The single-spa ecosystem

        The single-spa ecosystem is quickly growing to support as many frameworks and build tools as possible.

        diff --git a/docs/examples/index.html b/docs/examples/index.html index 5cb3de8e9..e2e128d82 100644 --- a/docs/examples/index.html +++ b/docs/examples/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        Single-spa Examples

        Core team examples​

        diff --git a/docs/faq/index.html b/docs/faq/index.html index 01a25fd39..b94d9c2e2 100644 --- a/docs/faq/index.html +++ b/docs/faq/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        Frequently Asked Questions

        What does single-spa do?​

        diff --git a/docs/getting-started-overview/index.html b/docs/getting-started-overview/index.html index 56aefbeb3..1bc91d029 100644 --- a/docs/getting-started-overview/index.html +++ b/docs/getting-started-overview/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        Getting Started with single-spa

        JavaScript Microfrontends​

        diff --git a/docs/glossary/index.html b/docs/glossary/index.html index 2b8145baa..94036b157 100644 --- a/docs/glossary/index.html +++ b/docs/glossary/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        Glossary

        Activity Function
        Application
        Application
        Helpers
        are a library that already implements single-spa lifecycle functions for a specific framework.
        Lifecycles
        module loader
        Microservices
        registerApplication
        diff --git a/docs/index.html b/docs/index.html index 2ddf898dd..5c3fc15f2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -14,8 +14,8 @@ - - + +
        diff --git a/docs/layout-api/index.html b/docs/layout-api/index.html index ca1b0c3ac..5952e0976 100644 --- a/docs/layout-api/index.html +++ b/docs/layout-api/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        Layout Engine API

        The single-spa-layout library exposes several javascript functions as a public API.

        diff --git a/docs/layout-definition/index.html b/docs/layout-definition/index.html index 1c83a41ea..729182a9e 100644 --- a/docs/layout-definition/index.html +++ b/docs/layout-definition/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        Layout Definition

        A layout is a combination of HTMLElements, routes, and single-spa applications. Layout is defined statically in your root config to handle your top level routes and dom elements. Single-spa-layout should not be used outside of the root config; instead, a UI framework (React, Angular, Vue) should handle layouts within the applications.

        diff --git a/docs/layout-overview/index.html b/docs/layout-overview/index.html index a2aff1478..351beac01 100644 --- a/docs/layout-overview/index.html +++ b/docs/layout-overview/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        Layout Engine

        Introduction​

        diff --git a/docs/microfrontends-concept/index.html b/docs/microfrontends-concept/index.html index ba0275a22..a877c9d53 100644 --- a/docs/microfrontends-concept/index.html +++ b/docs/microfrontends-concept/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        Concept: Microfrontends

        diff --git a/docs/migrating-existing-spas/index.html b/docs/migrating-existing-spas/index.html index bebd2bbcd..f8adc6c16 100644 --- a/docs/migrating-existing-spas/index.html +++ b/docs/migrating-existing-spas/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        Migrating existing SPAs

        If you're interested in migrating existing SPAs into a single-spa, you'll diff --git a/docs/module-types/index.html b/docs/module-types/index.html index 4e937b9cb..8eb3c0da6 100644 --- a/docs/module-types/index.html +++ b/docs/module-types/index.html @@ -14,8 +14,8 @@ - - + +

        Version: 6.x

        Concept: single-spa Microfrontend Types

        diff --git a/docs/next/index.html b/docs/next/index.html index 80708160c..bc21fda9f 100644 --- a/docs/next/index.html +++ b/docs/next/index.html @@ -14,8 +14,8 @@ - - + +
        diff --git a/docs/parcels-api/index.html b/docs/parcels-api/index.html index 7e18e26b3..d63ef1131 100644 --- a/docs/parcels-api/index.html +++ b/docs/parcels-api/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        Parcels API

        Most parcel methods will be called on the parcel itself, with the exception being around mounting.

        diff --git a/docs/parcels-overview/index.html b/docs/parcels-overview/index.html index fee7e6de2..730ba6681 100644 --- a/docs/parcels-overview/index.html +++ b/docs/parcels-overview/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        Parcels

        Parcels are an advanced feature of single-spa. We recommend that you use applications as the primary type of microfrontend in your architecture. See this explanation for more details

        diff --git a/docs/recommended-setup/index.html b/docs/recommended-setup/index.html index d52e2ec83..3aead1489 100644 --- a/docs/recommended-setup/index.html +++ b/docs/recommended-setup/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        The Recommended Setup

        The single-spa npm package is not opinionated about your build tools, CI process, or local development workflow. However, to implement single-spa you will have to figure all of those things out (and more). To help you decide how to approach these problems, the single-spa core team has put together a "recommended setup" that gives an opinionated approach to solving the practical problems of microfrontends.

        diff --git a/docs/separating-applications/index.html b/docs/separating-applications/index.html index 60e3236cb..f44f4e99b 100644 --- a/docs/separating-applications/index.html +++ b/docs/separating-applications/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        Splitting up applications

        In a large, microserviced system, your root single-spa configuration and each of the applications should probably have its own git repository. How to do that in a JavaScript project isn't necessarily clear, so some options are listed below.

        diff --git a/docs/shared-webpack-configs/index.html b/docs/shared-webpack-configs/index.html index 3ba0ab254..2fca719e4 100644 --- a/docs/shared-webpack-configs/index.html +++ b/docs/shared-webpack-configs/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        Shared Webpack configs

        single-spa also publishes a few shared Webpack config packages that include basics needed for creating single-spa applications. These configs are used by applications generated with create-single-spa, and can be used as a starting point to extend/modify a custom configuration for your organization/team.

        diff --git a/docs/single-spa-playground/index.html b/docs/single-spa-playground/index.html index f3d950ce4..0afb1a259 100644 --- a/docs/single-spa-playground/index.html +++ b/docs/single-spa-playground/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        single-spa-playground

        Playground website

        diff --git a/docs/ssr-overview/index.html b/docs/ssr-overview/index.html index 704b27ef1..655fecc19 100644 --- a/docs/ssr-overview/index.html +++ b/docs/ssr-overview/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        Server Side Rendering

        Intro to SSR​

        diff --git a/docs/testing/e2e/index.html b/docs/testing/e2e/index.html index a30ca3c81..bbd45849e 100644 --- a/docs/testing/e2e/index.html +++ b/docs/testing/e2e/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        E2E testing

        info

        As microfrontends gain widespread adoption, testing tools will catch up and the testing story will improve.

        diff --git a/docs/testing/units/index.html b/docs/testing/units/index.html index 579d06bf4..a5b74fd71 100644 --- a/docs/testing/units/index.html +++ b/docs/testing/units/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        Unit testing

        info

        As microfrontends gain widespread adoption, testing tools will catch up and the testing story will improve.

        diff --git a/docs/videos/index.html b/docs/videos/index.html index d471440af..015f646d8 100644 --- a/docs/videos/index.html +++ b/docs/videos/index.html @@ -14,8 +14,8 @@ - - + +
        Version: 6.x

        Video Tutorials

        A variety of video tutorials exist from both the single-spa core team and other community members.

        diff --git a/error/index.html b/error/index.html index a39d26d55..a69d5939d 100644 --- a/error/index.html +++ b/error/index.html @@ -14,8 +14,8 @@ - - + +
        No code query param specified. Could not show error page.
        diff --git a/help/index.html b/help/index.html index 8a5649131..3769bb50b 100644 --- a/help/index.html +++ b/help/index.html @@ -14,8 +14,8 @@ - - + +

        Need help?

        If you need help with single-spa, you can try one of the mechanisms below.

        Browse Docs

        Learn more about single-spa using the official docs

        Slack

        You can join the conversation on Slack on one of our channels: #general for user help and #maintainers for contributing help.

        Github

        At our GitHub repo Browse and submit issues or pull requests for bugs you find or any new features you may want implemented. Be sure to also check out our contributing information.

        Phone call / Consulting

        Paid, hands-on consulting with a single-spa core team member is available. Our core team members have done this before and can help you set up single-spa. Services range from a one hour debugging session to an ongoing relationship while you're seeing your project to completion. Inquire at singlespa.info@gmail.com.

        Stack Overflow

        Use the single-spa tag on StackOverflow.

        Twitter

        You can follow and contact us on Twitter.

        diff --git a/index.html b/index.html index afd36bf90..ca28b91d2 100644 --- a/index.html +++ b/index.html @@ -14,8 +14,8 @@ - - + +

        single-spa

        A javascript router for front-end microservices

        Get StartedBaseplate HostingJoin Slack Chat
        Framework freedom

        Framework freedom

        Use multiple frameworks in a single-page application, allowing you to split code by functionality and have Angular, React, Vue.js, etc. apps all living in harmony.

        Lazy load applications

        Lazy load applications

        Stand up new apps next to the old one. You write the applications, single-spa makes them work together and won't load them until they're needed.

        Front-end microservices

        Front-end microservices

        Combine many small apps, empowering teams to choose their technology. Stay nimble as your team, product, and tech stack grows and changes over time.

        Who's Using This?

        This project is used by all these organizations

        More single-spa Users
        diff --git a/languages/index.html b/languages/index.html index c08900bb1..847d86984 100644 --- a/languages/index.html +++ b/languages/index.html @@ -14,8 +14,8 @@ - - + +

        Languages

        The single-spa documentation is available in the following languages:

        English

        Portuguese (Portugal)

        Simplified Chinese

        Spanish

        Russian

        Indonesian

        French

        Don't see your language above?Let us know.
        diff --git a/privacy/single-spa-inspector-privacy-policy/index.html b/privacy/single-spa-inspector-privacy-policy/index.html index 42e8fdd7f..bb47cfff0 100644 --- a/privacy/single-spa-inspector-privacy-policy/index.html +++ b/privacy/single-spa-inspector-privacy-policy/index.html @@ -14,8 +14,8 @@ - - + +