Setting Up a React Project with Vite and TypeScript

Hey team! Let’s set up a modern React project using Vite and TypeScript. This is currently the fastest and most efficient way to get started with React development.

Why Vite?

Vite (French for “fast”) is a build tool that provides an extremely fast development server and optimized builds. It’s significantly faster than Create React App and has become the go-to choice for modern React projects.

Quick Setup

1. Create the Project 

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

Alternative method:

yarn create vite my-react-app --template react-ts
cd my-react-app

2. Install Dependencies 

npm install
# or
yarn install

3. Start Development Server 

npm run dev
# or
yarn dev

Your app will be running at http://localhost:5173 (Vite’s default port).

Project Structure

After creation, your project will look like this:

my-react-app/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.tsx
│   ├── App.css
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

Available Scripts

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run preview - Preview production build locally
  • npm run lint - Run ESLint

Environment Variables

Create a .env file in your project root:

VITE_API_URL=https://api.yourapp.com
VITE_APP_TITLE=My React App

Access them in your code:

const apiUrl = import.meta.env.VITE_API_URL;
const appTitle = import.meta.env.VITE_APP_TITLE;

Last updated: July 10, 2025

This setup gives you a modern, fast, and type-safe React development environment. Vite’s hot module replacement (HMR) is incredibly fast, making your development experience much more enjoyable!