How to Set Up a New Vite Application

Vite is a modern build tool that offers a fast development experience for modern web projects. It is particularly well-suited for React applications, providing an incredibly fast development server and efficient hot module replacement. This guide will walk you through how to set up a new React application using Vite.

Prerequisites

Before you start, make sure you have the following installed on your computer:

  • Node.js (version 14 or later recommended): You can download it from Node.js official website.
  • npm (Node Package Manager) or yarn: These are package managers used for installing dependencies.

To verify if Node.js and npm are installed, run the following commands:

node -v
npm -v

If installed correctly, the versions will be displayed in your terminal.

Step 1: Create a New Vite Application

To create a new React application using Vite, run the following command in your terminal:

npm create vite@latest my-vite-app

Let's break down each part of the command:

  • npm create: This is used to initialize a new project by using an npm initializer package. In this case, it uses Vite's initializer.
  • vite@latest: Specifies that we want to use the latest version of Vite for creating the application.
  • my-vite-app: This is the name of your project. You can replace my-vite-app with any name you prefer for your project directory.

Alternatively, you can use yarn:

yarn create vite my-vite-app

After running the command, you'll be prompted to select a framework. Choose React from the list, and you will also be asked if you want to use JavaScript or TypeScript. Here’s an explanation of the prompts:

  • Framework Selection: This is where you choose the framework you'd like to use. In this guide, we're using React.
  • JavaScript or TypeScript: You can select either JavaScript or TypeScript. JavaScript is the standard choice, but TypeScript provides static typing, which can help catch errors earlier in the development process.

Step 2: Navigate into Your Project Directory

Once the setup is complete, navigate into your new project directory:

cd my-vite-app
  • cd: This command stands for "change directory." It allows you to move into your newly created project folder (my-vite-app).

Step 3: Install Dependencies

Now that you have your Vite project structure in place, install the necessary dependencies by running:

npm install

or, if you're using yarn:

yarn
  • npm install: This command installs all of the dependencies specified in the package.json file. These dependencies are necessary for your application to run.
  • yarn: This is the equivalent command if you are using Yarn as your package manager.

Step 4: Run the Development Server

To start your Vite development server, use the following command:

npm run dev

or, if you're using yarn:

yarn dev
  • npm run dev: This command starts the Vite development server, allowing you to see your application in action. Vite’s development server is known for its lightning-fast startup times and efficient hot module replacement (HMR).

By default, the development server will be running at http://localhost:5173. Open this URL in your browser to see your new React application up and running.

Step 5: Understanding the Project Structure

After creating your Vite project, you'll see several files and folders. Here's a quick overview of the key parts:

  • index.html: The entry point of your application, where the root element is defined.
  • src/: This directory contains your React components and the main application logic. By default, there is a main.jsx file where your app is initialized, and an App.jsx file containing the main component.
  • node_modules/: This folder contains all the installed dependencies.
  • package.json: A file that lists dependencies and scripts related to your project. It also includes metadata such as the project name and version.

Step 6: Modify the Default Application

To make changes to your new Vite application, open src/App.jsx in your favorite code editor and modify it to display a custom message:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Welcome to My Vite + React Application!</h1>
      <p>Let's build something amazing with Vite and React.</p>
    </div>
  );
}

export default App;

Save the file, and your browser should automatically refresh to reflect the updated content.

Step 7: Adding a New Component

To add a new component in your Vite project, follow these steps:

  1. Inside the src/ folder, create a new file called Hello.jsx.
  2. Add the following code to define your Hello component:
import React from 'react';

function Hello() {
  return (
    <div>
      <h2>Hello from the new component!</h2>
    </div>
  );
}

export default Hello;
  1. Now, import and use this component inside App.jsx:
import React from 'react';
import './App.css';
import Hello from './Hello';

function App() {
  return (
    <div className="App">
      <h1>Welcome to My Vite + React Application!</h1>
      <p>Let's build something amazing with Vite and React.</p>
      <Hello />
    </div>
  );
}

export default App;

Save the changes, and you will see the Hello component rendered below your welcome message.

Step 8: Adding Styles

Vite supports both CSS and CSS modules. To add styles to your project, you can modify the existing App.css file located in the src/ directory:

.App {
  text-align: center;
}

h1 {
  color: #42b883;
}

Feel free to add new styles or create additional CSS files as needed to style your components.

Step 9: Building for Production

When you are ready to deploy your Vite application, you can create an optimized production build by running the following command:

npm run build

or, if you're using yarn:

yarn build
  • npm run build: This command generates a production-ready build of your application. It creates a dist/ directory containing all of the optimized assets.

Conclusion

Setting up a new Vite application is fast and straightforward. Vite's modern tooling provides a smooth development experience with lightning-fast HMR (Hot Module Replacement). With your Vite project up and running, you can start building, add new components, and create a dynamic UI. Vite is ideal for modern JavaScript development, providing the speed and flexibility needed for both small and large projects.

Happy coding!