Micro-frontend App-shell for fabric-es

This is a sample web application for "fabric-es" project in micro-frontend architecture. This sample application has three main parts.

1. app-shell is responsible for user authentication, and data integration via apollo-client
2. gateway contains Dashboard component to display info from QueryHandler.
3. dev-net deploys the 2-org development network of "fabric-es" project.

Technology

• Nextjs 10.4
• Jest 26.x
• Apollo Client v3.x
• React 17
• Formik 2
• webpack 5.x
• Material-ui 4.x with JSS
• graphql-codegen
• Lerna

Features

• Server side rendering
• Custom server side as a reverse proxy
• JWT-based access token and refresh token
• GQL codegen
• Native Typescript
• Dockerized app-shell and gateway UI
• ESLint
• Prettier
• Jest testing

Getting Started

step 1: start dev-net

Bootstrap the 2-org fabric network, with 2 gw-org.

# at dev-net
# It deploys the dev-net for developing web UI
./dn-run.2-db-red-auth-gw.sh

# at root
npm install

# at app-shell
npm install

step 2a: Develop micro-frontend gateway

The micro-frontend gateway can be developed independently of app-shell. When developing mfe, the app-shell is not required to start. It will use mocked api, instead of writing / retrieving data from 'dev-net'. This is suitable for pure web ui development.

# gateway
npm install

# run micro-frontend gateway development mode
npm run dev

step 2b: Build micro-frontend gateway

After the building, the webpack creates the dist directory, for remote component. If additional component is later developed, please remind to modify the webpack.config.js to reflect the change.

# gateway/sidecar
npm install
npm run build

step 2c: Run micro-frontend gateway

After the development of mfe gateway, you may launch the local dev server, so that app-shell can later consume it. When running it, the hosting gateway next project can be optionally turned off.

# gateway/sidecar
npm start

step 3: Develop and run app-shell

When developing app-shell (except the remote componet), the mfe gateway is optionally running. Please make sure BOTH .env and .env.local are properly configured.

# app-shell
npm install
npm run dev

Dockerize

After finishing development, you may test the deployment, after finishing development. Notice that when running ./build-app-shell.sh, or ./build-mf-gateway.sh, ./dn-run.2-db-red-auth-gw-ui.sh, it will run ./cleanup.sh at the beginning. Previously persistence information in the dev-net will be gone.

# dev-net
# build app shell
./build-app-shell.sh

# build microfrontend gateway
./build-mf-gateway.sh

# run EVERYTHING in one go
./dn-run.2-db-red-auth-gw-ui.sh

As a testing purpose, you run below command to see if the images above are able to launch. But you should run them as an individual container directly; coz it cannot connect to docker network, created by docker-compose.

docker run -p 3000:3000 fabric-es/mf-shell
docker run -p 8082:8082 fabric-es/mf-gateway

Known Limitation

As the author of Module Federation, "Zack Jackson" points out that current version (v10.4) of NextJs is using webpack v4.x The Module Federation is webpack v5 feature. To workaround, here adopts the sidecar pattern to build the "remoteService" from the Next project. Whenever, Next upgrades to webpack v5, the sidecar can be removed.

Reference info / sample codes

• webpack module federation
• mfe introduction
• mfe samples
• Using Formik
• TS + Next + Graphql
• Next + Oauth2
• Next + Oauth2 + cookie
• Graphql Playground
• customized iql
• Starter project
• tutorial
• code example
• jwt + gql