Running the React Development Server

Full-project lesson · needs Node.js, npm and real project files, so it does not run in the in-page playground.

The development server is where you will spend most of your time. It serves your app, reloads the page when you save, and shows errors.

Start and stop

1

npm run dev

The terminal prints the address. Leave this terminal running while you work, and use a second one for other commands. Press Ctrl + C to stop.

Hot module replacement

When you save a file, Vite sends only the changed module to the browser. React updates the screen without a full reload, and in most cases it keeps your component state. Try this:

1. Click the counter button a few times.
2. Change the text in App.jsx and save.
3. The text changes and the count stays.

If an edit changes things in a way that cannot be applied safely, Vite reloads the page for you.

Useful options

Options go after -- so npm passes them on to Vite:

1
2
3

npm run dev -- --port 3000
npm run dev -- --host
npm run dev -- --open

• --port 3000 uses port 3000.
• --host makes the server reachable from other devices on your network, such as your phone. Open the Network address that Vite prints.
• --open opens the browser for you.

You can also set these permanently in vite.config.js under server.

Reading errors

When your code has a syntax error, Vite shows an error overlay in the browser with the file name, the line and a code excerpt. The terminal shows the same message. Fix the line and save; the overlay disappears.

Runtime errors, such as reading a property of undefined, appear in the browser’s Console (press F12). React warnings also appear there. Read them: React tells you what is wrong and often how to fix it.

Dev server is not the production build

The dev server is for development only. It serves many separate files, is not optimised and includes extra checks. To see what you will actually deploy, build and preview it:

1
2

npm run build
npm run preview

build creates an optimised dist folder; preview serves that folder locally. Production Builds with Vite covers this in detail.

Key points

• npm run dev starts the server; save a file and the browser updates by itself.
• Add -- --host to test on a phone, -- --port to change the port.
• Errors show in the browser overlay, the terminal and the console.