Top Online Courses

For Beginners And Experts

Build your web development skills today. Find the right web development online courses on Udemy. Start learning JavaScript, Node.js, React, Vue, Svelte, Angular, and many more ...

~ 3 min read

Vite + React: The Ultimate Combination for Fast Project Setup

Welcome to our guide on how to set up a React project with Vite, a powerful and efficient development tool that has been gaining popularity among React developers. Vite is a lightweight build tool that offers several advantages over other popular tools like create-react-app.

Welcome to our guide on how to set up a React project with Vite, a powerful and efficient development tool that has been gaining popularity among React developers. Vite is a lightweight build tool that offers several advantages over other popular tools like create-react-app.

Vite has a faster development experience and instant hot module replacement which means no more waiting for the browser to refresh after every change. It also has a smaller bundle size and uses native ES modules which means faster loading and update time. In this post, we will show you how to set up a React project with Vite, and explain why this combination is the ultimate choice for a fast, efficient and lightweight project setup.

Before we’re going to start creating out first React project with Vite we need to take care of two prerequisites: the installation of Node.js and Yarn.

In order to install Node.js, go to the project’s website https://nodejs.org/, download the software installer and follow the installer instruction to install the current Node.js version on your system:

Image

You can then check for the installed Node.js version by using the following command:

Image

Next, we need to install the Yarn package manager as well. Yarn’s website can be found at: https://yarnpkg.com/:

Image

The preferred way to manage Yarn is through Corepack. Corepack is part of the Node.js installation and needs to be enabled by typing in:

$ corepack enable

Then Corepack can be used to install Yarn:

$ corepack prepare yarn@stable --activate

The yarn command is then activated and available on your system:

Image

Creating A React Project With Vite

Let’s now create a new React project with vite. Type in the following command to start the creation process on the command line:

$ yarn create vite

You’ll then be prompted to enter a new project name next:

Image

Type in vite-react-01 and hit return to continue. Vite will then provide you with a list of JavaScript frameworks you can choose from. Use the arrow key to select the entry “React” and hit return again:

Image

Once you’ve selected “React” you’re asked to specify the variant of the React project. You have four options to choose from:

Image

  • JavaScript
  • TypeScript
  • JavaScript + SWC
  • TypeScript + SWC

So you can decide to create a React project which is using just plain JavaScript or which is supporting Typescript as well. In additon you can choose to use SWC which is a new Rust-based bundler, which claims to be a lot of faster then JS-based bundlers. For the example of this article we’re choosing option “TypeScript +SWC”.

Once selected the project setup is completed:

Image

You can now enter the new project directory (with the name of the project you’ve entered:

$ cd vite-react-01

Next you need to execute the yarn command:

$ yarn

This makes sure that all the needed dependencies of the project are being downloaded and installed:

Image

Next we’re starting the development web server with command:

$ yarn dev

As a response you can see that the server was started on port 5173:

Image

Accessing it in the browser will present the following website to you:

Image

Conclusion

Vite and React are an ultimate combination for fast and efficient project setup. By using Vite as your development server and React as your front-end library, you can enjoy a faster development experience, instant hot module replacement, smaller bundle size, and faster loading times. Setting up a React project with Vite is also a straightforward process, and we hope this guide has helped you understand how to do it.