George Kilmain

Part 1: A Quick Guide to Setting up React with Vite

When it comes to setting up a modern front-end development environment, Vite has become a popular choice due to its speed and simplicity. In this blog post, we will walk through the process of setting up a Vite project with React, ensuring that you're equipped with the right tools and configurations to kickstart your development journey. Here's a step-by-step guide to get your build tool and UI set up in no time.


Node.js: Ensure you're using a recent version of Node.js. You can check your current version using the following command:

% nvm current v18.0.0

Package Manager: Make sure you have pnpm installed. You can install pnpm using your preferred package manager for instance with npm:

% npm install -g pnpm

Creating Your Vite Project:

1. First, create your Vite project using the following command. Feel free to use npm or the package manager of your choice. Again, we're using pnpm:

pnpm create vite

2. Next the Vite prompt will ask you a few questions. Here are the answers I used for my setup:

Project Initialization:

1. Navigate into your project directory (replace "react-vite-firebase" with your project name):

% cd react-vite-firebase

2. Install project dependencies:

% pnpm install

3. Start the development server:

% pnpm run dev

And that's it! You've successfully set up a Vite server configured to use React with TypeScript. It's that easy to get your development environment up and running.

In Part 2 of this series, we will take the next step and connect our React Vite project to a Firebase backend, enabling seamless integration of your front-end with a powerful cloud-based database. Stay tuned forĀ React + Vite + Firebase (Part 2), where we'll dive into the world of Firebase integration and enhance the functionality of our project.