Vite is a modern build tool that offers lightning-fast development and optimized production builds. Compared to older setups like Create React App, Vite provides a much faster startup time, hot module replacement (HMR), and a leaner configuration—all of which help improve your developer experience when building React applications.

1. Setting Up Your Project

Step 1: Create a New Vite Project

Open your terminal and run the following command:

npm create vite@latest my-react-app -- --template react

my-react-app: This is the name of your project folder.
--template react: Specifies that you want to use the React template.

Alternatively, if you prefer Yarn:

yarn create vite my-react-app --template react

Step 2: Install Dependencies

Navigate to your project directory and install the dependencies:

cd my-react-app

npm install

Or with Yarn:

cd my-react-app

yarn install

Step 3: Running the Development Server

Now that everything is installed, start the development server:

npm run dev

Or with Yarn:

yarn dev

Vite will start a development server (typically on http://localhost:5173), and you can open this URL in your browser to see your new React app in action.

2. Exploring the Project Structure

After setting up your project, you’ll notice a clean project structure:

my-react-app/

├── index.html // The main HTML file

├── package.json // Project metadata and dependencies

├── vite.config.js // Vite configuration (minimal by default)

├── src/

│ ├── App.jsx // Main React component

│ ├── main.jsx // Entry point that renders the React app

│ └── assets/ // Folder for images, styles, etc.

└── public/ // Public assets that are not processed by Vite

This structure is simple and easy to navigate, allowing you to focus on building your application.

3. Building for Production

When you’re ready to deploy your app, Vite can create an optimized production build with a single command:

npm run build

Or with Yarn:

yarn build

This command bundles your application with Rollup, optimizing assets and generating a dist/ folder that contains your production-ready files.

To preview your production build locally, you can run:

npm run preview

Or with Yarn:

yarn preview

Vite is an excellent tool for setting up a React development environment. Its fast startup times, efficient HMR, and straightforward configuration make it a compelling choice for modern web development.