Micro frontend application in reactjs

Micro frontend application in reactjs

Micro front-end is a tough topic for any developer, including me. The more you hate it, the more it finds its way into your projects. My current project has many components and functionalities that can be shared across product lines. Product owners want to optimize the app, so guess what? Here comes the micro-frontend again!

What is Micro-Frontend, and Why Should You Care?

In simple terms, micro-front-end is a pattern that breaks your web app into smaller, reusable pieces. And that's it. 😄

But why do so many people love this approach? Based on my experience, here are a few reasons:

  • Save team effort: You can build once and use it anywhere, just like the DRY (Don't Repeat Yourself) principle.
  • Speed up development: By assigning smaller pieces of the app to multiple teams or members, you reduce complexity and dependencies.
  • Increase maintainability: Centralizing multiple sharable components in one repository makes it easier to fix bugs and deploy updates across apps.

How to Apply Micro-Frontend to Your Project?

There are many ways to approach micro-frontends, depending on your frameworks, tools, and project setup. Here's what I've learned from my own experience:

1. Using NPM Packages

My first experience with micro-frontends involved sharing UI components across 5-7 sub-apps. Here’s how I set it up:

Steps to Create a Shareable Component Library:

  1. Set Up Your Shared Library:
    • Initialize a new repository for shared components on GitHub (or your own source control).
  2. Configure NPM:
    • Create an account on npmjs.com.
    • Generate a token for your teams or CI/CD purposes by navigating to /setting/@your-username/token.
  3. Set Up .npmrc:
    • Create an .npmrc file with the correct configurations.
    • For individual or company accounts, this will allow you to install private packages and publish new versions.

Here’s an example structure for .npmrc:

1coderegistry=https://registry.npmjs.org/
2//registry.npmjs.org/:_authToken=${NPM_TOKEN}
3

Note: If you prefer GitHub, you can use GitHub's own package repository. The process is similar, with slight differences in syntax.

npm asked a paid account to have private package so I just simply make a public one, the same steps but we can install the package directly https://www.npmjs.com/package/tuanhuydev-test-package. Then after that simply

1import React from "react";
2import { Greeting } from "tuanhuydev-test-package";
3
4const AppShell = () => {
5    return (
6        <div>
7            <h1>App Shell</h1>
8            <Greeting name="tuanhuydev" />
9        </div>
10    );
11}
12
13export default AppShell;
14

you can try to install my package as well https://www.npmjs.com/package/tuanhuydev-test-package

2. Mono Repository with Module Federation

A mono repository is a single repository containing multiple apps. In this approach, you can share code (UI components, API logic, configurations) across apps.

For example, let’s say you have two apps:

  • Shell App: Hosts multiple sub-apps.
  • Sub-App-1: One of the sub-applications used within the shell.

Module Federation allows different parts of the app to communicate and share resources while keeping code isolated.

Here’s a simplified example:

1// Webpack config for module federation in the shell app
2module.exports = {
3  plugins: [
4    new ModuleFederationPlugin({
5      name: "shell",
6      remotes: {
7        subApp1: "subApp1@http://localhost:3001/remoteEntry.js",
8      },
9      shared: ["react", "react-dom"],
10    }),
11  ],
12};
13

You’ll need to configure each app for module federation, ensuring they can communicate and share resources dynamically. So from the shell I can import sub-modules like this:

1import React, { Suspense } from "react";
2const RemoteApp = React.lazy(() => import("subApp1/App"));
3
4const AppShell = () => {
5    return (
6        <div>
7            <h1>App Shell</h1>
8            <Suspense fallback="Loading...">
9                <RemoteApp />
10            </Suspense>
11        </div>
12    );
13}
14
15export default AppShell;
16

You can test out by cloning my repo https://github.com/tuanhuydev/app-shell

Wrapping Up

Micro-frontends can be tricky, but by experimenting and applying them, you learn more about your project, the framework, and how everything interacts.

I hope this guide helped clarify how you can implement micro-frontends in your projects. Keep learning new things, and don’t get discouraged when things get tough—I've been there too!

Lastly, I'm tuanhuydev, an engineer from Vietnam. Feel free to reach out if you need a buddy on your next project. I’d love to help! 😄