Micro Frontends as Web Components
Tags: stencil, npm, javascript, tutorial
Published: 2022-01-24 15:19:15



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](https://micro-frontends.org/) infrastructure. 

## Structure 

The idea is to make a [monorepository](https://en.wikipedia.org/wiki/Monorepo) 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](https://vercel.com/blog/monorepos) 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](https://stenciljs.com/) 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.


👋