Micro frontend app boilerplate

Key concepts:

• Web component
• Shadow root
• Module federation

How to use:

Start each micro frontend projects:

Go to folder of each project you can run

  pnpm install && pnpm start
  yarn install && yarn start
  npm install && npm start

Start or build all micro frontend projects:

Project use concurrently to run many script. You can check config in ./concurrently.js From root path you can run

  pnpm serve
  yarn serve
  npm run serve

  pnpm build
  yarn build
  npm run build

Assets:

I setup a Nodejs/Express project at ./share/assets/app.js. You need add your asset files of each project in specify folder Example: ./share/assets/images/solid-about.

Why we can not use asset files directly from project?

Because if we expose a web component and use it from another shell project. The shell project can not accessible to the asset files from micro frontend project by other origin url like below:

micro_url/assets/image.png => shell/assets/image.png

Frameworks supported & default projects:

I config/setup default projects for each supported framework. You need follow config/setup from specify project folder.## Supported frameworks:

• SolidJS
• ReactJS
• Vuejs
• Angular
• Svelte

Support frameworks(future):

• Lit
• Nextjs

Features(future):

• Monorepo with pnpm
• Shared package module federation
• Generate project with built-in CLI

Store management:

• Rxjs
• Setup in ./share/store

Design architecture:

Support

For support, email quangnv1311@gmail.com or create an issue in this repo.