Micro Frontends Proof of Concept
Goals
- create portal-like application with top-header and left-side navigation bar
navigation bar has links that open sub-applications
- each sub-application can be implemented in different technology (like Angular 5, React 15 and React 16)
- we can render single sub-application in single page
- we can render many sub-applications in a single page
- each sub-application can be deployed independently and hosted on different servers
- CSS stylesheets are independent
- communication between sub-applications is possible
Modules
sub-app-angular
Angular 5 application. It a sub-application of the portal.
sub-app-react16
React 16 application. It a sub-application of the portal.
main-app
React 15 application. It is a template application, which aggregates sub-app-angular and sub-app-react16 as a portal.
Deployment
sub-app-angular
cd sub-app-angular
npm install
npm run build
npm run serve
Now bundles are available here: http://localhost:3001
sub-app-react16
cd sub-app-react16
npm install
npm run build
npm run serve
Now bundles are available here: http://localhost:3002
main-app
cd main-app
npm install
npm run build
npm run serve
Now the application is available here: http://localhost:3000