255 words

1 minute

Why Vite? (And How to Set It Up)

2024-04-20

Development

Vite

/

React

/

Build Tools

/

Web Development

Why Vite?#

Forget Create React App. Vite is the answer.

Vite vs CRA - No Contest#

Feature	Vite	Create React App
Dev Server Start	~300ms	~30+ seconds
Hot Reload	Instant	1-3 seconds
Build Time	Fast	Slow
Bundle Size	Smaller	Larger
Modern JS	Native	Polyfills

Quick Start#

React + TypeScript#

1
npm create vite@latest my-app -- --template react-ts
2
cd my-app
3
npm install
4
npm run dev

Vue#

1
npm create vite@latest my-app -- --template vue

Vanilla#

1
npm create vite@latest my-app -- --template vanilla

Project Structure#

1
my-app/
2
├── public/
3
│   └── favicon.ico
4
├── src/
5
│   ├── components/
6
│   ├── App.tsx
7
│   ├── main.tsx
8
│   └── index.css
9
├── index.html
10
├── package.json
11
├── tsconfig.json
12
└── vite.config.ts

My Vite Config#

1
import { defineConfig } from 'vite';
2
import react from '@vitejs/plugin-react';
3
import path from 'path';
4

5
export default defineConfig({
6
  plugins: [react()],
7
  resolve: {
8
    alias: {
9
      '@': path.resolve(__dirname, './src'),
10
    },
11
  },
12
  server: {
13
    port: 3000,
14
    open: true,
15
  },
16
  build: {
17
    outDir: 'dist',
18
    sourcemap: true,
19
  },
20
});

Path Aliases (Game Changer)#

1
resolve: {
2
  alias: {
3
    '@': path.resolve(__dirname, './src'),
4
    '@components': path.resolve(__dirname, './src/components'),
5
    '@utils': path.resolve(__dirname, './src/utils'),
6
  },
7
}

Now you can do:

1
import Button from '@components/Button';
2
import { formatDate } from '@utils/date';

Instead of:

1
import Button from '../../../components/Button';
2
// gross

Environment Variables#

1
VITE_API_URL=https://api.example.com
2
VITE_APP_NAME=My App

1
// Use it like this
2
const apiUrl = import.meta.env.VITE_API_URL;

Adding Tailwind#

1
npm install -D tailwindcss postcss autoprefixer
2
npx tailwindcss init -p

1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;

Why Is Vite So Fast?#

Native ESM — No bundling in dev mode
esbuild — 10-100x faster than webpack
Hot Module Replacement — Only updates what changed
On-demand compilation — Only compiles what you need

Commands#

1
# Development
2
npm run dev
3

4
# Build for production
5
npm run build
6

7
# Preview production build
8
npm run preview

Once you go Vite, you never go back!

Seriously, try it. You’ll thank me later.

Why Vite? (And How to Set It Up)

https://blog.lukkid.dev/posts/why-vite/

Author

LUKKID

Published at

2024-04-20

License

CC BY-NC-SA 4.0

Database Showdown - SQL vs NoSQL

Why I Love React (And You Should Too)

1

Why Vite?

Vite vs CRA - No Contest

Quick Start

Project Structure

My Vite Config

Path Aliases (Game Changer)

Environment Variables

Adding Tailwind

Why Is Vite So Fast?

Commands