How to Set Up a Vite Project?

Vite is a modern front-end build tool that offers a fast development experience by using native ES modules in the browser. It provides a lean and efficient setup for building JavaScript applications with a focus on performance and simplicity.

Prerequisites

• Nodejs
• React
• JavaScript

Approach

We have discussed below how to set up a Vite project: First, install Vite using npm create vite@latest, and follow the prompts to configure your project. Next, navigate to the project directory and install dependencies with npm install. Finally, start the development server using npm run dev.

Steps to Set Up a Vite Project

Step 1: Install NodeJs, If you haven’t installed NodeJs, download it from the official website.

Step 2: Create a new Vite Project

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

Step 3: Select a framework: select the React framework here using the downward arrow key. You can select any of the frameworks as per your requirements.

Vanilla
Vue
React
Preact
Lit
Svelte
Solid
Qwik
Others

Step 4: Select Variant: choose any variant of your choice using the downward arrow key,i.e: choose JavaScript.

TypeScript
TypeScript + SWC
JavaScript
JavaScript + SWC

Step 5: Now, switch to my-react-app directory

cd my-react-app

Step 6: Install Dependencies

npm install

package.json:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }

Step 7: Start Server using below command, make sure check your port no on the terminal it may be different for you system.

npm run dev
  ➜  Local:   http://localhost:5173/

Project Structure:

Example: In this example, we are using Vite to create a simple React application that displays a heading "GeeksforGeeks" in green and a subheading "Vite Project". The app includes an interactive button that increments a counter when clicked, showing state management in React using hooks. The App.css file styles the components for a clean and responsive UI.

.App {
  text-align: center;
  padding: 20px;
}

h1 {
  color: green;
  font-size: 2.5em;
}

h3 {
  font-size: 1.5em;
  margin-bottom: 20px;
}

.counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.2em;
}

.counter p {
  margin: 10px 0;
}

button {
  padding: 10px 20px;
  font-size: 1em;
  color: white;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div className="App">
      <h1>GeeksforGeeks</h1>
      <h3>Vite Project</h3>
      <div className="counter">
        <p>Count: {count}</p>
        <button onClick={incrementCount}>Increment</button>
      </div>
    </div>
  );
};

export default App;

Output: To run the application use npm run dev into the terminal.