DEV Community

davinceleecode
davinceleecode Subscriber

Posted on • Edited on

Setting Up a New React Project with Vite

#webdev #programming #beginners #learning

1. Check if Node.js is Installed

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

node -v
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

7. Install Dependencies

To install the necessary dependencies, run:

npm install
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

If you found this helpful, consider supporting my work at ☕ Buy Me a Coffee.

Top comments (0)