React Dev Environment Setup (Vite + TypeScript)

A production-grade React application starts with a deliberate toolchain, not a boilerplate you don’t understand. This guide walks you through configuring a modern development environment using Vite, React, and TypeScript. You will learn what each tool contributes, why it was chosen over alternatives, and how to avoid the configuration drift that turns project setup into technical debt.

By the end, you will have a running dev server, a clear picture of the project structure, and the confidence to explain every dependency in your package.json.

Prerequisites

You need a recent Node.js installation, a package manager, and a code editor. The following versions are recommended for stability and long-term support:

• Node.js 18.x or 20.x LTS (Long-Term Support). LTS releases receive critical fixes without breaking changes, making them the safe default for production projects.
• npm (ships with Node.js) version 9 or later. You can also use yarn or pnpm, but npm is sufficient and the most widely documented.
• VS Code as your editor. Its TypeScript integration, extension ecosystem, and integrated terminal make it the standard for React development.
• Git for version control. Even a single-developer project benefits from the safety net of commits and branches.

Verify your Node version with node -v and npm with npm -v before proceeding.

Why Use Vite?

Vite is the recommended build tool for new React projects. It replaces Create React App (CRA), which is no longer actively maintained and imposes slow webpack-based builds. Vite delivers a dramatically faster development experience and a lighter production output by leveraging native ES modules in the browser.

Feature	Create React App	Vite
Dev server startup	Seconds (bundles entire app)	Instant (on-demand file serving)
Hot Module Replacement (HMR)	Full component reload, slower	Near-instant updates, maintains state
Build tool	webpack (legacy config)	Rollup (optimised, tree-shaken)
Configuration	Hidden, eject required	Transparent vite.config.ts
Ecosystem momentum	Stagnating	Actively maintained, framework-agnostic

Vite serves source files directly to the browser during development, only transforming them as requested. This means you see changes in milliseconds, not seconds. For production, it bundles with Rollup, producing highly optimised static assets.

Why Use TypeScript?

TypeScript adds a static type system on top of JavaScript. It does not improve runtime performance—the browser runs plain JavaScript—but it catches entire categories of bugs at build time and provides editor autocompletion that scales with your codebase.

In a React project, TypeScript helps you:

• Document component interfaces through explicit prop types. A component’s contract is machine-checkable, not buried in comments.
• Refactor with confidence. Rename a prop or a hook return value, and TypeScript flags every affected call site.
• Catch null and undefined errors before they reach production. Strict mode eliminates the most common runtime exceptions.
• Integrate with third-party libraries via type definitions, avoiding guesswork about API shapes.

Starting with TypeScript adds a small upfront learning cost, but the payback on any project that lives longer than a few weeks is substantial.

Create Your First React Project

Open a terminal and run the following command. It uses the official Vite scaffolding tool to generate a project with preconfigured React and TypeScript support.

npm create vite@latest my-react-app -- --template react-ts

Let’s break this down:

• npm create vite@latest invokes Vite’s project generator, always using the latest stable version.
• my-react-app is the directory name for the new project.
• -- --template react-ts selects the React + TypeScript template, which sets up tsconfig, type definitions, and a basic component structure.

After the command finishes, move into the project folder and install dependencies:

cd my-react-app
npm install

Now start the development server:

npm run dev

Vite prints a local URL (usually http://localhost:5173). Open it in your browser. You will see the default Vite + React welcome page. Any edit you make to src/App.tsx now reflects instantly without a full page reload.

Understanding the Project Structure

Your new project contains the following files and directories. Each serves a specific role in the development and build pipeline.

File / Folder	Purpose
src/	All application source code lives here. Components, styles, hooks, and utilities.
src/main.tsx	The application entry point. It renders the root React component into the DOM.
src/App.tsx	The root component. You will typically replace the default content with your own application shell.
src/App.css	Styles scoped to App.tsx (by convention). You can delete this and use your own styling approach.
src/index.css	Global styles applied to the entire application.
src/vite-env.d.ts	TypeScript ambient declaration file that references Vite client types. Do not delete.
public/	Static assets that are copied verbatim to the build output. Place images, fonts, or robots.txt here.
index.html	The single HTML page that Vite uses as the entry point. Notice it lives in the root, not in public/.
node_modules/	Installed dependencies. Never commit this folder.
package.json	Project metadata, scripts, and dependency declarations.
tsconfig.json	TypeScript compiler configuration. The template includes sensible defaults for React.
tsconfig.node.json	Separate TypeScript configuration for Node-side files like vite.config.ts.
vite.config.ts	Vite configuration file. Plugins and build options are defined here.

Note the position of index.html. Unlike CRA, Vite uses the root index.html as the build entry. The <script type="module" src="/src/main.tsx"> tag inside it tells Vite where your application code starts.

Important npm Scripts

Vite provides three essential scripts, defined in package.json.

Script	Command	Purpose
dev	vite	Starts the development server with HMR. Use during active development.
build	tsc && vite build	Compiles TypeScript then builds the production bundle into dist/. Run before deployment.
preview	vite preview	Serves the production build locally for testing. Use to verify the build output before shipping.

Run npm run build then npm run preview after any configuration change that might affect the production output. The dev server and the production build do not always behave identically.

Recommended VS Code Extensions

The right extensions turn VS Code into a productive React environment without heavy IDE overhead.

• ESLint – Displays linting errors and warnings directly in the editor. Install the matching eslint npm package and configure rules.
• Prettier – Code formatter – Formats code on save. Consistent formatting reduces diff noise in code reviews.
• TypeScript Importer – Automatically adds import statements when you use a symbol. Saves time and prevents manual import errors.
• Error Lens – Inline error and warning messages right next to the problematic code. Makes it impossible to miss TypeScript errors.
• GitLens – Provides inline blame annotations and rich Git history. Useful for understanding why code was changed.

Install these from the VS Code marketplace and enable format-on-save in your settings for a seamless workflow.

Recommended Project Configuration

The generated template is a starting point. To harden it for team development, add the following layers over time.

ESLint

Vite’s React-TS template already includes a basic ESLint configuration. Extend it with plugins for React hooks and accessibility:

npm install -D eslint-plugin-react-hooks eslint-plugin-jsx-a11y

Then update .eslintrc.cjs to include the recommended rule sets. Linting catches hooks violations (missing dependency arrays, conditional hooks) before they cause runtime bugs.

Prettier

Create a .prettierrc at the project root:

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100
}

