Open the project folder in VS Code, open the integrated terminal (View > Terminal, or Ctrl+` on Windows and Linux), and run the project’s start script. For a Vite React app that script is npm run dev. Open the local URL the terminal prints, and leave the process running while you work. Which command you need depends on how the project was built, so this guide covers both creating a new app and running an existing one.
Quick start: a new React app with Vite
These three commands create and run a new Vite React project. Vite’s Getting Started guide documents the React template and the dev script.
npm create vite@latest my-app -- --template react
cd my-app
npm run devVite prints a local address in the terminal. Open that exact address in your browser. Don’t assume a fixed port: the URL can differ if the default port is taken or the configuration changes. Stop the server with Ctrl+C when you are done.
Prerequisites
VS Code is an editor and terminal host. Node.js and the project’s development server do the actual running. The VS Code Node.js tutorial covers this setup, and npm comes bundled with Node.js.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
- Install Node.js. Vite’s current guide lists Node.js 20.19+ or 22.12+ as required, and some templates may need a newer version, so check the guide if you hit a version error.
- In a terminal, run
node --versionandnpm --version. Both should print version numbers. - If either command is not recognized, or the version is too old, install or update Node.js and then open a fresh terminal so it picks up the updated PATH.
Step by step in VS Code
- Choose File > Open Folder and open the directory where the project will live (or the existing project’s folder). See the VS Code terminal guide for terminal basics.
- Open View > Terminal. The terminal starts in the open folder.
- For a new project, run
npm create vite@latest my-app -- --template react. For an existing project, skip this step. - Run
cd my-app(use your own folder name). If dependencies are not installed yet, which is typical for a freshly cloned project, runnpm install. - Run
npm run dev. - Open the printed local URL in a browser. Edit files under
srcin VS Code and save. Vite’s dev server supports Hot Module Replacement, so the browser usually updates without a full reload, though the behavior depends on the project and the edit.
Running an existing project: check package.json first
Not every React app uses the same command. Open package.json and look at the "scripts" section. A Vite scaffold normally has dev, so you run npm run dev. The older Create React App example in the VS Code React tutorial uses npm start. Run whichever script the project actually defines. If the project is a Next.js app or another framework, use the commands in its own documentation.
Why this guide uses Vite, not Create React App
React’s current guidance is to start a new app with a framework. For projects that suit a build tool, or for learning the basics, its from-scratch guide names Vite, Parcel and Rsbuild. React’s installation page notes that Create React App has been deprecated.
Rank #2
The VS Code React tutorial is still useful for editor concepts, but its worked example uses Create React App. It carries a notice that Create React App is no longer actively maintained, and it says: “The React team now recommends using a framework like Vite (npm create vite@latest my-app -- --template react) or Next.js.” Vite is therefore a sound choice for a simple local app. For full-stack features, a framework such as Next.js fits better. React Native apps use a separate toolchain (Metro), so don’t apply these web instructions to them.
Troubleshooting
“node” or “npm” is not recognized
Node.js may be missing, or the terminal was opened before installation and doesn’t have the updated PATH. Install Node.js, then open a new terminal (or restart VS Code).
Unsupported Node.js version
Run node --version and compare it with Vite’s requirement (20.19+ or 22.12+ at the time of writing). Update Node.js if it is older.
“Missing script: dev”
Either the terminal is in the wrong directory, or the project doesn’t use Vite. Run cd into the folder that contains package.json, then check its scripts and use the one it defines, such as npm start.
The browser can’t open the page
Confirm the dev server is still running in the terminal, and use the exact address it printed rather than a remembered port. If you pressed Ctrl+C or closed the terminal, the server has stopped; run the script again.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
