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

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

Primary LanguageTypeScriptOtherNOASSERTION

⚡ 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

📚 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

Frontend screenshot

📶 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

📁 License

  • THE BEER-WARE LICENSE

✉️ Contact