This Repo has been provided for test and experimental purposes so needs more considerations for Production
First of all please read my Medium.com article generally about Micro Front-Ends also describes this repo in detail.
Please be informed that the ideal is that every subdirectory in this repo (container
, vehicles
, vendors
) maintain or develop separately and we won't have a mono repo or something like that.
After my recent commits, I've changed the common
directory to vendors
, and to makes consistency, port numbers have been changed.
container(entrypoint): 8000
vendors: 8001
vehicles(app): 8002
renderer: 8888
vendors app carries out our application common scripts like axios
, Vue
, React
, or any other common libraries between apps.
Entrypoint of application is here. The Container is a conjunction for other apps and has a magic file frame.js
which will pull and up relative apps.
vehicles
is a simple app with lazy loading. applications development should be start from here, apps will build separately and they will be joined together by Container application.
One of Micro Front-End concerns is SEO. search engines will not wait for rendering page's javascript and javascript will skip on the crawling process. we need to prerender our pages and present them to the crawler.
I've used rendertron which built with puppeteer, to prerendering the pages.
rendertron doesn't have Dockerfile already, I've forked the project and prepared a Dockerfile, you can see here. It has been configured to cache pages in memory and also dockerized the rendertron to render pages with pass proxy.
Please read the rendertron docs.
applications have been dockerized and you can build and up with docker-compose
or whatever you preferred.
rendertron in this set-up is private and it's not accessible from out of docker-host.
$ docker-compose up