Install React + Vite + TypeScript (TSX)

Back to All Posts

1. Ensure Node.js is Installed

Before starting, make sure you have Node.js installed (version 16.8 or later). Check with:

node -v

If not installed, download it from https://nodejs.org/.

2. Create a React Project with Vite

Run the following command to create a new project:

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

For Yarn:

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

For PNPM:

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

Explanation:

  • my-app is your project name (change as needed).
  • --template react-ts sets up React with TypeScript.

3. Navigate to the Project Folder

cd my-app

4. Install Dependencies

npm install

For Yarn:

yarn install

For PNPM:

pnpm install

5. Start the Development Server

Run:

npm run dev

For Yarn:

yarn dev

For PNPM:

pnpm dev

If successful, you will see:

  VITE vX.X.X ready in Xms
  ➜  Local: http://localhost:5173/

Open http://localhost:5173/ in your browser.

6. Project Structure

Your project will have the following structure:

my-app/
├── node_modules/
├── public/
│   ├── vite.svg
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.tsx
│   ├── main.tsx
│   ├── index.css
│   └── vite-env.d.ts
├── .gitignore
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

Key Files:

  • src/main.tsx → Application entry point.
  • src/App.tsx → Main React component.
  • vite.config.ts → Vite configuration.
  • tsconfig.json → TypeScript configuration.
  • public/ → Stores static assets.

7. Modify App.tsx

Edit src/App.tsx for a cleaner layout:

import React from "react";

const App: React.FC = () => {
  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>Hello, React + Vite + TypeScript!</h1>
      <p>Welcome to a fast and lightweight React project 🚀</p>
    </div>
  );
};

export default App;

8. Build for Production

To create a production build, run:

npm run build

For Yarn:

yarn build

For PNPM:

pnpm build

This generates a dist/ folder, which you can preview with:

npm run preview

9. Optional: Install ESLint & Prettier

To improve code quality, install ESLint and Prettier:

npm install -D eslint prettier eslint-config-prettier eslint-plugin-prettier

Create .eslintrc.cjs:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react", "@typescript-eslint", "prettier"],
  rules: {
    "prettier/prettier": ["error"],
  },
};

Add formatting to package.json:

"scripts": {
  "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\""
}

Run formatting:

npm run format

🎉 Done!

Your React + Vite + TypeScript project is ready! 🚀

Why Choose Vite over CRA? ✅ Faster (instant HMR) ✅ Simpler configuration ✅ Lightweight (no Webpack bloat) ✅ Better TypeScript support

Enjoy coding! 🚀