micro-frontend

A proof-of-concept for frontend ~microservices~

Overview

This app is inspired by Cam Jackson's micro-frontend article with some changes and additions like:

• Micro-frontends are backed by individual node apps
• Global redux store implemented
• Leverages Docker
• Uses Lerna & Yarn workspaces to manage the monorepo
• No content server

Architecture:

Container app
| - Search (browse recipes) sub-app
| | - Uses global redux store
| - Recipe sub-app
| | - Connected to Mongo

Getting started

Requires:

• Docker

1. git clone this repo
2. Within the app dir, run docker-compose build
3. Then docker-compose up
4. To create the default MongoDB user, first sh in with docker exec -it database mongo
5. Copy, paste, and run the code from scripts/initMongo.js
6. To seed recipes, run:

   docker exec -it recipe-server node packages/recipe/scripts/seedRecipes.js
   

7. Load http://localhost:3000 in a browser
8. Take over the world with its web-scale

TODO:

• Env config for dev server ports
• Shared deps
  • Used by at least two apps: √react, √react-dom, redux, history, lodash
  • Share common dev dependencies w/ Lerna
• Scaffold Redux
  • Implement and share access across sub-apps
• Testing
  • Scaffold tests
  • Increase coverage to 70%
  • Coverage tool
• Add LESS/SCSS
• Add trivial DB interactions to show its use
  • Add auth (account, login/out)
• Add Nginx
  • Configure to serve static assets from each sub-app
• Experiment w/ Docker
  • Dockerfiles
  • Docker compose
  • Instead of serving prod version, enable dev w/ webpack dev servers
  • Docker prod config
  • Consolidate docker files
  • Fix classnames not being installed 😕
  • Use multi-stage builds to trim image size
• CI
  • Github actions/CircleCI for test/lint
  • Use for publish/build
• Prod build + deploy
  • Build and serve static files
  • Ship it to the world