Developing Microfrontends for web applications is slowly getting traction nowadays. As we all know, keeping frontends small as Microsfrontends has its ups and downs. Besides, managing their lifecycles and deployments are among the everyday challenges.
But have you ever considered using Serverless technologies to overcome some of these challenges?
In this article, I will walk you through using AWS serverless technologies to host and serve your Microfrontends.
As a little side-note: To keep UI consistent over different microfrontends and to save development time, I recommend you share and reuse UI components using tools like Bit (Github). Hopefully, I will address this subject in greater detail in future posts.
sharing reusable UI components with bit.dev
Hosting Microfrontends in Amazon S3
But there is one common limitation. That is, you can only host static Microfrontend artifacts (No server-side rendering) in Amazon S3.
However, it suits most of the modern frontend frameworks like Angular, ReactJS, VueJS, which we use to build Microfrontends.
Let’s look at a few tips that will help you when hosting Microfrontends in Amazon S3.
Routing and Caching for Microfrontends
Amazon CloudFront is one of the core services that plays several roles when serving Microfrotends for the outside world. One of the apparent features we get by default is the Content Delivery Network (CDN) capabilities to cache the Microfrontends closer to the end-users. Besides, Amazon CloudFront also provides the gateway capabilities to route requests to different Microfrontends. This feature is quite useful since we can route both Microfrontend and Microservice requests in one place, eliminating the need for separate gateway services.
Let’s look at all the capabilities Amazon CloudFront can fulfill relevant to Microfrontends.
When using Amazon S3 and CloudFront together, you need to consider invalidating the CloudFront cache for each deployment, unless you generate new filenames for each new deployment package.
If needed, invalidating the CloudFront cache is possible by using CloudFront CLI commands. These commands you can execute in the build pipeline for new deployments.
Besides, it is essential to consider managing the high availability of the Microfrontneds when doing a deployment. For instance, let’s consider the following two sequences we can use for the deployments.
In this particular scenario, the first sequence is preferred over the second, considering that the latter sequence has the possibility of downtime if a client accesses the Microfrontend in the middle of a deployment. Though it is likely to have a CloudFront cache hit in the latter scenario eliminating the downtime, it is better not fully dependent on it.