Airat Yusuff

Why You Should Set Up Your Next React Project With Vite

Airat Yusuff's photo
Airat Yusuff
·

3 min read

Why You Should Set Up Your Next React Project With Vite

Table of contents

Are you new to React or looking to build your next React app and you do not want to use the "recommended" React-powered frameworks?

This was me 2 months ago - I wanted to start a React project after not using the framework for a few months and I realised there were major updates.

  • create-react-app(CRA) was no longer being maintained and the React team had dropped it as the official recommended way to start a new project.

Simply put, things move fast in the world of tech so it can be a bit confusing especially if you are new.

In this post, I’ll be sharing a quick tutorial on how to set up your basic "vanilla" React app using Vite instead (without having to check through multiple resources in the official docs).

But first,

What even is Vite?

Vite is an alternate build tool that developers can use to start new React projects (without having to learn frameworks powered by React 👀). It has several benefits including a fast development server and minimal setup configuration.

Learn more about Vite here.

I was sceptical about it at first because apart from the boilerplate (which is really not that bad), CRA has worked well enough for React projects over the years so it should still be good for personal projects. However, I wanted to use TailwindCSS and they also recommended not using CRA.

Regardless, I ended up using Vite and it is extremely easy to set up!

What You Need

  • npm or yarn installed

  • node.js version 18+

Steps

  1. Open up a terminal in the directory for the project and run:
npm create vite@latest #if using npm
yarn create vite #if using yarn

This starts the configuration process and you are prompted to enter your project name and select preferred options for the configuration.

  1. After naming your project, select React as the framework.

Vite started as a tool for the Vue community but it can be used for different frameworks including React. This article uses React but you can check for a list of supported template presets here.

  1. Next, select a "variant". This option is basically for you to decide whether you plan to use TypeScript or JavaScript, and which compiler you want to use for hot reloading (either Babel or SWC).

Hot reloading refreshes only components that have been updated, as opposed to the entire page.

I chose JavaScript with SWC because CRA uses Babel and I wanted to see how SWC compared in terms of speed.

  1. After selecting your option, the project is scaffolded right away and you can now run npm install (after navigating into the root of the project folder).
cd vite-project
npm install

With the JavaScript with SWC variant, it took less than 10 seconds which was surprisingly fast! Of course, this would also depend on your network connectivity but it still sets up your project pretty fast.

  1. Run npm run dev to start the project, which also starts up the server quickly.

And you are done!

Alternatively, using the Babel variant i.e JavaScript takes approximately 30 seconds, proving the theory that SWC is indeed faster (all things considered).

You can now work with your React project the way you normally would when setting it up with create-react-app✅.

In conclusion, while using React frameworks like Next.js can give you out-of-the-box features like routing, it's okay to still want to build vanilla React apps.

That's why Vite can do the job in place of CRA.

Other notable resources to check

Thanks for reading and I hope you find it useful too!

ReactviteWeb Development