How To Set Up a React Project with Vite?

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.


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.


  • 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. 


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!




Recent Post

  • How to Implement File Uploads in Node.js with Multer?

    For many web applications that let users share papers, photos, and other types of material, file uploads are a necessary functionality. Multer is a well-liked middleware used for Handling file uploads in Node.js using Multer the Node.js environment to effectively handle file uploads. We’ll look at how to use Multer to create file uploads […]

  • How to Use Local Storage to Persist Data in a JavaScript Application?

    Data persistence is a key aspect of web applications. In JavaScript, one of the primary tools for achieving this is Local Storage, a part of the Web Storage API. This JavaScript data persistence tool provides a simple key-value storage mechanism within the user’s browser. Unlike session storage, which persists data only during a session, Local […]

  • How to Use WordPress API?

    WordPress stands out as a leading content management system, celebrated for its dynamic capabilities in website and blog development. Renowned for its rich feature set and extensive customization options, WordPress empowers creators to fashion captivating online experiences. In recent times, WordPress has expanded its horizons into the realm of APIs, granting developers a potent tool […]

  • How to Use Post and Pre Hooks in Mongoose?

    In Mongoose, a widely-used library for working with MongoDB, there are valuable tools called “Pre and Post Hooks.” These hooks, also known as “Mongoose Middleware” or “Mongoose Model Hooks,” allow developers to run their own code just before or after specific actions on the database. With “Pre Hooks,” you can customize actions before they happen, […]

  • How To Create Reusable Components in React: Best Practices

    Rеact is a popular library for building usеr intеrfacеs with JavaScript. One of the main benefits of Rеact is its ability to create reusable componеnts that can be used in different parts of your application. Reusable componеnts can help you savе timе, rеducе codе duplication, and еnsurе consistеncy in your UI. However, creating rеusablе componеnts […]

  • Implementing Higher Order Components in Class-Based Components for Code Reusability in ReactJS

    Rеact is a powerful library for building usеr intеrfacеs, and one of its corе strengths liеs in its componеnt-basеd architеcturе. Componеnts arе thе building blocks of Rеact applications, and thеy allow you to crеatе modular and rеusablе piеcеs of UI. Howеvеr, as your application grows, you may find thе nееd for rеusing cеrtain functionalitiеs across […]