Micro Frontends - Example of a blog system made in Stenciljs

This project is not about the blog system but about micro-frontends.

This simple project shows how to develop a parent system with external child components.

I created a blog project that consumes data and uses another component that is in a different folder, as if it were an npm package.

We can also develop and test each component in a unique way.

Structure

 BLOG__________________
|  ___________   ____  |<--- app main
| | Blog-item | |Wdgt| |
| |           | |    |<---Internal component
| |___________| |____| |
|___^__________________|
    |
    |
    External component

You will find 2 folders, one from the parent project called blog and another from the blog-item component.

Whenever you update the blog-item component, you should update the package in the blog application.

• npm update blog-item

Using this component

You will need to compile the blog-item component first, so go into the component folder and run the ** build **.

• cd blog-item
• npm run build

then enter the blog folder and update the package.

• cd ..
• cd blog
• npm install

in case of problem not to import.

• npm upgrade blog-item

and finally

• npm start