React Vite Development
Fast React SPA development with Vite.
Instructions
1. Project Structure
src/
├── main.tsx # Entry point
├── App.tsx # Root component
├── components/
│ ├── ui/ # Reusable UI
│ └── features/ # Feature components
├── hooks/ # Custom hooks
├── lib/ # Utilities
├── pages/ # Page components
├── store/ # State management
├── types/ # TypeScript types
└── styles/ # Global CSS
2. Vite Configuration
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
server: {
port: 3000,
proxy: {
'/api': 'http://localhost:8000',
},
},
build: {
rollupOptions: {
output: {
manualChunks: {
vendor: ['react', 'react-dom'],
},
},
},
},
});
3. Environment Variables
# .env
VITE_API_URL=http://api.example.com
VITE_APP_NAME=My App
# Usage
const apiUrl = import.meta.env.VITE_API_URL;
4. Path Aliases
// tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}
5. React Router Setup
// src/main.tsx
import { BrowserRouter } from 'react-router-dom';
ReactDOM.createRoot(document.getElementById('root')!).render(
<BrowserRouter>
<App />
</BrowserRouter>
);
// src/App.tsx
import { Routes, Route } from 'react-router-dom';
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="*" element={<NotFound />} />
</Routes>
);
}
6. Lazy Loading Routes
import { lazy, Suspense } from 'react';
const Dashboard = lazy(() => import('./pages/Dashboard'));
function App() {
return (
<Suspense fallback={<Loading />}>
<Routes>
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
</Suspense>
);
}
7. Development Scripts
{
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"lint": "eslint src --ext ts,tsx"
}
}
References
