How to Set Up React 19 with TypeScript and Vite on macOS in 2025

Setting up a React development environment can feel overwhelming with so many toolchain options available. If you're on macOS and want to build a modern React 19 project with TypeScript support and blazing-fast Vite bundling, this guide walks you through the exact steps—no guesswork.

By the end of this article, you'll have a fully functional React 19 + TypeScript + Vite project ready for development, with hot module replacement (HMR) and all the productivity features you need.

Why Vite Over Create React App?

Create React App was long the standard for bootstrapping React projects. However, Vite has become the preferred choice for most React developers in 2025 because:

• Near-instant HMR: Changes appear in your browser in milliseconds, not seconds
• Faster builds: Vite uses native ES modules, making development builds significantly quicker
• Better TypeScript support: Built-in type checking without extra configuration
• Lighter setup: No bloated default dependencies you'll never use
• Active maintenance: Vite is heavily backed by the Vue and React communities

While React's documentation now recommends frameworks like Next.js for new projects, Vite remains the best choice for lightweight SPAs and learning environments.

Prerequisites

Before you start, ensure you have the following installed on your macOS machine:

• Node.js 18+: Check your version with node --version. Install via Homebrew if needed: brew install node
• npm or yarn: Comes with Node.js by default
• Git: For version control (optional but recommended)
• A code editor: VS Code is recommended for excellent TypeScript support

Step-by-Step Setup Guide

Step 1: Create a New Vite Project

Open your terminal and run:

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

This command scaffolds a new Vite project with the React + TypeScript template. When prompted, confirm the template selection. The --template react-ts flag ensures TypeScript is configured from the start.

Step 2: Navigate and Install Dependencies

cd my-react-app
npm install

Vite will create node_modules/ and lock your exact dependency versions in package-lock.json. On an M-series Mac, this should complete in under a minute.

Step 3: Start the Development Server

npm run dev

You should see output similar to:

  VITE v5.2.0  ready in 234 ms

  ➜  Local:   http://localhost:5173/
  ➜  press h + enter to show help

Open http://localhost:5173/ in your browser. You'll see the default React app with hot reload enabled.

Step 4: Verify TypeScript Configuration

Open tsconfig.json in your project root. Vite pre-configures sensible defaults:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "noEmit": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

The "strict": true setting enforces strict type checking—highly recommended for catching bugs early.

Understanding Your Project Structure

Vite creates this minimal folder layout:

my-react-app/
├── node_modules/        # Dependencies
├── public/              # Static assets
├── src/
│   ├── App.tsx         # Root component
│   ├── App.css         # Component styles
│   ├── main.tsx        # Entry point
│   └── vite-env.d.ts   # Type definitions for Vite
├── index.html          # HTML template (the real entry point)
├── package.json        # Project metadata
├── tsconfig.json       # TypeScript config
└── vite.config.ts      # Vite configuration

Unlike Create React App, index.html sits at the root—Vite treats it as the actual entry point, which is more standards-compliant.

Creating Your First Component

Edit src/App.tsx to create a typed component:

import { useState } from 'react';
import './App.css';

interface CounterProps {
  initialValue?: number;
}

function App({ initialValue = 0 }: CounterProps) {
  const [count, setCount] = useState<number>(initialValue);

  return (
    <div className="card">
      <button onClick={() => setCount((count) => count + 1)}>
        Count: {count}
      </button>
    </div>
  );
}

export default App;

Notice the useState<number> generic type. TypeScript will now catch errors like setCount('not a number') at development time, not runtime.

Common Macbook-Specific Issues and Solutions

Issue: Port 5173 Already in Use

If another process occupies the default port, Vite automatically tries 5174, 5175, etc. You can explicitly set a port:

npm run dev -- --port 3000

Issue: M1/M2 Mac Module Resolution Errors

Rare, but some packages have ARM64 compatibility issues. Update all dependencies:

npm install -g npm@latest
npm update

Issue: TypeScript Errors on Save

If VS Code shows false TypeScript errors, restart the TypeScript language server:

1. Press Cmd + Shift + P
2. Type "TypeScript: Restart TS Server"
3. Press Enter

Building for Production

When ready to deploy, create an optimized build:

npm run build

Vite outputs a minified, bundled version to the dist/ folder:

dist/
├── index.html
├── assets/
│   ├── index-xxxxx.js
│   └── index-xxxxx.css

Upload the dist/ folder to any static host (Vercel, Netlify, AWS S3, etc.).

Next Steps

Now that your environment is set up:

1. Learn React fundamentals: Follow the React documentation to understand hooks, state management, and effects
2. Add a router: Install react-router-dom for multi-page navigation
3. Set up state management: Consider Zustand or TanStack Query for complex apps
4. Add linting: Install ESLint and Prettier for code quality
5. Deploy: Use Vercel or Netlify for zero-config React hosting

Comparison: Vite vs Other Setup Methods

| Tool | Setup Time | TypeScript Support | HMR Speed | Learning Curve | Best For | |------|-----------|-------------------|-----------|----------------|----------| | Vite + React | < 1 min | Built-in | < 100ms | Low | SPAs, prototypes | | Create React App | ~2 mins | Optional | 1-2s | Low | Legacy projects | | Next.js | ~2 mins | Built-in | < 100ms | Medium | Full-stack apps | | Astro | ~2 mins | Built-in | < 100ms | Medium | Static sites |

Troubleshooting

Q: My changes aren't reflecting in the browser. A: Ensure npm run dev is still running. Kill the process and restart it.

Q: TypeScript strict mode errors on existing code? A: Set "strict": false temporarily in tsconfig.json, then gradually enable rules as you refactor.

Q: Can I add React Router or other libraries? A: Yes, install via npm: npm install react-router-dom. Vite handles all imports automatically.

Conclusion

You now have a modern React 19 development environment on macOS with TypeScript and Vite's lightning-fast tooling. This setup scales from simple prototypes to production applications without needing to eject or reconfigure.

The combination of React's declarative component model, TypeScript's type safety, and Vite's developer experience makes this the recommended stack for 2025. Start building!