Micro-frontend architectures decompose a front-end app into individual, semi-independent “microapps” working loosely together. This can help make large projects more manageable, e.g. when transitioning from legacy codebases.
in the root
- run
npm installwhich will be installing all project dependencies - run
npm startwhich will be starting all projects - open browser and browse
http://localhost:9000orhttp://localhost:9900( There are two different root projectsroot-configwhich is EJS template androot-config-htmlwhich is pure js and html )
- backend: [NestJs] : Serving backend for all projects, in reality there should be micro-services
- root-config [EJS Template] : Serving as shell to host all micro-frontend apps
- root-config-html [JS and Html] : Serving as shell to host all micro-frontend apps
- home [React] : A home page, that doesn't need any authentication and is the default app
- nav-bar [React] : Display Navbar on top of the app
- auth [Angular] : Angular app for login (and create new user, forget password in future)
- product [React] : Show the list and details of products
- sales [Angular] : Show the list and details of sales
Some Screenshots
- run
npx create-single-spa(or you can installcreate-single-spaglobally) - follow the prompts (for apps choose application/parcel)
- apply below changes based on the framework you chose
- in the react app update
startscript and add--port 9xxxto it - in the root-config project update
pc-root-config.tsfile and add the new app there - in the root-config project update
microfrontend-layout.htmlfile and add the new app there
- make sure you add below code to your app-routing.module.ts
providers: [
{ provide: APP_BASE_HREF, useValue: '/REPLACE-WITH-YOUR-ROUTE' }
]
- find and replace all
app-roottoxxx-app-rootwhich xxx is name of your app
- update package.json file and change
prepareto"prepare": "cd .. && husky install", npm i devextreme devextreme-react react-router-domnpm i @types/react-router-dom typescript@4.7 -D- update
webpack.config.jsand add below code to it
module: {
rules: [
{
test: /\.(png|gif|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader',
},
],
},
npm i url-loader- add
AuthGuardedRoute(like product app)
npm i devextreme devextreme-angular @ngneat/until-destroy- update
bodyin theindex.htmlto<body class="dx-viewport"> - add
"node_modules/devextreme/dist/css/dx.material.orange.light.css",to bothstylessections inangular.json - add a new script in
package.jsonas"serve": "ng serve",and update your existing start command to"start": "npm run serve:single-spa:xxx",which xxx is name of your app - comment out
import 'zone.js';in thepolyfills.ts - add session service and auth guard (like sales app)
- deploy to production
- creating in-browser utility modules for style guide
https://medium.com/swlh/developing-and-deploying-micro-frontends-with-single-spa-c8b49f2a1b1d https://blog.bitsrc.io/building-microfrontends-using-single-spa-framework-94019ca2fb4d
https://github.com/joeldenning/coexisting-angular-microfrontends