Page 2: Development Environment and Folder Structure

2. Development Environment and Folder Structure

A Vite React project offers a clean and efficient folder structure, including several core files and directories.

2.1. Common Folder Structure

my-react-app/
├── public/                 # Static assets (copied as-is during build)
├── src/                    # Source code
│   ├── assets/             # Images, icons, etc.
│   ├── components/         # Reusable UI components
│   ├── pages/              # Page components per route
│   ├── App.jsx             # Main application component
│   ├── main.jsx            # Entry point for the React app
│   └── index.css           # Global CSS styles
├── index.html              # Entry HTML file for the app (injected by Vite)
├── package.json            # Project info and dependencies
├── vite.config.js          # Vite configuration file
└── jsconfig.json (or tsconfig.json) # JavaScript/TypeScript config

index.html: Vite uses this file as the entry point for your application, but it dynamically injects scripts during the build process, so you don't need to add script tags manually.

2.2. vite.config.js Configuration

This is the core configuration file where you can customize Vite's behavior. For example, you can set up an alias for the src directory using the @ symbol.

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': '/src', // Allows usage like @/components/Button.jsx
    },
  },
});

This configuration allows you to import modules using absolute paths instead of complex relative paths, improving code readability.