Micro Frontends with Podium

How to build micro frontends in React, Vue.js, and Web Components using Podium for server-side composition

Micro frontends

The idea behind micro frontends is to think about a website or web app as a composition of features that are often owned by independent teams. An excellent place to start reading up on micro frontends is here.

Podium

Podium is a framework for composing micro frontends on the server-side, developed and maintained by the Norwegian company Finn.no for their classified ads site. It is implemented in JavaScript and runs on Node.js. A quick read-through their documentations and guides is a good place to start.

The setup

The goal is creating something suitable for an organisation with multiple autonomous teams, both vertical and horizontal, each responsible for their domain. Let’s assume we’re working in a company with multiple teams, whereas three of them are called Team Loans, Team Data, and Team Frontend. The former team is responsible for all apps related to loans. The latter two are working on common components used by all verticals like the header, generic feedback component, and UI-components from the design-system.

Just for fun, and to prove that using micro frontends makes it possible to be more framework agnostic, Team Loans use React, Team Feedback use Vue.js, and Team Frontend builds most of their components as pure Web Components.

Please note. This is a how-to-guide, not a deep evaluation of either Podium, React, or Vue.js. I’ll leave that up to better and more experienced developers. Also, this guide is written mainly because I wanted to learn more about both micro frontends and Podium, not because I’m an expert. If you find something I should change, please head over to the discussion on GitHub and help me make both the article and the example repo better.

What we are building

A simple page representing the loan vertical. The page (or more precisely the layout) consist of a header, some main content, and a feedback component.

All code below is also available on GitHub.

Header, our first podlet

Before starting to add frameworks as React, Vue, and Web Components into the mix, let’s start a little simpler with just the basics.

In a folder of your choice (my choice was /learning-podium) run the following:

$ mkdir -p team-frontend/header
$ touch team-frontend/header/header-podlet.js
$ cd team-frontend/header
$ npm init

After following the prompts and accepting the defaults we need to install the basic dependencies, express and @podium/podlet.

$ npm install express @podium/podlet

Now, create the following header-podlet.js in /header:

For a detailed description of the different parts of this podlet please read the Podium getting started guide for podlets.

That’s all you need. Run the following …

$ node header-podlet

… and check out the running podlet in a browser at http://localhost:7100.

Our first layout

The layout server is the user-facing web app and is responsible for fetching content from podlets, rendering a page, and error handling. For now let’s assume it is a good idea that Team Loan need their own layout server, responsible for the loan domain.

Inside the root folder create the following files and folders:

$ mkdir -p team-loans/layout
$ touch team-loans/layout/loans-layout.js

Similar to podlets we need to initialize a npm project and install some dependencies…

$ cd team-loans/layout
$ npm init
$ npm install express @podium/layout

…and some code for the layout server.

For a detailed description of the different parts of this layout please read the Podium getting started guide for layouts, but note that we are fetching and adding the header podlet.

To test it out run the following …

$ cd team-loans/layout
$ node loans-layout

… and check out the result in a browser at http://localhost:7000/loans. If you stopped the header-podlet you need to start it again.

More podlets

The Feedback podlet from Team Data is up next. Inside the root folder create the following files and folders:

$ mkdir -p team-data/feedback
$ touch team-data/feedback/feedback-podlet.js

Again, we need to initialize an npm project and install some dependencies…

$ cd team-data/feedback
$ npm init
$ npm install express @podium/podlet

…and some code for the feedback podlet.

For good measure, lets test it out running the following commands …

$ node feedback-podlet

… and check out the result in a browser at http://localhost:7200.

Last step is to add our new feedback podlet to the loan layout. In team-oans/layout/loans-layout.js change to the following:

Restart the loans-layout and check it out 🚀

Team Loan and their podlet

We already created the layout Team Loan is responsible for, but they also have their own podlet (which we later will transform into a React application).

$ cd team-loans
$ mkdir my-loans
$ touch my-loans/my-loans-podlet.js

Now, lets initialize an npm project and install dependencies for podlets …

$ cd my-loans
$ npm init
$ npm install express @podium/podlet

… and some code for my-loans-podlet.js

Before adding the new podlet to our layout let’s make sure it runs as expected…

$ cd my-loans
$ node my-loans-podlet

… in a browser at http://localhost:7300.

Now we can add our new my-loans podlet to the loan layout. In team-loans/layout/loans-layout.js change to the following:

Restart the loans-layout and check it out the layout consisting of the header- my-loans-, and feedback-podlet.

React

Team Loans are using React as their preferred frontend library and we are finally getting into the fun part of this guide. How to do Server side composition in Podium of micro frontends in React.

