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.
👋
Top comments (0)