Setting Up a React App with Vite: Step-by-Step Guide

In this post, we'll take a detailed look at how to set up a React application using the Vite build tool. We'll also go through the installation of essential libraries that we typically use for developing frontend applications.

When Create React App was deprecated, we needed to find an alternative - and our choice fell on Vite. The word 'vite' means 'fast' in French.

If you've run into small issues along the way (as we did), this guide should help smooth things out.

Before You Start

Vite requires a newer version of Node.js - at least 18, ideally 20+. So before starting, make sure you're up to date. You can check your version by running:

node -v

Interestingly, Vite doesn't always run well in Git Bash on Windows. We recommend using the built-in Windows Terminal, where everything works very user friendly.

Setting Up the Project

Setting up a new Vite project is quick and easy. Just run the following commands in your terminal:

npm create vite@latest project-name

You'll be prompted to choose a framework and a language. In our case, we selected framework React with language JavaScript:

React
JavaScript

Once the project is created, navigate to the folder and install dependencies:

npm install

And to start your app on localhost, you'll be using following line:

npm run dev

That's it - your new React app with Vite is up and running.

Installing Essential Libraries

Next, let's install the libraries we use most often in our frontend projects.

Routing

npm install react-router-dom@6
npm install -S react-router-bootstrap

For routing we use these two libraries. We recommend version 6 of react-router-dom. Meanwhile version 7 exists at the time of writing, it's not yet compatible with the <LinkContainer /> component from react-router-bootstrap.

After installation, you'll need to wrap your main <App /> component with the <BrowserRouter> in your main.jsx file:

import { BrowserRouter } from "react-router-dom";
import { createRoot } from "react-dom/client";
import App from "./App";

createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Styling with Bootstrap

For visual part we use bootrap libraries, install them by running these commmands:

npm install bootstrap
npm install react-bootstrap bootstrap

Then, import the Bootstrap stylesheet in your main.jsx:

import 'bootstrap/dist/css/bootstrap.min.css';

Setting up a new React app with Vite is fast and simple once you know the steps. We hope this guide helps you get started smoothly.

Happy coding, and see you in the next post!