-
-
Notifications
You must be signed in to change notification settings - Fork 234
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Start work on microfrontend hosting solutions blog post.
- Loading branch information
1 parent
8b4f7ca
commit 2cb2796
Showing
1 changed file
with
83 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| --- | ||
| title: Top 5 Microfrontend Hosting Solutions | ||
| author: Joel Denning | ||
| authorURL: https://x.com/joelbdenning | ||
| authorImageURL: https://avatars.githubusercontent.com/u/5524384 | ||
| --- | ||
|
|
||
| # Top 5 Microfrontend Hosting Solutions | ||
|
|
||
| Growing rapidly in recent years, microfrontends have become a critical solution for large software organizations. Hosting microfrontends has become a complicated, but crucial, aspect of scaling software organizations. 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. | ||
|
|
||
| ## 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](https://ferie.medium.com/what-is-the-client-side-rendering-and-how-it-works-c90210e2cd14). | ||
|
|
||
| [Server-side rendering](https://www.heavy.ai/technical-glossary/server-side-rendering) of microfrontends often involves one or more docker containers that run [NodeJS](https://en.wikipedia.org/wiki/Node.js) to render [React](https://en.wikipedia.org/wiki/React_(software)), [Angular](https://en.wikipedia.org/wiki/Angular_(web_framework)), or [Vue](https://en.wikipedia.org/wiki/Vue.js) applications. [Single-spa server rendering](/docs/ssr-overview) also supports a single NodeJS runtime (rather than network requests between docker containers), for optimal performance. | ||
|
|
||
| ## Solution comparison | ||
|
|
||
| | | [Baseplate Cloud](https://baseplate.cloud) | [Zephyr Cloud](https://zephyr-cloud.io/) | [S3 + Cloudfront](https://aws.amazon.com/blogs/networking-and-content-delivery/amazon-s3-amazon-cloudfront-a-match-made-in-the-cloud/) | [GCP Storage + Cloud CDN](https://cloud.google.com/cdn/docs/overview) | [Azure Storage + CDN](https://learn.microsoft.com/en-us/azure/cdn/cdn-create-a-storage-account-with-cdn) | | ||
| | ------------ | ---------------- | ----------- | --------- | --------- | ----- | | ||
| | Global availability | ✓ (via Cloudflare) | ✓ | ✓ | ✓ | ✓ | | ||
| | Web app hosting <sup>1</sup> | ✓ | ✓ | ✓ | ✓ | ✓ | | ||
| | Environments support <sup>2</sup> | ✓ | | (manual) | (manual) | (manual) | | ||
| | Autogenerated CI pipelines <sup>3</sup> | ✓ | | ✗ | ✗ | ✗ | | ||
| | Automated microfrontend creation | ✓ (via API and CLI) | | (manual) | (manual) | (manual) | | ||
| | Custom domains | ✓ (via DNS records) | | ✓ | ✓ | ✓ | ✓ | | ||
| | Route / layout management <sup>4</sup> | ✓ ([single-spa-layout template](/docs/layout-definition)) | | (manual) | (manual) | (manual) | (manual) | | ||
| | Self-owned assets storage <sup>5</sup> | ✓ (optional bring-your-own-s3-bucket) | | ✓ | ✓ | ✓ | | ||
| | Edge-side HTML rendering optimizations <sup>6</sup> | ✓ | | ✗ | ✗ | ✗ | | ||
| | Service discovery <sup>7</sup> | ✓ | | (manual) | (manual) | (manual) | | ||
| | CORS / CSP / Cache Control | ✓ (sensible defaults, fully customizable) | | ✓ | ✓ | ✓ | | ||
| | Usage metrics | ✓ | | (manual) | (manual) | (manual) | | ||
| | Full audit trail <sup>8</sup> | ✓ | | (manual) | (manual) | (manual) | | ||
| | Permissions management | ✓ (comprehensive, including microfrontend ownership) | | ✓ | ✓ | ✓ | | ||
| | Shared dependency management <sup>9</sup> | (planned) | | (manual) | (manual) | (manual) | | ||
| | Server rendering support | (planned) | | ✗ | ✗ | ✗ | | ||
| | Microfrontend marketplace <sup>10</sup> | (planned) | | ✗ | ✗ | ✗ | | ||
| | Rolling deployments <sup>11</sup> | (planned) | | ✗ | ✗ | ✗ | | ||
|
|
||
| 1. *Web apps hosting* refers to hosting the parent/root HTML file that initializes the microfrontends necessary for client-side rendering. | ||
| 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. *Auto-generated CI pipelines* refers to generating configuration files for [Github workflow](https://docs.github.com/en/actions/using-workflows), [Azure Pipelines](https://azure.microsoft.com/en-us/products/devops/pipelines), [Gitlab CI](https://docs.gitlab.com/ee/ci/) and other CI/CD tools. | ||
| 4. *Route / layout management* refers to managing the in-browser URL routes and DOM layout for microfrontends. | ||
| 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. *Edge-side HTML rendering optimizations* refers to dynamically changing the HTML file for a web app via code that runs in [edge locations](https://www.macrometa.com/articles/what-is-edge-side-rendering). Since edge locations are physically closer to most users than an origin server, this provides maximum performance beneifts. Performance benefits include inlining import maps, `<link rel=preload>`, and `<script>` elements so that the browser begins downloading the necessary resources for the current URL as quickly as possible. | ||
| 7. *Service discovery* refers to all available microfrontends easily cross-communicating with each other. This is often done via [import maps](https://github.com/WICG/import-maps) or other manifest files. | ||
| 8. *Full audit trail* refers to logs for all deployments, infrastructure changes, and configuration changes within the microfrontends system. | ||
| 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. *Microfrontend marketplace* refers to purchasing or installing pre-made microfrontends into a company's system. | ||
| 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. | ||
|
|
||
|
|
||
| ## 1. Baseplate Cloud | ||
|
|
||
| From the creator of single-spa, [Baseplate Cloud](https://baseplate.cloud/) is the premiere microfrontends hosting solution for single-spa and native browser module microfrontends. Baseplate Cloud's features are inspired by years of microfrontends and single-spa consultancies, to simplify and automate as much of the complexity as possible. | ||
|
|
||
| As a microfrontend-specific solution, Baseplate's feature-set is tailor-made for companies looking for a streamlined cloud hosting experience. 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 | ||
|
|
||
| [Baseplate CDN](https://baseplate.cloud/docs/cdn/assets) is a source-available [Cloudflare worker](https://developers.cloudflare.com/workers/) designed for maximum performance and best practices. It is globally available at all [Cloudflare edge locations](https://www.cloudflare.com/network/). | ||
|
|
||
| ## 2. Zephyr Cloud | ||
|
|
||
| From the creator of module federation, [Zephyr Cloud](https://zephyr-cloud.io/) is the premier hosting solution for module-federation-based microfrontends. | ||
|
|
||
| ## 3. AWS S3 + Cloudfront | ||
|
|
||
| Amazon Web Services (AWS) offers the low-level cloud services necessary for companies to set up a microfrontends hosting solution. | ||
|
|
||
| ## 4. GCP Storage + Cloud CDN | ||
|
|
||
| ## 5. Azure Storage + CDN | ||
|
|