Creating a Vite Federated Frontend Application: A Step-by-Step Guide

Introduction

Micro-frontends (MFs) have gained popularity as a way to split large applications into smaller, more manageable pieces. With the introduction of Webpack 5’s Module Federations, building micro-frontends has become even easier. In this tutorial, we’ll create a Vite federated frontend application using npm, React.js, and Tailwind CSS.

Prerequisites

Before we begin, make sure you have the following installed:

• Node.js (npm)
• Yarn (optional but recommended)

Step 1: Setting Up the Host Application

1. Create a new Vite project for the host application:

   npm create vite@latest host-app --template react

2. Navigate to the project directory

   cd host-app

Step 2: Creating a Micro-Frontend

1. Inside the host-app directory, create a new directory for your micro-frontend:

   mkdir vite && cd vite
   

2. Generate a Vite project for your micro-frontend:

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

3. Install necessary packages for your micro-frontend:

   cd pokemons-list yarn add jotai 

Step 3: Configuring Module Federations

1. In your vite.config.ts file (located in the pokemons-list directory), configure the federation plugin:

   

2. Create your micro-frontend components and state in the src folder.

Step 4: Consuming the Micro-Frontend

1. Create another Vite project for your host application (e.g. pokemon-home)
2. Configure the federation plugin in the host application’s vite.config.ts:

   

3. Import and use the exposed components in your host application.

Conclusion

Congratulations! You’ve successfully set up a Vite federated frontend application using Module Federations. Feel free to explore more features and build additional micro-frontends as needed.

I hope you find this blog helpful! If you have any questions or feedback, feel free to leave a comment below. Happy coding! 😊