How to use Vite to create your React Application

How to use Vite to create your React Application

jacob Moracha's photo
jacob Moracha
·

3 min read

Introduction

Vite is a modern web development ecosystem that enables developers to build fast, efficient, and highly performant applications with less code. Vite is a next-generation build tool for the web. It is used for creating, building, and deploying fast, modern, and optimized web applications.

Because of its many advantages and ease of use, Vite has become the go-to choice for React developers looking to create modern, high-performance apps with fast loading speeds and fewer errors. It is ideal for creating single-page applications (SPAs) and progressive-web applications (PWAs) and offers enhanced security and scalability.

Prerequisites

  • Node.js version 12.2.0+ installed on your environment. You can install the latest version here

  • Yarn package manager version 1.22.0+ is installed on your environment. You can follow the instructions here to install

  • Familiarity with modern JavaScript and ReactJs

    How to Create a React Application Using Vite

    Creating Vite Project

    You use Yarn a package manager for installing and running packages. Run the following command in your terminal to scaffold a new Vite project

    yarn create vite

    The command will configure the necessary tools to scaffold a React local development environment. Finally, it will open a command-line menu for project settings and language types.

output:
yarn create v1.22.19
warning package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-vite@3.2.1" with binaries:
      - create-vite
      - cva

After the script finishes, you will be prompted to enter a project name,

I will use testProject as my project name

output:
Project name: testProject

After the script finishes, you will be prompted to enter a package name,

output:
Package name: test

Vite allows you to bootstrap a range of project types. It supports React, Preact, Vue, Lit, Svelte, and vanilla JavaScript projects. Use the arrow keys to select react

output:
? Select a framework: » - Use arrow-keys. Return to submit.
    vanilla
    vue
>   react
    preact
    lit
    svelte

After selecting the React framework, Vite will prompt you to choose the language type. You can use JavaScript or TypeScript to work on your project

output:
? Select a variant: › - Use arrow-keys. Return to submit.
❯   JavaScript
    TypeScript

After setting up the framework, you will see an output that the project has been scaffolded. Vite will then instruct you to install dependencies using Yarn:

output:
Scaffolding project in /pathtoproject/testProject...
Done. Now run:
  cd testProject
  yarn
  yarn dev
Done in 47.81s.

navigate to the folder

 cd testProject

Then, use the yarn command to install the dependencies of the project:

yarn

Starting the Development Server

yarn dev

This command is an alias of the vite command. It will run your project in development mode.

You will see the following output:

output:
yarn run v1.22.19
warning ../package.json: No license field
$ vite
  VITE v3.2.4  ready in 463 ms
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Next, open your browser and visit the Url http://localhost:5173/ to view your application

When you see this app running as below, you have successfully installed React with Vite. You can edit the App.jsx files to see your changes.

Conclusion

Vite streamlines the development process and reduces the time required to build React applications, so developers can focus on creating user experiences that are fast, responsive, and engaging.

Wanna learn more on Vite please check out the official documentation here Thank you for reading !!!!!. Happy Hacking

ReactviteJavaScriptDeveloperProgramming Blogs