Getting Started with Vite

Vite is a modern build tool that makes starting a new project quick and easy. Unlike traditional bundlers, Vite is designed to be fast. It provides instant feedback as we code, which makes development smoother. Vite also offers a fast production build, making it a great choice for modern web projects. Vite supports many popular frameworks such as React, Vue, and Svelte. It’s flexible and works well with most front-end technologies.

There are different ways to start a project with Vite. Some of them are mentioned below:

Using Vite’s Command-Line Interface (CLI)

This is the easiest and most common way to create a new project with Vite is by using its CLI. The Vite CLI is the quickest way to start a new project. It sets up everything for us automatically.

• First, we need to install Vite using npm or yarn.
• Then, we can create a new project by running a simple command.
• Finally, we choose our framework, and Vite sets up the project for us.

Steps to set vite Using Vite’s Command-Line Interface (CLI)

Step 1: Install Vite globally (optional)

npm install -g create-vite

Step 2: Create a new project

npm create vite@latest my-project

Step 3: Navigate to our project folder and install dependencies

cd my-project
npm install

Step 4: Start the development server

npm run dev

Manually Setting Up Vite in an Existing Project

If we have an existing project and want to switch to Vite, we can manually set it up. . This gives us more control over the setup.

• Start by installing Vite as a dependency in our project.
• Then, we need to configure Vite to work with our project’s structure.
• Finally, we can update our scripts to use Vite for development and building.

Steps to Set Vite by Manually Setting Up Vite in an Existing Project

Step 1: Install Vite as a dependency

npm install vite --save-dev

Step 2: Create a vite.config.js file to configure Vite

import { defineConfig } from 'vite';
export default defineConfig({
  // your configuration here
});

Step 3: Update our package.json scripts

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  }
}

Step 4: Run the development server

npm run dev

Using Vite with Specific Frameworks

Vite has built-in templates for frameworks such as React, Vue, and Svelte. We can use these templates to quickly start a project with your preferred framework. Vite provides templates that include everything we need to get started.

• Use the Vite CLI to create a project with our chosen framework template.
• This approach is similar to the basic CLI setup but tailored for specific frameworks.

Steps to set vite with Specific Frameworks

Step 1: Use the Vite CLI to create a project with a framework template:

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

Step 2: Navigate to our project folder and install dependencies:

cd my-project
npm install

Step 3: Start the development server:

npm run dev 

Output: This output will be shown in the screen for each approach.