An Interest In:
Web News this Week
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
Micro Frontends as Web Components
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.
Original Link: https://dev.to/pijusr/micro-frontends-as-web-components-363f
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To