Create React App with Vite

Ahmed Shoieb Aqhtar

307 installs

This extension simplifies the process of creating a new React application using Vite. With a single command, you can scaffold a React app with the Vite bundler, complete with all the necessary configurations. Just provide a project name, and the extension will automatically create the project folder

Installation

Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

Copied to clipboard

More Info

Create Vite React App Extension

This Visual Studio Code extension simplifies the process of creating a new React app using Vite as the build tool. It automates the creation of a React app, installs dependencies, and customizes the App.jsx file with a predefined template.

Features

Create a React app with Vite: Instantly create a new React app using the Vite template.
Install dependencies: Automatically installs all required dependencies for the React app.
Update App.jsx: Customizes the App.jsx file with a template message that includes the app name.

Prerequisites

Before using this extension, make sure you have the following installed:

Visual Studio Code
Node.js
npm, which comes with Node.js
npx (for running the create-vite command)

Installation

1. Install the Extension

Open Visual Studio Code.
Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window or pressing Ctrl+Shift+X.
Search for create-react-vite.
Click Install on the extension.

2. Use the Extension

Open a folder in VS Code where you want to create your React app.
Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) to open the command palette.
Search for Create React App.
Enter the name of your app when prompted (ensure it follows the allowed naming rules: letters, numbers, underscores, and hyphens).
Wait for the extension to automatically create the React app, install dependencies, and update the App.jsx file with a custom template.

3. Verify the App

After the extension finishes, navigate to the newly created app folder.
Open the app in VS Code and run it using npm run dev.
You should see the default Vite React app with a custom message in App.jsx.

Commands

`vite-react-app.createReactApp`

This command will trigger the creation of a new React app using Vite, install the dependencies, and update the App.jsx file with custom content.

License

This extension is open-source and available under the MIT License.

Acknowledgments

Vite for providing an excellent modern build tool for fast and optimized development.
Visual Studio Code for providing an extensible and powerful IDE.

Feel free to reach out for any issues or improvements you would like to see in the extension!