A sample repo of a micro frontend architecture using an Nx monorepo.
Run npm start
to fire up the apps.
- Run
npx create-nx-workspace@latest nxmfe
to create the repo. - Add the React schematic to the workspace:
npm i -DE @nrwl/react
. Generate a container app:npx nx g @nrwl/react:app container
. Make sure you add React Router to the container. - Install more dependencies:
npm i @mui/material @emotion/react @emotion/styled
. Createbootstrap.tsx
, updatemain.tsx
and move app-specific code toApp.tsx
. Build the Header component and add some dummy routes. - Generate the marketing app:
npx nx g @nrwl/react:app marketing
. Make sure you add React Router to the marketing app. Createbootstrap.tsx
, updatemain.tsx
and move app-specific code toApp.tsx
. Update theroot
id inindex.html
to_marketing-app
. - Setup
bootstrap.tsx
with amount
function. Render the app using themount
function if in a development environment. Add some special routing logic so the container and marketing apps stay in sync. Install the Material Icons:npm i @mui/icons-material
. Build out the Copyright, Landing and Pricing components. - Create
webpack.config.js
in both the container and marketing apps. Point each app'swebpackConfig
in its respectiveproject.json
to the appropriate configuration file. Make sure to explictly set a unique port for each app. Adddecl.d.ts
to container and declare the marketing module. Create the MarketingApp component which loads up the MFE. Lazily load the component for the base route. - Add the Angular schematic to the workspace:
npm i -DE @nrwl/angular
. Generate an auth app:npx nx g @nrwl/angular:app auth
. Make sure you add routing to the auth app.