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.
Before we begin, make sure you have the following installed:
npm create vite@latest host-app --template react
cd host-app
host-app
directory, create a new directory for your micro-frontend:
mkdir vite && cd vite
yarn create vite pokemons-list --template react-ts
cd pokemons-list yarn add jotai
vite.config.ts
: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! 😊
WRITTEN BY
Alex Ellis