Skip to content
Learni
View all tutorials
Outils Frontend

How to Configure Vite with React and TypeScript in 2026

14 minINTERMEDIATE
ReactTypeScriptVite
Lire en français

Introduction

Vite has established itself as the fastest frontend build tool on the market. In 2026, it remains the preferred choice for React TypeScript projects thanks to its instant development server and optimized bundling. This intermediate tutorial guides you step by step to create a professional configuration, including strict TypeScript, essential plugins, and production optimizations. You will learn how to structure a scalable project and avoid common pitfalls in advanced configurations.

Prerequisites

  • Node.js 20+
  • Basic knowledge of React and TypeScript
  • npm or pnpm installed

Project Initialization

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

This command creates a Vite project using the official React TypeScript template. It installs the basic dependencies needed to get started quickly.

Strict TypeScript Configuration

Enable TypeScript's strict options for improved type safety in your application.

Advanced TypeScript Configuration

tsconfig.json
{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

This file enables strict mode and modern TypeScript options tailored for Vite. It prevents silent errors in production.

Main Vite Configuration

vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    open: true
  },
  build: {
    target: 'es2022',
    minify: 'esbuild',
    sourcemap: true
  }
})

The configuration file activates the React plugin and defines build options optimized for production with ES2022 support.

Adding the Compression Plugin

terminal
npm install -D vite-plugin-compression

This plugin adds automatic gzip and brotli compression during the build to reduce asset sizes.

Updating the Config with Compression

vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import compression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    react(),
    compression({ algorithm: 'gzip' }),
    compression({ algorithm: 'brotliCompress', ext: '.br' })
  ],
  build: {
    target: 'es2022',
    minify: 'esbuild'
  }
})

Add both compression instances to generate .gz and .br files, improving loading performance.

Best Practices

  • Always use aliases for imports (@/src)
  • Enable sourcemaps in production for debugging
  • Configure environment variables via .env
  • Test the build with vite build --mode staging

Common Errors to Avoid

  • Forgetting to install TypeScript types for plugins
  • Using relative paths instead of aliases
  • Ignoring optimized dependency warnings
  • Not correctly configuring the ES target for target browsers

Going Further

Discover our Learni courses on modern build tools and frontend optimization.