Building and Running a React TypeScript App with Vite

Welcome! This course will take you from a small React application to a typed user-management interface, then add routing, data access, forms, and tests. First, you need a project you can run and check reliably. In this lesson, you’ll create a React and TypeScript app with Vite, use its development server, check its types separately, and produce a production build. Allow about 40 minutes, including the setup.

Scaffold the application

Vite provides the development server and build tooling; React provides the UI library. The React + TypeScript template connects them and supplies a working starting project, so there is no need to configure TypeScript by hand.

Before starting, check that Node.js and npm are available:

node --version
npm --version

The current Vite guide specifies Node.js 20.19+ or 22.12+ as its minimum supported version ranges. If your version is too old, update Node.js before continuing.

From a directory where you keep projects, run:

npm create vite@latest

If npm asks permission to install create-vite, accept. Give the project a non-sensitive name such as user-admin, select React as the framework, and select TypeScript as the variant. Then follow the commands Vite prints, using your chosen directory name:

cd user-admin
npm install
npm run dev

npm install downloads the dependencies declared by the project. npm run dev starts Vite’s development server. Open the local URL printed in your terminal rather than assuming a particular port. Leave that terminal running while you work; press Ctrl+C when you want to stop the server.

The short demonstration below shows this process in a React and TypeScript project. Its generated files or script details may differ from your current template, so treat your own package.json as the authority for your project.

Know what the development server is running

Open the generated project in your editor. A few files explain most of its startup path:

• package.json declares dependencies and scripts. When you run npm run dev, npm executes the command under its dev script—typically vite.
• index.html is the page Vite serves. It references the application’s entry file, typically src/main.tsx.
• src/main.tsx starts React in the page, while src/App.tsx contains the starter interface you see in the browser.
• Files named tsconfig.json and often tsconfig.app.json or tsconfig.node.json hold TypeScript configuration. The exact arrangement can vary by template version.

The .tsx extension means the file can contain TypeScript and JSX, React’s markup-like syntax. We’ll work through components and JSX in the next lesson; for now, you only need to recognize where the visible page comes from.

With the development server still running, change an existing heading’s text in src/App.tsx and save. The browser should update without another npm run dev. This fast edit-and-view loop is what the development command is for. It is not a production build.

Check types explicitly

There is an important distinction between showing the app in a browser and checking whether its TypeScript is valid. Vite transforms TypeScript so the browser can run the resulting JavaScript, but its development server does not perform a full TypeScript type check. An editor may highlight a type error while the page still appears to run.

First inspect your available commands:

npm run

The generated scripts may include dev, build, and preview without a separate typecheck script. To make type checking an explicit, repeatable command, add one:

npm pkg set "scripts.typecheck=tsc -b"
npm run typecheck

The first command updates package.json; the second runs the TypeScript compiler against the template’s project configuration. A successful run may print little or nothing and return you to the prompt.

To see why this check matters, you can briefly put the following two lines below the imports in src/App.tsx, save, and run npm run typecheck again:

const label: string = 42
console.log(label)

TypeScript should report that a number cannot be assigned to a string. Remove both lines and rerun the check; it should pass again. The development server and the type checker answer different questions, so keep both in your workflow.

Build and preview the production files

The commands in package.json are worth reading before running them. In many React and TypeScript Vite templates, build runs a TypeScript check followed by vite build; other template versions may define it differently. Do not assume npm run build checks types unless its script says so. You now have npm run typecheck either way.

Stop the development server with Ctrl+C, then run:

npm run typecheck
npm run build

A successful build creates a dist/ directory containing the generated site files. Unlike src/, which you edit, dist/ is output you regenerate. To inspect that output locally, run:

npm run preview

Open the URL printed by the preview command. Preview serves the files from the build; it is useful for a final local check, but it is not intended to be a production hosting server. Stop it with Ctrl+C when finished.

You now have three distinct commands to carry into the rest of the course: npm run dev for the edit-and-view loop, npm run typecheck for TypeScript validation, and npm run build for production files. Use npm run preview when you want to inspect those built files locally. Next, you’ll replace the starter interface with a typed React function component and trace when React renders it.