Carlos Solís
Instant Image Optimization with Liquid in Modyo
Optimizing images is essential for any website, especially if you’re aiming for fast load times and a great user experience.
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:
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.
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.
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.
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.
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
Carlos Solís
Optimizing images is essential for any website, especially if you’re aiming for fast load times and a great user experience.
Carlos Solís
Forms are fundamental in any financial application. They help capture critical user information, such as personal data, preferences, and financial details.
Carlos Solís
Debugging is an essential part of software development. It allows us to identify and fix errors, optimizing the performance and stability of our applications.