Creating a Microfrontend with Vite

Suzanne Rubinstein

Suzanne Rubinstein

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

Other Developer Tips

Channels
Carlos Solís

Carlos Solís

Customize your UI in Modyo with Modular CSS

Customizing the look and feel of your Modyo application is essential for creating unique digital experiences.

Liquid
Felipe Meyer

Felipe Meyer

Using Liquid on Modyo

Liquid is an open source template language created by Shopify and written in Ruby. At Modyo we use this language to add dynamic capabilities to our digital channels.

Insights
Carlos Solís

Carlos Solís

Strategies for reverting changes in production

Writing code is a complex task that, despite having quality control systems and peer reviews, always carries the risk of an error reaching production, learn the strategies to avoid these issues and clear methods to revert errors when they occur.