Top 5 Microfrontend Hosting Solutions blog post

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 <sup>1</sup> | ✓ | ✓ | ✓ | ✓ | ✓ |
+| Environments support <sup>2</sup> | ✓ | ✓ | (manual) | (manual) | (manual) |
+| Autogenerated CI pipelines <sup>3</sup> | ✓ | (planned)  | ✗ | ✗ | ✗ |
+| 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) | (manual) |
+| Self-owned assets storage <sup>5</sup> | ✓ (optional bring-your-own-s3-bucket) | ✓ | ✓ | ✓ | ✓ |
+| Edge-side HTML rendering optimizations <sup>6</sup> | ✓ | (planned) | ✗ | ✗ | ✗ |
+| Service discovery <sup>7</sup> | ✓ | ✓ | (manual) | (manual) | (manual) |
+| CORS / CSP / Cache Control | ✓ (sensible defaults, fully customizable) | (planned)  | ✓ | ✓ | ✓ |
+| Usage metrics | ✓ | (planned) | (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) | (planned) | ✗ | ✗ | ✗ |
+| Microfrontend marketplace <sup>10</sup> | (planned) | (planned) | ✗ | ✗ | ✗ |
+| Rolling deployments <sup>11</sup> | (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, `<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
+
+[Baseplate Cloud](https://baseplate.cloud/) tops the list for its ease of use and specific focus on single-spa hosting. Because it was made by the creator of single-spa, Baseplate's features have been informed by years of microfrontend and single-spa consultancies, making it the easiest microfrontend hosting choice for single-spa. Everything about the product simplifies and automates as much of the complexity as possible, and it’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](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 creators of Module Federation, [Zephyr Cloud](https://zephyr-cloud.io/) is the premier hosting solution for module-federation-based microfrontends. It is currently in closed alpha with little publicly documented about its features.
+
+## 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](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-overview.html) that acts as a public [CDN](https://en.wikipedia.org/wiki/Content_delivery_network), with a private [S3 bucket](https://aws.amazon.com/s3/) as the origin containing all static web files (Javascript, CSS, HTML) needed.
+
+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](https://cloud.google.com/storage?hl=en) and [GCP Cloud CDN](https://cloud.google.com/cdn/docs/overview).
+
+## 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](https://azure.microsoft.com/en-us/products/category/storage) and [GCP Cloud CDN](https://azure.microsoft.com/en-us/products/cdn).