Introduction to Deploying Angular MFEs with Netlify

This series of articles will aim to showcase the process of scaffolding and deploying a Micro Frontend Architecture using Nx and Netlify.

Articles in this series

• Introduction to Deploying MFEs with Netlify
• Scaffold and Deploy the Dashboard to Netlify
• Build and Deploy the Remote Applications to Netlify (coming soon)
• Integrate the Remote apps with the Dashboard (coming soon)

What we’ll build

Here is a short video introducing this series of articles and showcasing what we’ll build.

It’s a pretty straightforward system consisting of three independently deployed applications, with one composing the other two into a complete system, taking full advantage of Module Federation to do so.

We’ll build:

• A login application
• A “todo” application (it won’t function, just serve as a placeholder)
• A dashboard application (which will combine the above too MFEs!)

How we’ll build it:

• Use Nx’s MFE generators to scaffold out the architecture with Angular
• Use Nx for increased developer experience as we build each application
• Link the applications in the Dashboard’s webpack config Deploy to Netlify

We’ll cover what Micro Frontends (MFEs) are, some terminology that you’ll see a lot, what Netlify is and how to use it in this context, and, finally, we’ll scaffold out the applications that will complete the architecture. Let’s dive in!

What are MFEs?

In short, Micro Frontend Architecture is the composition of multiple, independently-deployed frontend applications into a single application.

It can help to picture this in the scenario that allows multi-development team organisations to focus on their own application, giving them more autonomy over their application's direction and release schedule. This application can then be used by other teams easily.

It’s like super-charged iframes but with more securities and benefits along for the ride.

Note: If you’d like a fuller definition, you can read more at micro-frontends.org

What is Netlify?

In their own words, Netlify is a web developer platform that multiplies productivity. It is an all-in-one platform for automating modern web projects. It does this by replacing your hosting infrastructure, CI and CD pipeline with a single workflow. It’s as easy as signing up and pointing a new project at a GitHub repository and telling Netlify your build command and the output location of your built files. Netlify will handle the rest.

In layman's terms, it allows you to deploy JAMStack sites to their network more efficiently. It comes with many benefits that are beyond the scope of this article. Things like Edge Networking using an advanced CDN that ensures accurate and up-to-date versions of your site by invalidating worldwide caches, the ability to deploy Serverless Functions alongside your application on the same platform and powerful integrations. It’s worth checking out their site to learn more about what they offer.

We’ll use their platform to deploy our Micro Frontend Applications because they essentially make it super simple to do so!

Setup our Nx MFE Workspace

Before we begin, ensure you have Yarn installed, as it will resolve the webpack dependencies better for Module Federation.

We’ll start by creating an empty Nx workspace:

npx create-nx-workspace@latest mfe-netlify --preset=empty --no-nxCloud --packageManager=yarn

This will create a new Nx Workspace in a new folder named mfe-netlify. Run cd mfe-netlify to enter the folder and you’ll see a Git repository has been created for you.

Next, we’ll add the Official Angular Plugin for Nx to our workspace.

yarn add @nrwl/angular 

Let’s commit it to our repository.

git commit -am “chore: add nrwl angular dep” 

Next, you’ll want to push your local repository to your GitHub account.
NOTE: You can read how to do that here: https://docs.github.com/en/github/importing-your-projects-to-github/importing-source-code-to-github/adding-an-existing-project-to-github-using-the-command-line

The final step in this article is to get your Netlify account ready.

You can view a gif here (DEV validation is preventing direct upload here)

This will leave us in a good place to build out and deploy our solution. If you don’t already have a Netlify account, follow the instructions below:

• Go to https://app.netlify.com/
• Login using GitHub
• Follow the on-screen instructions, filling out the Get started form
• After submitting the form, click on Skip this step for now, below Deploy your first project.
• You’re all set to go!

Where next?

We’re in an excellent position now to build out and deploy each application in our Micro Frontend Architecture. We have our Nx Workspace, our GitHub Repository and our Netlify account, all ready to make some magic happen.

The following article in this series will focus on scaffolding our MFE-ready Dashboard application and deploying it to Netlify. Keep an eye on our blog and Twitter pages to be notified when it gets released. You can find links to these below.

Blog: https://blog.nrwl.io/
NxDevTools’ Twitter: https://twitter.com/NxDevTools
Nrwl’s Twitter: https://twitter.com/nrwl_io
Colum Ferry’s Twitter: https://twitter.com/FerryColum