Creating a Microfrontend with Vite

Vite, a build tool for quickly setting up modern JavaScript projects, provides a fast development server, hot module replacement, and other features that can help speed up the development process.

Vite is an excellent starting point for creating your microfrontends in Modyo, as it allows you to create modern and robust projects based on both Vue and React. In React, it also allows you to replace the outdated create-react-app command.

To create your microfrontend with Vite, follow these steps:

Step 1: Preparation

Before you start, make sure you have Node.js and npm installed on your computer. If not, you can download them from the official Node.js website.

Step 2: Create a new Vite project

To create a new project using Vite, open your terminal and run the following commands:

mkdir my-project

This command creates the folder where your project will be stored. To enter this new folder, run:

cd my-project

Once inside your project folder, run the command:

npm init vite

This initiates the Vite project generator. Enter the project name and choose a pre-configured template, or select custom to manually configure your project.

In this tutorial, we use the React template, a basic template for a JavaScript project based on the React library.

Step 3: Install dependencies and start the development server

Once you have chosen the template, Vite generates a new project in the my-project directory.

To install the dependencies and start the development server, run the following commands:

cd my-project

npm install

This installs all the necessary dependencies and starts the development server. Once the installation is complete, run a local server with the command:

npm run dev

You can now perform testing and debugging on your local machine using this local server.

Step 4: Adjustments and development

To ensure better results and compatibility, we recommend you modify the identifier of your app and ensuring it has a unique name.

Also, verify in the index.html file that the "root" identifier is present on that line. Substitute the value of the identifier with the name of your app; this name must be unique.

<div id="root"></div>

Repeat the same process in main.jsx so that React can update the application's entry point.

ReactDOM.createRoot(document.getElementById('root')).render(

Remember to perform this step in both places; otherwise, your application will not function correctly.

Step 5: Publish the project on Modyo

Once your project is ready for publishing, you can compile it for production. To build the project, run the following command:

npm run build

This command creates a dist directory that contains the optimized production build of your project.

To publish your compiled widget on Modyo, follow the detailed instructions in our documentation.

Now you know how to create, build, and publish your microfrontends using Vite and Modyo.

Photo by Melyna Valle on Unsplash