We are using create-react-app here and the quickest way to add a react app in /my-loans is to first delete the folder and all files inside it. Don’t worry, we will recreate our my-loans-podlet.js later on. It needs some breaking changes anyway.

The following commands deletes the /my-loans and creates a React-application…

$ cd team-loans
$ rm -rf my-loans
$ npx create-react-app my-loans --use-npm

There are a few things we need to change before Podium and our React app work together. It won’t be an issue in this guide because we have only one React app, but the divs where React renderse the application need to bee unique.

Change the id in team-loans/my-loans/public/index.html

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="myLoansPodletRoot"></div>
</body>

and in team-loans/my-loans/src/index.js

ReactDOM.render(
    <React.StrictMode>
        <App />
     </React.StrictMode>,
     document.getElementById('myLoansPodletRoot')
);

Next step is to add our podlet back. Run…

$ cd my-loans
$ npm install express @podium/podlet

…and add the following file my-loans/my-loans-podlet.js

The new parts of this file are handling the assets needed for running the React application. The files we are looking for from the build are the files in the entrypoint section in the asset-manifest.json file.

It’s recommend that the podlet publish its assets to a CDN and then put the url for the CDN into the manifest file thereby offloading the burden of serving files from the podlet, but in this guide we let the podlet serve its own assets by utilizing Express and its ability to serve static files.

When we restart our my-loans-podlet you will notice that something ain’t quite right yet. All files are loaded but only the CSS have any effect. We need to make sure the JavaScript are loaded at the bottom of the page and not in <head>. To change this default behavior we need to use the Podium Document Template.

The final version of Add the parts in bold below in my-loans-podlet.js should look like this …

Now, go ahead and restart the podlet, and you should now see the React logo spinning at http://localhost:7300 😎

If you now restart the layout and check out http://localhost:7000/loans you will notice this still isn’t working just yet. The layout is using the same default html template as the podlet and we need to add the same changes to our layout. Change my-loans-podlet.js to the following…

… restart the layout, and go check out http://localhost:7300.

Vue

As mentioned before, Team Data are using Vue and the approach is basically the same as React.

As with the React application we start by deleting the existing feedback podlet before creating a new Vue application. Run the following commands…

$ cd teams-data
$ rm -rf feedback
$ npx @vue/cli create feedback

… and fire it up just to check everything is working …

$ cd feedback
$ npm run serve

… at http://localhost:8080/

We have the same issue with the id on the div so we need to change the id in team-data/feedback/public/index.html

<div id="feedbackPodlet"></div>

… in team-data/feedback/src/main.js …

new Vue({
  render: h => h(App),
}).$mount('#feedbackPodlet')

… and in App.vue …

<template>
  <div id="feedbackPodlet">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>
...
...
<style>
#feedbackPodlet {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

The id in App.vuedoesn’t have to be the same as in index.htmland main.js, because the mounted element will be replaced with Vue-generated DOM. Just make sure it’s unique. Next step is to add our podlet back. Run…

$ cd feedback
$ npm install express @podium/podlet

…and add the following file feedback/feedback-podlet.js

Vue doesn’t have a manifest file as React so we just pick up all CSS and JavaScript files in the dist folder. Remember to npm run build to create the production build files needed to fire up the podlet.

If you restart all podlets and the layout you should now see both the React application and the Vue application when visiting http://localhost:7000/loans 🏆

Web components

As mentioned above Team Frontend is responsible for the header and they are using Web Components. Next step is to create our Web Component …

$ cd team-frontend
$ mkdir src
$ touch src/header.js

… looking like this …

No build step required for this simple component, but we need to do some adjustments to header-podlet.js Change to the following:

Only some small changed here really. We make sure the <app-header></app-header>is returned as content from the podlet and we add the web component script through the js function.

Start the header podlet and restart the layout and check out the finished product, a server composition of micro frontends in React, Vue.js, and Web Component.

Final thoughts

If you get tired of stopping podlets and layouts, you could check out nodemon, or pm2.

We didn't handle any assets other than CSS and JavaScript, leaving the images out in the cold. I’m sure you could solve that on your own or wait for an update on this article. Even better; solve it and tell me how.

Let’s for a minute assume Team Data also were using React, and not Vue.js. In that case, we would need to handle the fact that both apps were pulling in React, bloating the frontend. A great tip in that regard is another library from the teams behind Finn.no called Eik.

Not exactly production-ready, but I learned a lot from writing this. Hope you learned something by reading it too.

Example code at GitHub

bjerkek/learning-podium

More content at plainenglish.io