Monorepo and Micro-Frontends Using Module Federation Vite

✨ Introduction ✨:

Monorepo

A monorepo is a single repository managing multiple related but independent projects. It streamlines development by enabling code reuse, simplifying dependencies, and fostering better team collaboration compared to separate repositories.

Micro Frontend

A web application architecture of a frontend that decomposes it into smaller, independent units deployable individually. A micro-frontend can be created and deployed independent of other code bases, meaning they are better flexible and scalable.

Module Federation and Vite

Module Federation: It is a very powerful feature in Webpack, which enables the dynamic loading of code from a remote location.

Vite: This is a more modern frontend build tool, one that allows fast development server startups and immediate hot module replacement, with great support for modern JavaScript features and extending its functionality by means of the plugin system.

Problems that these tools can solve ?:

• Scaling Teams
• Managing Dependencies
• Enhancing Development Speed

By combining these patterns and tools, one can build scalable, maintainable, and high-performance front-end applications that meet the demands of modern web development.

Combining Monorepos, Micro-Frontends, Module Federation, and Vite ??:

Impact

By combining these technologies, you create a powerful and flexible architecture for building large-scale, complex web applications. Here's a breakdown of the key impacts:

• Enhanced Scalability: Independent deployment and updates of micro-frontends within a monorepo.
• Improved Developer Experience: Faster development with Vite and streamlined workflows.
• Optimized Performance: On-demand loading of code with Module Federation reduces initial load times.
• Better Maintainability: Modular micro-frontends improve code organization and reduce coupling.

?? Enough of this theory, let's see some action! ??

How to Do It?

1: Setup Monorepo

Choose a monorepo management tool like Lerna or Nx. (let's choose Nx for this demo project)

• Let's create a folder and initialize Nx workspace there.

mkdir my-monorepo
cd my-monorepo

2: Install Nx Cli:

• Install Nx CLI globally into your system

npm add --global nx@latest 

• Initialize Nx workspace

npx create-nx-workspace@latest

• Use the Nx CLI to generate new applications and libraries within your workspace

nx g @nx/next:application host-app
.
.
.
nx g @nx/react:application my-remote-app
.
.
.
nx g @nx/react:library my-utils

3: Configure Vite And Implement Module Federation:

• Install the @originjs/vite-plugin-federation plugin in each micro-frontend's vite.config.js.

npm i @originjs/vite-plugin-federation -D

• Create a vite.config.js (if not created by Nx) and configure it.
• Implement module federation package.

Host-App Vite configuration:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
     react(),
     federation({
      name: 'host-app',
      remoteApp: {},  // add Urls of your remote apps here
     shared: {
        react: {
          singleton: true,
          requiredVersion: '18.2.0',
        },
        'react-dom': {
          singleton: true,
          requiredVersion: '18.2.0',
        },
      },
    }),
  ],
});

Remote-App Vite Configuration:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
     react(),
     name: 'my-remote-app', // unique app name for your remote module
     filename: 'remoteEntry.js',
     exposes: {}, // add the path of any components you want to expose to the host app
     shared: {
       react: {
         singleton: true,
         requiredVersion: '18.2.0',
       },
       'react-dom': {
         singleton: true,
         requiredVersion: '18.2.0',
       },
     },
    }),
  ],
});

Your Project structure should look like this

my-monorepo/
├── apps/
│   ├── host-app/
│   │   ├── package.json
│   │   ├── vite.config.js
│   │   ├── src/
│   │   └── ...
│   ├── my-utils/
│   │   ├── package.json
│   │   ├── src/
│   │   └── ...
│   └── my-remote-app/
│       ├── package.json
│       ├── vite.config.js
│       ├── src/
│       └── ...
└── nx.json

? Congrats, your app is configured now. ?
Now, go ahead and create a component and expose it to the host app.

How to add a remote component to the host?

Let's assume you have exposed a component as "AppComponent" and your remote name is "remoteApp"

const RemoteComponent = React.lazy(() => import('remoteApp/AppComponent'));

<Suspense fallback={<>Loading....</>}>
  <RemoteComponent />
</Suspense>

*NOTE: * Make sure to add a remote URL to the host's vite.config.js file.

Real-World scenarios ??:

Large-scale e-commerce platforms: The same team can work on product pages, checkout processes, and user accounts independently.
Enterprise applications: Features can be managed by different departments within a shared platform.
Different teams can create and maintain individual widgets or dashboards.

? Check out my demo project code here ??: Monorepo project

Conclusion

Monorepos, Micro-frontends, Module Federation, and Vite, using the strengths of all the above technologies, can help organizations build scalable, maintainable, and high-performance web applications that meet the demands of modern development and business needs.

Additional Resources:

Nx Documentation
Vite Documentation
Webpack Module Federation
Micro-Frontend Architecture

Feel free to reach out if you have questions or need assistance in implementing this setup for your project. Let's build something amazing! ?

The above is the detailed content of Monorepo and Micro-Frontends Using Module Federation Vite. For more information, please follow other related articles on the PHP Chinese website!