DonAdam2 / micro-frontend-second-inner-app

Example of creating app which is a remote entry of an app using webpack module federation

Table of Contents:

• Overview
• Prerequisites
• Installing & getting started
• How to create injectable module and expose it to parent sites
• Available scripts

Micro frontend second inner app

• Uses module federation plugin from webpack to create injectable module.
• This app is the remote entry of Micro frontend inner app

Note: This app uses live reloading for local development.

Prerequisites

• nodeJS > 14.X.X or Docker

Installing / Getting Started

Development (locally):

• Clone repo => git clone [e-mail]:react-custom-projects/webpack-react-boilerplate.git
• Navigate to project directory cd webpack-react-boilerplate
• Install dependencies => yarn install
• Start the development server => yarn start

Development (using Docker):

• Clone repo => git clone [e-mail]:react-custom-projects/webpack-react-boilerplate.git
• Navigate to project directory cd webpack-react-boilerplate
• Install dependencies (required for prettier) => yarn install
• Start the development server => docker-compose up web-dev

Docker for production (basic setup) (modify it to your needs):

• Update the production section of the Dockerfile to meet your needs
• Run the following command to build your image => docker-compose up web-prod

How to create injectable module and expose it to parent sites

• Open webpack.common.js file.
  1- Import ModuleFederationPlugin:

  const { ModuleFederationPlugin } = require('webpack').container
  

  2- Pass ModuleFederationPlugin to the plugins array:

  plugins: [
              new ModuleFederationPlugin({
  

  3- Specify the name of the current app (must be unique) in ModuleFederationPlugin:
  

  new ModuleFederationPlugin({
      name: 'second_inner_app',
  

  4- Set the exposed file name in ModuleFederationPlugin:
  

  filename: 'remoteEntry.js',
  

  5- Define the modules you want to expose from the current app in ModuleFederationPlugin:
  

  exposes: {
     './App': path.join(PATHS.src, 'App'),
  }
  

  Note: The key you specify for each module you expose in exposes object will be used in the host app to import that module: /second_inner_app/App.

  6- Add the shared dependencies in ModuleFederationPlugin:
  

  new ModuleFederationPlugin({
      shared: ['react', 'react-dom'],
  }),
  

• Create the component you want to expose.

• Create bootstrap.js file and move into it all the code from index.jsx file.

• Import bootstrap.js dynamically inside index.jsx file.
  

   import('./bootstrap');
  

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
It will open http://localhost:3002 automatically in the browser to see your app.

All changes will be injected automatically without reloading the page.

You will see in the console the following:

• All redux store related changes
• Any of the following errors:
  1. Linting errors.
  2. Code format errors (because of prettier)

yarn build

Builds the app for production to the dist folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

yarn build:serve

Serves the app on http://localhost:8082 from the dist folder to check the production version.

Note: Use this script only if you ran the build script yarn build.

yarn analyze-bundle

It allows you to analyze the bundle size.