How to Set Up a New Vite Application

November 2, 2024 (2w ago)

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:

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:

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:

Step 2: Navigate into Your Project Directory

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

cd 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

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

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:

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

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!

LinkedIn
X
youtube