Micro frontends in 1 minute

I'm a big fan of reading docs & manuals before I try things especially when they are a bit more complex (advanced). However I know how much joy and motivation it gives when you get first positive experience fast (e.g. running working example). That's why I've decided to look into micro learning where you might scratch the surface, experience if it's for you and get some insights what's next if you want more.

Today I want to give you short introduction to micro frontends architecture starting from project structure setup. Following the words above let's get working example first. I will use real-life example - we will create a banking app consist of micro frontends.

🕒 Time start

First of all let's create an empty (None) NX workspace:

npx create-nx-workspace@latest

and get into it:

cd bank-mfe

Then let's add some framework to the NX workspace:

nx add @nx/angular

Now let's create apps folder to store all our micro frontends:

mkdir apps

and get into it:

cd apps

It's time to create our micro frontends:

nx g @nx/angular:host shell --remotes=account,payment,investment,mortgage,pension

🕒 Stop the time!

You did it! Your project consist of micro frontends! Now you can start and see it in browser by:

nx serve shell --open

If you actively develop/change given micro frontend remember to serve it with devRemotes like:

nx serve shell --open devRemotes=account

👨‍💻 Link to code example

Code example: https://github.com/sebgos/bank-mfe

Video: https://www.youtube.com/watch?v=Vyi8pjuuky0

I have used:

• https://nx.dev/
• https://angular.io/
• https://code.visualstudio.com/

Curious to get more insights on micro frontends? Let me know in the comments!