Creating a Microfrontend with Vite
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:
This command creates the folder where your project will be stored. To enter this new folder, run:
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.
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:
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.
Repeat the same process in main.jsx so that React can update the application's entry point.
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.