A shared Prettier config prevents formatting debates and keeps the codebase uniform.

EditorConfig

An .editorconfig file ensures basic formatting consistency across editors that may not use Prettier. Vite templates do not include one by default; add it manually.

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

Path Aliases

Relative imports like ../../../components/Button become unmanageable in large projects. Define path aliases in vite.config.ts and tsconfig.json so you can write @/components/Button instead.

In vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

In tsconfig.json, add:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Now you can import modules cleanly from the src directory root.

Common Beginner Mistakes

The setup phase is where habits form that last the lifetime of the project. Avoid these common missteps:

• Following outdated tutorials. React documentation and tooling have evolved rapidly since 2020. Tutorials that reference CRA, class components without hooks, or webpack customisation may lead you down unsupported paths.
• Editing generated configuration without understanding it. Vite’s defaults are sensible. Change them only when you have a specific requirement and can articulate why the default is insufficient.
• Ignoring TypeScript errors. Using any or // @ts-ignore to silence errors defeats the purpose of the type system. Fix the root cause; if a library lacks types, install community types from @types/.
• Committing node_modules. This folder contains hundreds of megabytes of installable artifacts. Use a .gitignore that excludes it. The generated template already does this.
• Mixing package managers. Use a single package manager (npm, yarn, or pnpm) for a given project. Mixing creates lockfile conflicts and inconsistent installs. Delete package-lock.json or yarn.lock before switching.

Best Practices

Adopt these habits from day one to keep your environment maintainable:

• Use the latest LTS Node.js. It includes performance improvements and security patches. Upgrade when a new LTS enters active maintenance.
• Keep dependencies updated. Run npm outdated periodically and apply minor/patch updates with care. Major updates require reading changelogs.
• Use TypeScript with strict: true. The template enables strict mode by default. Resist the temptation to relax it.
• Use Git from the first commit. Even an empty commit with the scaffold is better than losing configuration history.
• Avoid unnecessary packages. Before adding a dependency, ask whether the same result can be achieved with a few lines of custom code. Dependencies increase maintenance surface area.

What’s Next

Your development environment is ready. The dev server is running, TypeScript is checking your types, and the project structure is organised. The next step is to understand the workflow that turns this environment into a productive development loop.

Proceed to Understanding Modern Frontend Development Workflow to learn how bundling, hot module replacement, source maps, and the build pipeline actually work. With that knowledge, you will be able to configure and debug your toolchain, not just use it.

FAQ

Why Vite instead of Create React App? CRA is in maintenance mode and has not received significant updates. Its webpack-based dev server is slow on large projects, and configuration is locked away unless you eject. Vite provides a modern ES module-based dev server, faster HMR, and transparent configuration via vite.config.ts. The React community has largely moved to Vite for new projects.

Do I have to use TypeScript? No, but you should strongly consider it. TypeScript prevents an entire class of bugs related to props, state, and API responses. On teams, it serves as living documentation and reduces the need for prop-type validation. You can start with a JavaScript template, but migrating later is more effort than starting with TypeScript.

Which package manager should I choose? npm is the default and works well for most projects. pnpm is faster and disk-efficient. yarn is also a viable option. The important rule is consistency: pick one and stick with it across the team. The handbook assumes npm in examples.

Can I use React without Vite? Yes. React can be integrated with any build tool or even added to an existing HTML page via script tags. However, Vite (or a similar build tool) is necessary for a modern development experience with JSX compilation, TypeScript support, and optimised production builds.

Should beginners learn TypeScript immediately? If you already know JavaScript, learning TypeScript alongside React is feasible. The basic types you need for components (primitives, objects, arrays, and optional props) are straightforward. The long-term benefits of starting with TypeScript outweigh the initial learning curve. If you are completely new to JavaScript, focus on JS fundamentals first.