Dev.to

Setting Up a New React Project with Vite

1. Check if Node.js is Installed Run the following command to check the Node.js version: node -v This will display the installed version of Node.js. If a version number is shown, Node.js is installed. 2. Create a Vite project: To create a new Vite project, run the following command: npm create vite@latest This command will prompt you to specify the project name and framework options. 3. Specify Project Name Enter the desired name for your project when prompted. Example: react-app-demo. 4. Select Framework When prompted to select a framework, choose: React 5. Select Variant (TypeScript or JavaScript) Choose a variant for your project: TypeScript – Recommended for better type safety and tooling. JavaScript – If you prefer plain JavaScript without TypeScript support. Other variants (depending on the framework) might include: Preact (lightweight alternative to React) Vanilla JS (no framework) ## 6. Change to Project Folder After the project is created, navigate into the project directory: cd react-app-demo 7. Install Dependencies To install the necessary dependencies, run: npm install 8. Fix Vulnerabilities (if any are found) If vulnerabilities are detected during npm install, run the following command to fix them: npm audit fix --force Note: Using --force may introduce breaking changes, so use it with caution. Now your project is ready to go! You can run the project by using: npm run dev This will start the development server and you can start building your app!

Apr 10, 2025 - 05:53
 0
Setting Up a New React Project with Vite

1. Check if Node.js is Installed

Run the following command to check the Node.js version:

node -v

This will display the installed version of Node.js. If a version number is shown, Node.js is installed.

2. Create a Vite project:

To create a new Vite project, run the following command:

npm create vite@latest

This command will prompt you to specify the project name and framework options.

3. Specify Project Name

Enter the desired name for your project when prompted. Example: react-app-demo.

4. Select Framework

When prompted to select a framework, choose:

  • React

5. Select Variant (TypeScript or JavaScript)

Choose a variant for your project:

  • TypeScript – Recommended for better type safety and tooling.
  • JavaScript – If you prefer plain JavaScript without TypeScript support. Other variants (depending on the framework) might include:
  • Preact (lightweight alternative to React)
  • Vanilla JS (no framework) ## 6. Change to Project Folder After the project is created, navigate into the project directory: 
cd react-app-demo

7. Install Dependencies

To install the necessary dependencies, run:

npm install

8. Fix Vulnerabilities (if any are found)

If vulnerabilities are detected during npm install, run the following command to fix them:

npm audit fix --force

Note: Using --force may introduce breaking changes, so use it with caution.

Now your project is ready to go! You can run the project by using:

npm run dev

This will start the development server and you can start building your app!

Read More

Tags:

Previous Article

Does Tracing Slow Down APIs?

Next Article

A Complete Guide to Handling File Uploads With Multer in Node.js

Related Posts

45+ Free GitHub Repositories That Will Instantly Level Up Your Coding Game!

45+ Free GitHub Repositories That Will Instantly Level ...

Feb 24, 2025  0

flatMap() vs filter().map(): Code Simplicity

flatMap() vs filter().map(): Code Simplicity

Feb 22, 2025  0

Laravel 12 A Beginner-Friendly Guide

Laravel 12 A Beginner-Friendly Guide

Feb 27, 2025  0