Home

Published

- 2 min read

Create React App with Vite

img of Create React App with Vite

How to Set Up a React App with Vite Build Tool and PNPM Package Manager?

In this tutorial, we’ll walk through the steps to set up a React application using Vite as the build tool and PNPM as the package manager.

Prerequisites

  • Ensure you have Node.js installed. If not, download it here (LTS recommended).
  • For Windows users, install PNPM using PowerShell. Other OS installation instructions can be found here.

Step 1: Installing Node.js

  • Download Node.js: Visit Node.js official website and download the LTS version.
  • Install Node.js: Follow the installation instructions for your operating system.
  • Verify Node.js Installation: Open a terminal or command prompt and run node -v to check the installed Node.js version.

Step 2: Installing PNPM

For Windows users:

  • Open PowerShell: Launch PowerShell as an administrator.
  • Run PNPM Installation Script: Copy and paste the following command and hit Enter.
iwr https://get.pnpm.io/install.ps1 -useb | iex
  • Verification: Once the installation is complete, verify PNPM installation by running pnpm -v in the PowerShell.

For other operating systems, refer to the official PNPM installation guide for detailed instructions.

Step 3: Creating a React App with Vite

  • Create Project Folder: Open your terminal and create a folder for the project.
  • Access Terminal in the Project Folder: Navigate to the project folder using the terminal.
  • Initialize React App: Type pnpm create vite and press Enter.
  • Enter Project Name: Provide a name for your project when prompted (refer to the screenshot for guidance).

  • Select React as Framework: Choose React when asked to select the framework.

  • Choose JavaScript: Select “javascript” when prompted.

  • Run the Project: Once the setup is complete, navigate into the project directory and start the development server.

Conclusion

Congratulations! You’ve successfully set up a React application using Vite as the build tool and PNPM as the package manager. Feel free to explore and start building your React projects with this setup.

Related Posts

There are no related posts yet. 😢