Bite-Sized Chunks

Course contentsShow

37Why Vite Replaced Create React App
38Creating a Vite + React Project
39Understanding the Project Structure
40The index.html Entry Point
41main.jsx: The React Bootstrap
42vite.config.js: Build Configuration
43Hot Module Replacement (HMR)
44Environment Variables with import.meta.env
45Static Asset Handling
46Building for Production
47Previewing the Production Build
48Migrating from Create React App
49Create React App: The Legacy Standard
50Next.js: The Full-Stack Framework
51Remix: Web Standards First
52Gatsby: Static Site Generation
53Parcel: Zero-Config Bundler
54Webpack from Scratch
55Astro with React Islands
56CDN Script Tags: React Without Build Tools
57Expo for React Native
58Choosing Your Setup: Decision Matrix
59Flat vs Nested: When Each Structure Fits
60Feature-Based vs Layer-Based Organization
61The src Folder Convention
62Colocation: Keeping Related Files Together
63The Components Folder: Shared vs Feature-Specific
64Common Top-Level Folders: hooks, utils, types
65Barrel Exports: index.js for Cleaner Imports
66When to Refactor: Signs Your Structure Needs Adjustment
67Installing React DevTools Browser Extension
68Components Tab: Inspecting the Component Tree
69Editing Props and State Live
70Profiler Tab: Recording Performance Sessions
71Reading Profiler Flamegraphs
72Finding Components by Name or Hook
73DevTools Settings and Display Options

37Why Vite Replaced Create React App
38Creating a Vite + React Project
39Understanding the Project Structure
40The index.html Entry Point
41main.jsx: The React Bootstrap
42vite.config.js: Build Configuration
43Hot Module Replacement (HMR)
44Environment Variables with import.meta.env
45Static Asset Handling
46Building for Production
47Previewing the Production Build
48Migrating from Create React App
49Create React App: The Legacy Standard
50Next.js: The Full-Stack Framework
51Remix: Web Standards First
52Gatsby: Static Site Generation
53Parcel: Zero-Config Bundler
54Webpack from Scratch
55Astro with React Islands
56CDN Script Tags: React Without Build Tools
57Expo for React Native
58Choosing Your Setup: Decision Matrix
59Flat vs Nested: When Each Structure Fits
60Feature-Based vs Layer-Based Organization
61The src Folder Convention
62Colocation: Keeping Related Files Together
63The Components Folder: Shared vs Feature-Specific
64Common Top-Level Folders: hooks, utils, types
65Barrel Exports: index.js for Cleaner Imports
66When to Refactor: Signs Your Structure Needs Adjustment
67Installing React DevTools Browser Extension
68Components Tab: Inspecting the Component Tree
69Editing Props and State Live
70Profiler Tab: Recording Performance Sessions
71Reading Profiler Flamegraphs
72Finding Components by Name or Hook
73DevTools Settings and Display Options

Lesson 42 of 2,396·2. Setup and Modern ToolingPro lesson

vite.config.js: Build Configuration

Configure plugins, aliases, and build options in this file using the @vitejs/plugin-react plugin.

This lesson is for subscribers

You've completed the free preview. Subscribe to unlock every lesson in every course.

See pricing Back to course