MicroFrontends - Who, What, Where and Why

MicroFrontends - Who, What, Where, and Why (With a Few Laughs Along the Way)

As web applications continue to grow in complexity, it’s crucial to find ways to scale frontend development efficiently. Enter Microfrontends—the superhero of frontend architecture. They swoop in to break monolithic frontends into smaller, independent pieces, empowering teams to work autonomously while reducing development bottlenecks. It's like slicing a giant pizza: no one wants the whole pie, but everyone’s happy with their own slice!

In this post, we’ll dive into who benefits from microfrontends, what they are, where they fit into modern development, and why they might be the best thing to happen to your project since your last refactor finally worked (after, like, 10 tries). Plus, stick around for a step-by-step guide on implementing microfrontends with React and Vite.

Who Should Care About Microfrontends?

Microfrontends are particularly valuable for:

Large organizations: Companies with multiple development teams can finally stop tiptoeing around each other’s code like they’re defusing a bomb.
Projects with complex UIs: If your application feels like a tangled web of components that depend on each other (much like untangling Christmas lights), microfrontends can help split that mess into neat little modules.
Teams using different tech stacks: Your React devs, Angular enthusiasts, and Vue wizards can finally live together in harmony... or at least in the same app.

Microfrontends decentralize frontend development, making life easier for everyone. It's like giving each team their own Lego set—no one has to fight over which pieces to use!

What Are Microfrontends?

A microfrontend is a small, independently developed and deployed part of a larger application. Think of them as Lego bricks that can be assembled into a giant Death Star (your project) without worrying that the bricks will fall apart every time you add something new.

Key characteristics of microfrontends:

Independence: Teams can work separately, without worrying about stepping on each other’s toes—because let’s be honest, merging code sometimes feels like walking on eggshells.
Technology Agnostic: You could use different frameworks within the same project, though it’s best not to go overboard. (We don’t need a Frankenstein's monster situation here.)
Ease of scaling: Your app can grow without turning into a tangled ball of spaghetti code. Mamma mia!

Where Do Microfrontends Fit Into Your Workflow?

Microfrontends fit best in complex frontend applications that require frequent updates. They shine when:

Multiple teams are working on different features: Think of an online marketplace where one team handles the cart, another manages the user profile, and another takes care of product listings. With microfrontends, each team can run wild without breaking the whole thing.
Scalability is a concern: As your app grows, adding new features becomes easier. It’s like adding new furniture to a house without knocking down walls.
Independent deployments are required: Teams can deploy changes to one part of the app without everyone else holding their breath, waiting for the entire app to break.

Why Should You Consider Microfrontends?

Why microfrontends, you ask? Well, if you’ve ever tried to wrangle a monolithic frontend, you know the feeling—it’s like playing Jenga, but one wrong move and the whole thing comes crashing down.

Here’s why microfrontends might be your new best friend:

Faster development: Independent teams working on isolated parts means fewer merge conflicts. No more “I’m going to deploy... please, no one touch anything!”
Simplified codebase: Smaller codebases are easier to manage. It’s the difference between organizing a sock drawer and sorting through an entire department store.
Independent deployments: You can update one part of the app without holding your breath and crossing your fingers that the whole thing doesn't fall apart.

In short, microfrontends offer a more scalable, flexible, and modular way to build large applications. And they save you from codebases so complex that even their creators don’t fully understand them anymore (we’ve all been there, right?).

How to Implement Microfrontends in React with Vite (Because You Want to Be a Frontend Superhero Too)

Now that we’ve covered the who, what, where, and why, it’s time to get into the nitty-gritty. Here’s how you can set up a basic microfrontend architecture using React and Vite. This will be easy, I promise—it’s like baking a cake... if the cake was built with JavaScript.

Step 1: Setting Up the Host Application

Create a new Vite React application

This will be the host app, which will call the remote microfrontend (think of it like the big boss calling in reinforcements).
```
 npm create vite@latest host-app --template react
 cd host-app
 npm install
```
Install the Vite Module Federation plugin

Vite doesn’t natively support module federation, but don’t worry, we’ve got a plugin for that—because there's a plugin for everything!
```
 npm install @originjs/vite-plugin-federation
```

Configure Module Federation

Open vite.config.js and add the module federation configuration:

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

 export default defineConfig({
   plugins: [
     react(),
     federation({
       name: 'host',
       remotes: {
         remoteApp: 'http://localhost:5001/assets/remoteEntry.js',
       },
     }),
   ],
   build: {
     target: 'esnext',
   },
 });

At this point, your host app is ready to call in some remote components. (It’s like Batman calling Robin.)

Consume the Remote App

Now, in App.jsx, load the remote component like this:

 import { useState, useEffect } from 'react';

 function App() {
   const [RemoteComponent, setRemoteComponent] = useState(null);

   useEffect(() => {
     import('remoteApp/RemoteComponent').then((module) => {
       setRemoteComponent(() => module.default);
     });
   }, []);

   return (
     <div>
       <h1>Host Application</h1>
       {RemoteComponent ? <RemoteComponent /> : <p>Loading Remote Component...</p>}
     </div>
   );
 }

 export default App;

Step 2: Setting Up the Remote Application

Create the Remote App

Time to set up the sidekick! (Or in this case, the remote app.)
```
 npm create vite@latest remote-app --template react
 cd remote-app
 npm install
```
Install the Vite Federation Plugin

Just like we did for the host app, install the federation plugin.
```
 npm install @originjs/vite-plugin-federation
```

Configure Module Federation for the Remote App

Now, expose your remote component to be used by the host app.

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

 export default defineConfig({
   plugins: [
     react(),
     federation({
       name: 'remoteApp',
       filename: 'remoteEntry.js',
       exposes: {
         './RemoteComponent': './src/RemoteComponent',
       },
     }),
   ],
   build: {
     target: 'esnext',
   },
 });

Create the Remote Component

Build a simple component to expose from your remote app:

 const RemoteComponent = () => {
   return (
     <div>
       <h2>Remote Component</h2>
       <p>This component is loaded from a remote application!</p>
     </div>
   );
 };

 export default RemoteComponent;

Now, run both the host and remote apps, and voilà—you’ve successfully implemented microfrontends with Vite and React. Your frontend is officially modular, and your teams can now work in peace (with fewer merge conflicts).

Conclusion

Microfrontends can be a game-changer for large-scale applications, allowing teams to work independently and deploy faster. They might just save your project from turning into an unwieldy mess that keeps you up at night—because we all need a little less stress, right?

Now go forth, and may your frontend be as modular as your microservices!

import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import federation from '@originjs/vite-plugin-federation'; export default defineConfig({ plugins: [ react(), federation({ name: 'host', remotes: { remoteApp: 'http://localhost:5001/assets/remoteEntry.js', }, }), ], build: { target: 'esnext', }, });

import { useState, useEffect } from 'react'; function App() { const [RemoteComponent, setRemoteComponent] = useState(null); useEffect(() => { import('remoteApp/RemoteComponent').then((module) => { setRemoteComponent(() => module.default); }); }, []); return ( <div> <h1>Host Application</h1> {RemoteComponent ? <RemoteComponent /> : <p>Loading Remote Component...</p>} </div> ); } export default App;

import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import federation from '@originjs/vite-plugin-federation'; export default defineConfig({ plugins: [ react(), federation({ name: 'remoteApp', filename: 'remoteEntry.js', exposes: { './RemoteComponent': './src/RemoteComponent', }, }), ], build: { target: 'esnext', }, });

const RemoteComponent = () => { return ( <div> <h2>Remote Component</h2> <p>This component is loaded from a remote application!</p> </div> ); }; export default RemoteComponent;