Micro Frontend Pages
Simulate a micro frontend project using NodeJS, React and NGinx Reverse Proxy in Alpine Docker images
This project is based on my talk at JSConf.Asia 2018 about Micro Frontend applications.
Please make sure that you have Docker and Docker compose installed in your machine. After that, just run the command
$ docker-compose up # or "docker-compose up --build" # if you want to rebuild the containers
And, after that, you'll can check the performance of Docker images using
docker stats command.
About the folders
Every folder is part of the Micro Frontend Pages demo project. In this project we have 4 folders with connected content.
monolith is the default page of our project, so when you run the project using the commands:
nvm use # or make sure you are using NodeJS v8.1.4 npm install npm start
http://localhost:8000 you will see the web application with links for all other pages. This is the legacy code we are using as a base for our migration from monolith to microfrontend
NGinx is being used to make a reverse proxy, connecting every single page as only one application for the users. It's connected with all pages and related projects.
home-page is the default page of our project, so when you run the containers using
docker-compose up command and access
http://localhost:8888 you will see the main page or our project with links for all other pages
docs-page is the docs page of our project. The page is quite simple for now and it's one of the state in our project. You can access the page accessing
checkout-page is the checkout page of our project. The page is quite simple for now and it's one of the state in our project. You can access the page accessing
items-page is the list of items page of our project. The page has a list of items by category, linking to a specific page for a item in our project. You can access the list page accessing
http://localhost:8888/items and the list item page acessing
Wilson Mendes (willmendesneto)