Iframe Microfrontends: Intro and Setup

This is going to be split into several articles.

There's a bunch of ways of implementing microfrontends and all the kool kids on the block do it. Well, let's get our hands dirty and see how a microfrontend can be implemented using perhaps one of the ugliest simplest way possible, using iframes. What are the cons of such approach? You get a page inside a page, with all additional requests that come out of it. Want a button in an iframe built with Vue? Have fun loading as many Vue runtimes as there are buttons on your page. If it's just a button, you'd more likely be better off with web components, but I digress. The advantages of iframes are obvious too: rock solid isolation, so it is safe to load even Angular inside one, it won't monkey patch your main window or react in any way to something that's happening outside the iframe. And since sometimes the number of files loaded is not really an issue (i.e. your developing a desktop app and not a web app), iframes can be a viable choice for building microfrontends (you could prove me wrong though).

What we're building

So, what we're going to build is an Angular application which interacts with The Bored API and uses a React application inside an iframe to display results. The requests will be triggered by clicking the button in the React app. Moreover we will make the React app a standalone application, so it can function even when accessed as a separate application. It is going to determine if it's loaded as a module of the shell or a separate application.

The tools

We're going to use Nx, it is an indredible tool for monorepo, which fits our needs, since it can work with both React and Angular, and will allow us to share code using libraries.

Let's do this!

First of all we're going to create an empty nx workspace for developing applications:

npx create-nx-workspace@latest demo__nx-iframe-microfrontends --preset=apps

Our next step is adding Angular and React plugins and concurrently package, so we can run two applications simulaneously:

npm install -D @nrwl/angular @nrwl/react concurrently

Also let's update scripts section so we can use nx in the command line:

// package.json
"scripts": {
    ...
    "nx": "nx",

Having added nx to scripts and with plugins ready, we can now proceed to creating the Angular application, which will serve as a shell:

npm run nx -- g @nrwl/angular:app angular-shell --style=scss --routing --prefix=app

React application to display our bored-api request results:

npm run nx -- g @nrwl/react:app react-app --style=scss --routing

And a library which will be used to share models between the two frontend apps:

npm run nx -- g @nrwl/js:library models

With both applications ready, it is time to update the scripts section of package.json once again, so they can be run at the same time using the concurrently package:

"scripts": {
    "start": "concurrently --kill-others \"nx serve react-app\" \"nx serve angular-shell --port=4201\"",

So we'll have React on port 4200, which is default and Angular on 4201.

That's it for the first part, in the next one we'll work on React app and prepare it.