Micro-frontend with Module Federations [Part 1] - Vite + React
Tags: typescript, react, javascript, frontend
Published: 2023-06-14 23:06:15

Hi folks! It's a pleasure to have you here again!

![Michael in the office celebrating](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/buprcdzjscai4r3pr89b.gif)

In this article, which I'm thinking of breaking in two, I'll be talking about Micro-frontends using Module Federations.
This first article I will be using Vite and on the part 2,  I will be using Create React App (CRA). 

But what we will create? (spoilers)

![Gif of image pokemons list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nkftvg801hwh1yrr6v67.gif)

The list of pokemons is a Micro-Frontend (MF), where I will expose the component and the store (pokemon selected). The main page will consume the MF and display the pokemon selected, provided by MF state (using Jotai).

**Summary:**
- [**Introduction**](#introduction)
- [**Module Federations**](#module-federations)
- [**Show me the code**](#show-me-the-code)
- [**Conclusion**](#conclusion)

## Introduction

First, we need to understand what is a MF? And why we you can use this approach. The MF concept was create when we have multiple teams and we need to separate our application components between them.

Each team is responsible to maintain the MF, and can be a component or a MF page route.

Image that exists a team where is responsible to maintain the Home Page and other to maintain the Cart component or Page. So we can scale the application and make it smaller, BUT whe have some trade-off that we will address later.

Creating an MF not so long ago was difficult to create and maintain. But currently creating has become something easy, but maintaining it will depend on the team.

So Webpack 5 introduce the new concept of share components. The Module Federations.

## Module Federations

![Module Federations image with webpack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cy3w7p0udv531d7mllxo.png)

Module Federation is a specific method of enabling what are commonly called “micro frontends” in JavaScript applications using Webpack 5.

According the Webpack documentation:

> Multiple separate builds should form a single application. These separate builds act like containers and can expose and consume code between builds, creating a single, unified application.
This is often known as Micro-Frontends, but is not limited to that.

Just to remember, the module federations is only available on the version 5 of webpack.

With Module Federations we can share not just components, but states as I mentioned above, using Jotai.

## Show Me The Code

So let's create our application to see how module federations works on Vite. We will have two webapps created using vite, first the `pokemons-list` that will expose the component and state. And the second `pokemons-home` that will consume the MF and allow to select and display the pokémon.

First, let's create our directory using:

```sh
mkdir vite && cd vite
```

And now, we will create our MF using:

```sh
yarn create vite pokemons-list --template react-ts
```

Install the packages on the project created, just using:

```sh
yarn
```

Let's add the jotai as dependency, using:
```sh
yarn add jotai
```

Now we will use a plugin made available by vite, called `originjs/vite-plugin-federation`. So let's install as a dev dependency using:

```sh
yarn add -D @originjs/vite-plugin-federation
```

Now Let's code!

First on `src` folder, I will be creating some foldes called `types`, `components` and `atoms`.

- Types will have only the type of Pokemon definition
- Components will have only one component, that will be de List of pokémons
- Atoms will have the state of our application


![Folders of project image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gqnl337t8dfpgulljkug.png)

So on `src/types`, let's create the `Pokemon.ts`

```ts
export interface IPokemon {
  id: number;
  name: string;
  sprite: string;
}
```

On the `src/atoms`, let's create our state of pokémons, also  I called `Pokemon.ts`.
I will be using Jotai, so I will not delve into the subject, as there is an article where I specifically talk about this state manager.

```ts
import { atom, useAtom } from "jotai";
import { IPokemon } from "../types/Pokemon";

type SelectPokemon = IPokemon | undefined;

export const pokemons = atom<IPokemon[]>([]);
export const addAllPokemons = atom(
  null,
  (_, set, fetchedPokemons: IPokemon[]) => {
    set(pokemons, fetchedPokemons);
  }
);
export const selectPokemon = atom<SelectPokemon>(undefined);

const useSelectPokemon = () => useAtom(selectPokemon);
export default useSelectPokemon;
```

And in our components `src/components/PokemonList`, let's create two files. First the `PokemonList.module.css`.
Let's just use CSS modules to our styles.

```css
.container {
    & > h1 {
    color:#1e3a8a;
    font-size: 25px;
    };

    display: flex;
    flex-direction: column;
    border: 3px solid #1d4ed8;
    width: fit-content;
    padding: 5px 5px;
}
.pokemonCardContainer {
    display: flex;
}

.pokemonCard {
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    background-color: #1e3a8a;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 4px;
    padding: 5px;
    border-radius: 4px;
}

.pokemonCard:hover {
    cursor: pointer;
    background-color: #1d4ed8;
}
```

And I will create the `src/components/PokemonList` the `index.tsx` that will be our MF:

```tsx
import { useEffect } from "react";
import useSelectPokemon, {
  addAllPokemons,
  pokemons as pokemonState,
} from "../../atoms/Pokemon";
import { useAtom } from "jotai";

import style from "./PokemonList.module.css";

const PokemonList = () => {
  const [, addPokemons] = useAtom(addAllPokemons);
  const [pokemons] = useAtom(pokemonState);
  const [, setSelectPokemon] = useSelectPokemon();

  const fetchPokemons = async () => {
    const response = await fetch(
      "https://raw.githubusercontent.com/kevinuehara/microfrontends/main/mocks/pokemonList.json"
    );
    const jsonData = await response.json();
    addPokemons(jsonData);
  };

  useEffect(() => {
    fetchPokemons();
  }, []);

  return (
    <div className={style.container}>
      <h1>Pokémon List Micro Frontend</h1>
      <div className={style.pokemonCardContainer}>
        {pokemons.map((pokemon) => {
          return (
            <div
              className={style.pokemonCard}
              key={pokemon.id}
              onClick={() => setSelectPokemon(pokemon)}
            >
              <img
                src={pokemon.sprite}
                aria-label={`Image of pokemon ${pokemon.name}`}
              />
              <label>{pokemon.name}</label>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default PokemonList;
```

You can clean the `App.tsx`, remove the `App.css` and clean the `index.css`.

On your `App.tsx` you can just call your component:

```tsx
import PokemonList from "./components/PokemonList";

function App() {
  return (
    <>
      <PokemonList />
    </>
  );
}

export default App;
```

Don't worry about the fetch URL, because I'm exposed on my repository to bring 5 pokémons.

Now we are prepared to config our MF. So in the file `vite.config.ts`, we are going to import the `@originjs/vite-plugin-federation` and expose what we need. The PokemonList and Jotai State. Let's change to:

```ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "pokemonList",
      filename: "remoteEntry.js",
      exposes: {
        "./PokemonList": "./src/components/PokemonList",
        "./Pokemon": "./src/atoms/Pokemon.ts",
      },
      shared: ["react", "react-dom", "jotai"],
    }),
  ],
  build: {
    modulePreload: false,
    target: "esnext",
    minify: false,
    cssCodeSplit: false,
  },
});
```

I'm importing as default the `federation` of the plugin, and we need to provide some properties:

- **name:** the name of our object of module federation

- **filename:** This is very important, because the build of the app will generate a single file that will be our manifest to expose the componets. (I recommended to use `remoteEntry.js` as default)

- **filename:** This is very important, because the build of the app will generate a single file that will be our manifest to expose the componets.

- **exposes:** The object where we will let's say what we're going to expose. In the example the atom of jotai and the PokemonList component.

- **shared:** It's important because when we have other applications running our MF, we need to provide what is needed to render the MF. In this case, `react`, `react-dom` and `jotai`.
And even if the other application that consumes it is in react, the module federations plugin will define the import and if you already have it, it will not reimport.

It's very important when we have a MF that the `runtime sharing` it's been running on some port. So, let's fix the port on our `package.json`:

```json
 "scripts": {
    "dev": "vite --port 5173 --strictPort",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview --port 5173 --strictPort"
  },
```

Now, you can try run the project. But you need to run the build, to generate the `remoteEntry.js` and using the preview mode. So just run using:

```sh
yarn build && yarn preview
```

AND WE WILL HAVE THE MF:

![Pokemon List using module federation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0cenrm66fofe107b8b3.png)

And if you access the link `http://localhost:5173/assets/remoteEntry.js` you will see the remoteEntry manifest file:

![Remot Entry File](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lwfiune813l5wt3ddte.png)

And we finished the our first MF. Now let's consume!

Open another terminal and back to the root dir of `vite`. And let's create the `pokemons-home`, using the same command of vite:

```sh
yarn create vite pokemons-home --template react-ts
```

Install the dependencies, using:

```sh
yarn
```

Install the `originjs/vite-plugin-federation` as a dev dependency using:

```sh
yarn add -D @originjs/vite-plugin-federation
```

And now let's start setting the `vite.config.ts`:

```ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "pokemonHome",
      remotes: {
        pokemonList: "http://localhost:5173/assets/remoteEntry.js",
      },
      shared: ["react", "react-dom"],
    }),
  ],
  build: {
    modulePreload: false,
    target: "esnext",
    minify: false,
    cssCodeSplit: false,
  },
});
```

Note that that we have some differences. Now we have the `remotes`.

The remotes is where the `remoteEntry` is available. So we have the first app on. Because it's important we define the port to be fixed.

I will be removing the `index.css` and refact the `App.css` to:

```css
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 15px;
}

.pokemon-card-container {
    display: flex;
    align-items: center;
}

.pokemon-name {
    font-weight: bold;
    color: #1e3a8a;
    font-size: 20px;
}

.pokemon-image {
    width: 150px;
}
```

Another thing that is very **important**.
Because we are using real time sharing we don't have types of typescript.
So I will rename the `App.tsx` to `App.jsx`, because when I import the MF the typescript don't complain about typing. (there's a solution for this, but it's out of the box). For this example let's just change the type of file.

```jsx
import PokemonList from "pokemonList/PokemonList";
import usePokemonSelected from "pokemonList/Pokemon";

import "./App.css";

function App() {
  const [pokemon] = usePokemonSelected();

  return (
    <>
      <h3 style={{ color: "#1e3a8a", fontSize: "20px" }}>
        Created using Vite + vite-plugin-federation
      </h3>
      <PokemonList />
      {pokemon && (
        <div className="container">
          <h1 style={{ color: "#1e3a8a" }}>Selected Pokémon:</h1>
          <div className="pokemon-card-container">
            <img
              src={pokemon?.sprite}
              className="pokemon-image"
              aria-label="Image of Pokemon Selected"
            />
            <label className="pokemon-name">{pokemon?.name}</label>
          </div>
        </div>
      )}
    </>
  );
}

export default App;
```

Amazing, isn’t it? We are using the PokemonList and usePokemonSelected, exported by MF of the remoteEntry.

And that's it! We create our "host" app that will consume the MF. Run the app using:

```sh
yarn dev
```

AND HERE WE ARE:


![Project using the Microfrontend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sofxo1m97alardmwgrlf.png)



We finished our two apps the `pokemons-list` (remote) and the `pokemons-home` (host).

## Conclusion

The MF is amazing form to break our compoents and expose to other apps consume.
But with all in the technology world we will have trade-offs.

Imagine that the MF team, implements a bug or the app remoteEntry is not not available. We need to treat and work around the problem.

When we are using a library or components, we are using the concept of *Build Time Sharing*. So the component will be available on build of the app.

- **Pros**
 - Complete Applications
 - Typescript Support
 - Unit or E2E Testing

- **Cons**
 - No Runtime Sharing

But when we are using the MF concepts, we are using the *Run Time Sharing*

- **Pros**
 - Not importing all component of a library
 - Runtime Sharing

- **Cons**
 - Typescript Support
 - Difficult to unit and E2E testing

So you need to think and ask for yourself: I really need MF? Trade-offs... etc..

Module Federation is not the unique solution, for example [`single-spa`](https://single-spa.js.org/)

But recently the community has been adopting the module federations of webpack.

So in this example I created using Vite, but I will create the part 2 of this content, using the CRA (somethings of setting will change).

Some references:

- [Module Federations Webpack](https://webpack.js.org/concepts/module-federation/)
- [My repository](https://github.com/kevinuehara/microfrontends-module-federation)
- [Linkedin](https://www.linkedin.com/in/kevin-uehara/)

So...

![that's all folks image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3iplwzj215qycankhdm.png)

Thank you so much for your support and read until here.
If possible share and like this post, it will help me a lot.