This content originally appeared on DEV Community and was authored by Pijus Rancevas
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 from 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 and deploy your components to NPM.
👋
This content originally appeared on DEV Community and was authored by Pijus Rancevas
Pijus Rancevas | Sciencx (2022-01-24T15:19:15+00:00) Micro Frontends as Web Components. Retrieved from https://www.scien.cx/2022/01/24/micro-frontends-as-web-components/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.