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.
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.
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
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:
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.
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!