Micro Frontends as Web Components

Pijus — Mon, 24 Jan 2022 15:19:15 +0000

Quite recently, I had a task to develop a bunch of reusable components for the blockchain space and compress them into a single NPM package.

The problem was that we had a lot of different teams with their preferred development stack. Now, my mission was to glide through this obstacle in the most efficient way possible, so what do I choose?

takes off the hat

Quite right - micro frontend infrastructure.

Structure

The idea is to make a monorepository which would contain applications that will act as reusable components in a form of IFrames (inline frames) deployed to Vercel and packaged through Stencil.js framework.

Monorepository

I think it's wise to reuse UI components, styles, and configuration files where necessary. In other words, let's not make cross-functional teams into cross dysfunctional ones.

apps/
├─ cool-app-a/
├─ cool-app-b/
common/
├─ config/
├─ ui/
├─ tsconfig/

Deployment

Vercel allows deploying applications from monorepository in a breeze.

Components

Now that we have deployment links for each application we can package them into NPM package via Stencil.js framework through IFrames.

First of all, initialize the stencil project and remove all the boilerplate code. Then, create deployments.json file at the top directory with the structure as so:

{
    "deployments": [
       {
         "name": "ComponentName",
         "tag": "component-tag-name",
         "deployment": "URL" 
       },
       ....
    ]
}

This will act as our configuration file for our components.

In the root directory add the utility folder with populate.js script and package.json.

utility/
├─ populate.js
├─ package.json

In the package.json add { "type": "module" }.

As an advocate of automatization, I made a script to handle the creation of stencil components. This is the populate script:

import * as fs from 'fs';
import configuration from '../deployments.json';

configuration.deployments.forEach(app => {
  fs.writeFile(`src/components/${app.tag}.tsx`, getTemplate(app), (err) => {
    if (err) {
      console.log("🔴 ", error);
    } else {
      console.log(`✅  Component "${app.name}" populated.`)
    }
  });
})


function getTemplate(configuration) {

  return `
    import { Component, h } from '@stencil/core';

    @Component({
      tag: "${configuration.tag}",
      styleUrl: 'global.css'
    })
    export class ${configuration.name} {

      render() {
        return (
          <iframe src="${configuration.deployment}"
                  frameBorder="0">
          </iframe>
        );
      }
    }
    `
}

So what happened here? We are taking deployment variables, adding them to the boilerplate template, and writing everything into the components folder. Simple and neat.

Now, to make our work easier, in the root level package.json add a new script to handle the population of components.

"scripts": {
    "populate": "node --experimental-json-modules  utility/populate.js"
    ...
  },

Run npm run populate && npm run build and publish your component library to NPM.

👋

DEV Community: Pijus

Micro Frontends as Web Components

Structure

Monorepository

Deployment

Components