diff --git a/blog/2024-03-18-top-5-microfrontend-hosting-solutions.md b/blog/2024-03-18-top-5-microfrontend-hosting-solutions.md new file mode 100644 index 000000000..b0ac6e60b --- /dev/null +++ b/blog/2024-03-18-top-5-microfrontend-hosting-solutions.md @@ -0,0 +1,102 @@ +--- +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 + +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](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. For optimal performance, [single-spa server rendering](/docs/ssr-overview) 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 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) | ✓ (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](/docs/layout-definition)) | (manual) | (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. *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, ``, and `