How to Create a React App with Vite - Step by Step Tutorial

Introduction

So, in this article we’re going to learn about the fastest way to set up a React project that gets you straight to coding as quickly as possible.

No, we are not going to use the deprecated CRA or create-react-app that has been causing pain for developers for centuries.

But we will employ something called Vite, which means blazingly fast in French.

So without any further ado, let’s dive in.

Prerequisites

The only requirement to get started is to have Node.js installed on your system.

So let’s start by heading to the official Node.js website. Then the click the Download Node.js (LTS) or latest stable version button. After that, run the downloaded file and follow the wizard installation steps depending on your operating system.

Now after installing Node.js, let’s confirm that it’s indeed installed by opening our terminal and typing

node --version

If a message like this appears after running the command, then it means that Node.js is succesfully installed on your system.

Setting Up Vite

Next, let’s visit the Vite website, click on get started, then scroll down until you find this command.

Node.js comes with the npm package manager installed, but I prefer using pnpm because it’s faster. It’s also smart enough to cache dependencies between my local projects in a global store, which saves a ton of mobile data.

npm create vite@latest

So you can either copy this npm command and run it straight away or install pnpm globally using this command

pnpm install -g pnpm

then just replace npm by pnpm in the previous command.

pnpm  create vite@latest

Project Configuration

Just after hitting enter, Vite-cli will prompt you to enter a project name. Let’s go with hello-world.

Then we need to select to go either with Vanilla Javascript or a specific framework like Vue, React and so on. Let’s choose React.

So it’s asking us now to either select Javascript or Typescript. Honestly I prefer typescript because because its static typing improves IDE autocompletions and makes your DX or developer experience much smoother.

Let’s go with Typescript + SWC option. SWC is a bazingly fast compiler that will speed up our development experience by almost 20X.

Installing Dependencies

Okay subsequently, Let’s navigate to our project directory by typing “cd project-name, and install our dependencies by running “npm run install” or “pnpm run install” depending on your package manager name.

npm run install
# Or
pnpm run install

Running The Development Server

Following that, Let’s open our project using Vs Code or any other IDE that you prefer. Once inside, launch the integrated terminal and run the following command.

pnpm run dev

The latter will start our development server on http://localhost:5173, so just click on this URL while holding Ctrl or just copy paste it into the browser.

Finally, your project is ready, you can go into the index.tsx file, change something there and voila, the change will reflect instantly on the web page.

Conclusion

So yeah, that’s it creating a react app in 2025 is just a matter of typing one single command into your terminal, I hope that you found the article helpful, See you hopefully in the Next article and happy coding.