cb3fcdd806
Add comprehensive DEV_SETUP.md with: - Instructions to run UI and API together or separately - Port configuration (UI: 3000, API: 3001) - Troubleshooting guide for common issues - List of all available features with URLs - Development commands reference Helps developers get started quickly and debug API connectivity issues.
116 lines
2.8 KiB
Markdown
116 lines
2.8 KiB
Markdown
# Development Setup
|
|
|
|
## Running the Application
|
|
|
|
This application requires both the **UI** (Next.js) and the **API** (Rust) to be running.
|
|
|
|
### Quick Start
|
|
|
|
**Option 1: Run both together (recommended)**
|
|
```bash
|
|
pnpm dev:all
|
|
```
|
|
|
|
**Option 2: Run separately in different terminals**
|
|
|
|
Terminal 1 - API:
|
|
```bash
|
|
pnpm dev:api
|
|
# or
|
|
cd ../pastel-api && cargo run
|
|
```
|
|
|
|
Terminal 2 - UI:
|
|
```bash
|
|
pnpm dev
|
|
```
|
|
|
|
## Ports
|
|
|
|
- **UI (Next.js)**: http://localhost:3000
|
|
- **API (Rust)**: http://localhost:3001
|
|
|
|
## API Setup
|
|
|
|
The Pastel API must be running on port 3001 for the UI to work. If you see "Failed to lighten color!" or 404 errors, it means the API is not running.
|
|
|
|
### First Time API Setup
|
|
|
|
```bash
|
|
cd ../pastel-api
|
|
|
|
# Build the API
|
|
cargo build --release
|
|
|
|
# Run the API
|
|
cargo run
|
|
```
|
|
|
|
The API will start on `http://localhost:3001` and the UI will automatically connect to it.
|
|
|
|
## Environment Files
|
|
|
|
- **UI**: `.env.local` - Sets `NEXT_PUBLIC_API_URL=http://localhost:3001`
|
|
- **API**: `../pastel-api/.env` - Sets `PORT=3001`
|
|
|
|
## Troubleshooting
|
|
|
|
### API not responding (404 errors)
|
|
|
|
**Problem**: UI shows "Failed to lighten color!" or console shows 404 errors
|
|
|
|
**Solution**:
|
|
1. Check if API is running: `curl http://localhost:3001/api/v1/health`
|
|
2. If not running, start it: `cd ../pastel-api && cargo run`
|
|
3. Check the API `.env` file has `PORT=3001`
|
|
|
|
### Port already in use
|
|
|
|
**Problem**: Error: "Address already in use"
|
|
|
|
**Solution**:
|
|
```bash
|
|
# Find what's using the port
|
|
lsof -i :3000 # for UI
|
|
lsof -i :3001 # for API
|
|
|
|
# Kill the process or use different ports
|
|
```
|
|
|
|
### API build errors
|
|
|
|
**Problem**: Cargo build fails
|
|
|
|
**Solution**:
|
|
1. Ensure Rust is installed: `rustc --version`
|
|
2. Update Rust: `rustup update`
|
|
3. Check `../pastel-api/Cargo.toml` for dependencies
|
|
|
|
## Features Available
|
|
|
|
Once both UI and API are running, you can access:
|
|
|
|
- **Playground**: http://localhost:3000/playground - Color manipulation with history
|
|
- **Harmony Palettes**: http://localhost:3000/palettes/harmony - Generate color harmonies
|
|
- **Distinct Colors**: http://localhost:3000/palettes/distinct - Visually distinct colors
|
|
- **Gradient Creator**: http://localhost:3000/palettes/gradient - Color gradients
|
|
- **Color Blindness**: http://localhost:3000/accessibility/colorblind - Simulate color blindness
|
|
- **Contrast Checker**: http://localhost:3000/accessibility/contrast - WCAG compliance
|
|
- **Batch Operations**: http://localhost:3000/batch - Process multiple colors
|
|
|
|
## Development Commands
|
|
|
|
```bash
|
|
# UI commands
|
|
pnpm dev # Start Next.js dev server
|
|
pnpm build # Production build
|
|
pnpm lint # Run ESLint
|
|
pnpm type-check # TypeScript checking
|
|
|
|
# API commands (from pastel-api directory)
|
|
cargo run # Run in dev mode
|
|
cargo build # Build debug version
|
|
cargo build --release # Build optimized version
|
|
cargo test # Run tests
|
|
```
|