Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:

• A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).
• A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

Vite is opinionated and comes with sensible defaults out of the box, but it is also highly extensible via its Plugin API and JavaScript API with full typing support.

Introduction 

Create a new project with Create React App if possible, although it can take a long time to install nearly 140 MB of dependencies. Vite is a lightweight utility with 31 MB of dependencies that will save you time when beginning a new project. Vite additionally links to JavaScript files using browser-native ES (ECMAScript) modules, which avoids rebuilding the entire bundle with each file modification. Because of these differences, creating, updating, and building a React App using Vite is faster.

This tutorial will scaffold a new React App using the Vite tool.

Prerequisites

• Before getting started, make sure you have Node.js and npm (Node Package Manager) installed on your system. You can download them from the official Node.js website if you haven’t already.

Starting off

Create a new directory for your React project in your terminal or command prompt. Using the cd command, navigate to the newly created directory. Then, run the following command to create a new npm project:

Scaffolding your first Vite

You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Vite + Vue project, run:

Creating a Vite Project

Step 1)

This command will run the Vite executable from the remote npm repository. It will configure the necessary tools to scaffold a React local development environment. Finally, it will open a command-line menu for project settings and language types.

After the script finishes, you will be prompted to enter a project name:

Vite will quickly generate all the scaffolding for your project and some handy scripts to enable HMR.

Once the command has finished running, cd into your folder and run the following commands:

Next, navigate to localhost:5173 in your browser. The following is Vite’s default template:

Project Root

You may have noticed that in a Vite project, index.html is prominently displayed rather than hidden inside the public. This was done on purpose; while your application is being developed, Vite is acting as a server and your entry point is index.html.

Index.html is handled by Vite as source code and a node in the module graph. It resolves the JavaScript source code referenced by script type=”module” src=”…”>. Vite-specific features are also available for inline script type=”module”> and CSS that is referenced via link href>. Additionally, index.html URLs are automatically rebased, negating the need for special placeholders like %PUBLIC_URL%.

The “root directory” in Vite is where your files are served, much like static HTTP servers. It is referred to as “root” in the remaining documentation.

Vite, like static HTTP servers, has the concept of a “root directory” from which your files are served. Throughout the rest of the documentation, it will be referred to as root>. Absolute URLs in your source code will be resolved with the project root as the starting point, allowing you to write code as if you were working with a standard static file server. Vite can also handle dependencies that resolve to non-root file system locations, making it useful even in a mono repo-based setup.

Vite also allows you to create multi-page apps with multiple.html entry points.

This is how the project structure will look like. 

Conclusion 

In conclusion, setting up a React project with Vite is a game-changer for efficient and seamless development. With Vite’s lightning-fast build process and React’s powerful framework, you can create dynamic and high-performance web applications.

By following the step-by-step guide outlined in this blog, you’ll be able to effortlessly initialize a React project with Vite, taking advantage of its optimized development server and near-instantaneous hot module replacement.

Whether you’re a seasoned developer or just getting started with React, Vite simplifies the setup process, allowing you to focus on writing code and bringing your ideas to life. So, don’t hesitate to dive into Vite and experience the joy of rapid React project setup and development.

Embrace the future of React development with Vite today, and unlock a world of speed, productivity, and innovation in your coding journey. Happy coding!