How To Create a New React App With Vite

We don't need a framework like Next.js or Remix to get started with React. And if you have been searching online, you probably have found many people saying "not to use Create-React-App".

My preference is Vite!

What is Vite?

In case you don't know, Vite is a build tool and development server for web applications created by Evan You, the creator of Vue.js. It's designed to be fast, lightweight, and easy to use. Vite leverages the native ES modules (ECMAScript modules) feature in modern browsers, which allows for a quicker development experience and efficient build processes.

Vite and React.js logo

Getting started

Make sure you have Node.js installed. If not, you can download it to install it here.

Getting started is made super easy with Vite.

Simply run:

npm create vite@latest

Then follow the prompts:

Running npm create vite@latest in terminal

Set the project name or leave as the default:

Setting the Vite project name

Select React as your framework (obviously): Select your framework in Vite screenshot

Select your flavor of boilerplate (I picked TypeScript, but you might be a JavaScript purist 😉): Select your TypeScript or JavaScript in Vite

You'll end up with the final thing of going into the folder, installing the dependencies, and starting the development server (which can also be copied and pasted from your command line when it's finished creating your app.

Finish screen "Done. Now run:"

Here's what I had to run which will be the same if you chose the default project name:

cd vite-project
npm install
npm run dev

Result Terminal showing http://localhost:5173 Now you should see the result with http://localhost:5173 (or something similar if that port is already in use).

Go to that URL and you should see the app running!

Screenshot of the Vite React Boilerplate running in the browser

Now open up the code in your favorite editor and start hacking. 🎉

Happy coding! ❤️


Follow me on Twitter or connect on LinkedIn.

🚨 Want to make friends and learn from peers? You can join our free web developer community here. 🎉

WEB DEVELOPMENTVITEJAVASCRIPTREACTJS
Avatar for Niall Maher

Written by Niall Maher

Founder of Codú - The web developer community! I've worked in nearly every corner of technology businesses; Lead Developer, Software Architect, Product Manager, CTO and now happily a Founder.

Loading

Fetching comments

Hey! 👋

Got something to say?

or to leave a comment.