69 lines
1.5 KiB
Markdown
69 lines
1.5 KiB
Markdown
# Mode 1: Sandbox (Vite + React + TypeScript)
|
|
|
|
**Purpose**: Lightning-fast React setup for experiments and learning
|
|
|
|
**Setup Time**: ~15 seconds after `npm install`
|
|
|
|
## Tech Stack
|
|
- Vite 5+ (fastest dev server, HMR in <50ms)
|
|
- React 18+
|
|
- TypeScript (strict mode)
|
|
- ESLint + Prettier (minimal config)
|
|
|
|
**Configuration Strategy**: Fully automated, zero questions
|
|
|
|
## Workflow Steps
|
|
|
|
### 1. Scaffold with Vite
|
|
```bash
|
|
npm create vite@latest {project-name} -- --template react-ts
|
|
cd {project-name}
|
|
```
|
|
|
|
### 2. Configure TypeScript Strict Mode
|
|
- Update tsconfig.json with Connor's strict settings
|
|
- Enable all strict flags
|
|
- Configure path aliases
|
|
|
|
### 3. Set Up Linting
|
|
- Install ESLint + Prettier
|
|
- Apply minimal config (no overkill for sandbox)
|
|
- Add format script to package.json
|
|
|
|
### 4. Initialize Git
|
|
```bash
|
|
git init
|
|
git add .
|
|
git commit -m "feat: initial Vite + React + TypeScript setup"
|
|
```
|
|
|
|
### 5. Provide Next Steps
|
|
|
|
```markdown
|
|
## Your Sandbox is Ready!
|
|
|
|
Start development:
|
|
cd {project-name}
|
|
npm install
|
|
npm run dev
|
|
|
|
Project structure:
|
|
src/
|
|
├── App.tsx # Main component
|
|
├── main.tsx # Entry point
|
|
└── vite-env.d.ts # Vite types
|
|
|
|
Available commands:
|
|
npm run dev # Start dev server (http://localhost:5173)
|
|
npm run build # Build for production
|
|
npm run preview # Preview production build
|
|
npm run lint # Check code quality
|
|
```
|
|
|
|
## When to Use
|
|
|
|
- Quick experiments and prototypes
|
|
- Learning React concepts
|
|
- Testing ideas before enterprise implementation
|
|
- Minimal overhead needed
|