Originally posted on Medium by Joshua Salema

Building large-scale frontend applications often leads to complex, monolithic codebases that are hard to maintain and scale. In this article, we explore how to solve this problem by adopting a microfrontend architecture using Vite. Learn how to break down your app into independently deployable microfrontends using multiple frontend technologies like React, Vue, and Angular, and how to seamlessly integrate them into a single application for better maintainability and scalability.

Microfrontend architecture is a great way to break down a large, monolithic frontend into smaller, independently deployable pieces. With Vite, this process becomes even smoother due to its speed and ease of configuration. In this guide, we’ll walk through how to build a microfrontend setup using React, Vue, and Angular, all served by a single host application.

1. Setting Up the Microfrontend Projects

We will create three separate Vite-based projects for each microfrontend: React, Vue, and Angular.

Step 1: Create the Vite Projects for React, Vue, and Angular

Start by creating Vite projects for React and Vue as usual. For Angular, we need to use the Angular CLI to set it up first.

1. Create React App:

2. Create Vue App:

3. Create Angular App:

Here, the @angular/vite package helps integrate Angular with Vite. After installation, you can run ng serve to start the Angular app, but we will need to configure it for microfrontend integration next.

2. Configure Each Microfrontend

For each microfrontend, we need to ensure that the application can be mounted dynamically in the host app. We’ll use single-spa to help us with the integration.

React Microfrontend Configuration

In your React microfrontend’s entry point (e.g., main.js), set up the mount function:

Vue Microfrontend Configuration

In the Vue microfrontend, similarly, set up the entry point to be mountable:

Angular Microfrontend Configuration

For Angular, since Angular isn’t naturally “mountable” the same way as React or Vue, we will use single-spa-angular. Install the necessary package:

Then, configure the Angular microfrontend entry point in src/main.single-spa.ts:

This setup ensures that Angular can be loaded and mounted in a host app, much like React and Vue.

3. Host Application Configuration

Now we need to create a host application that will dynamically load and display the microfrontends based on the URL. We’ll use single-spa to register the different microfrontends and control their lifecycle.

Step 1: Create the Host Application

Start by creating a new Vanilla JS Vite project for the host application:

Install single-spa to handle the loading of microfrontends:

Step 2: Set Up Single-spa in the Host Application

In the host application’s entry point (src/main.js), register each microfrontend:

Here, each microfrontend is dynamically loaded based on the route. For example:

• /react will load the React microfrontend
• /vue will load the Vue microfrontend
• /angular will load the Angular microfrontend

Make sure the import paths ('react-app/ReactApp', 'vue-app/VueApp', and 'angular-app/AngularApp') point to the correct locations for your microfrontend builds.

Step 3: Expose Microfrontends in Each Microfrontend Build

Each microfrontend will be exposed using a SystemJS configuration or webpack module federation. For now, we’ll rely on single-spa and expose the entry points directly. You may need to configure your build system to output SystemJS-compatible files. For example, the React and Vue microfrontends should expose their mount functions to be consumed by the host.

You can export them like this:

4. Running the Microfrontend Setup

1. Start the Microfrontends:

For each microfrontend (React, Vue, and Angular), run the Vite dev server:

This will start each microfrontend on a different port.

2. Start the Host Application:

In the host application, add logic to load the microfrontends. You can now run:

This will start the host application, which dynamically loads the microfrontends based on the URL.

5. Deployment and Hosting

Once everything is running locally, the next step is to deploy each microfrontend and the host app. Since microfrontends are independent, they can be deployed separately to different services or environments:

• React, Vue, and Angular apps can be deployed to platforms like Netlify, Vercel, or AWS.
• The host app will need to load the microfrontends from their URLs.

Make sure the URLs in the host application are updated to point to the correct deployment URLs of each microfrontend.

This setup gives you a modular, scalable microfrontend architecture using Vite, React, Vue, and Angular. By using tools like single-spa, you can independently develop, deploy, and update each part of your frontend application.

Why Use Vite for Microfrontends?

• Fast Development: Vite’s lightning-fast HMR (Hot Module Replacement) and its ability to handle multiple frameworks in one setup are perfect for microfrontend development.
• Simplicity: Vite requires minimal configuration, making it easy to set up multiple microfrontends with different technologies.
• Scalable: As your application grows, you can scale each microfrontend independently, making it easier for teams to work in parallel.

With this guide, you can create a robust, flexible microfrontend architecture that allows teams to work independently on different technologies and frameworks, all while integrating them into a cohesive and seamless user experience.

About the Author

Joshua Salema works as a Practice Lead – Low Code Digital at Zimetrics. He is an OutSystems certified Professional and is a passionate advocate for the implementation of architectural best practices. Joshua collaborates closely with cross-functional teams to ensure the development and delivery of secure and highly scalable applications utilizing the OutSystems platform. In addition to his core responsibilities, Joshua finds fulfillment in mentoring fellow developers and actively engages in multiple forums as a speaker within the OutSystems Community.