tamascsaba / nx-micro-frontend-example-with-react-and-express

Nx monorepo with react based micro-frontends and express API.

⚡ Nx micro-frontend example with react and express

An NX monorepo using webpack module federation for developing micro-frontends that can be deployed independently.

📄 Table of contents

• ⚡ Nx micro-frontend example with react and express
  • 📄 Table of contents
  • 📚 Code structure
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 🆒 Features
  • 📋 Status & To-do list
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 Code structure

• API Data: The backend service stores data (like users or employees), and can return them on request.
• API Filter: The backend of this service can provide filters for the data API
• Frontend Data: The front-end of this service is responsible for displaying all information regarding the data. Selection criteria will be communicated from another service.
• Frontend Filter: Provides a select to load and present the data
• Shell: This is the host service which contains the Data and Filter frontends
• Employee library: Contains most of the employee related frontend logic
• Shares libraries: Common components, stores and interfaces

📷 Screenshots

📶 Technologies

• Nx Build framework used to create project workspace
• React A JavaScript library for building user interfaces
• Express Express is a minimal and flexible Node.js web application framework
• Nanostores State manager for React/RN/Preact/Vue/Svelte with many atomic tree-shakable stores
• Cypress E2E testing framework

💾 Setup

• npm i to install dependencies
• npm start start frontend dev server on http://localhost:4200/
• npm test run unit tests

🔧 Testing

• npm test run jest unit tests
• npm run e2e run cypress e2e tests

🆒 Features

• Monorepo shared libraries etc. makes for tidier code
• Cypress stores test screenshot in dist\cypress\apps\shell-e2e\screenshots\app.spec.ts\shell-data

📋 Status

• Status: Working.
• To-Do: Create more tests and organize files better

👏 Inspiration

• Dreevo: Angular Production - Build, Test & Deploy a Full Stack Application using Nx - Part I
• Dynamic micro frontends with Nx and React
• Nx Faster Builds with Module Federation

📁 License

• THE BEER-WARE LICENSE

✉️ Contact

• Repo created by Tamás Csaba