439 lines
8.1 KiB
Markdown
439 lines
8.1 KiB
Markdown
# Local Development Setup Guide
|
|
|
|
This guide provides step-by-step instructions for setting up and running the Data Analysis Platform on your local machine.
|
|
|
|
---
|
|
|
|
## Table of Contents
|
|
|
|
1. [Prerequisites Installation](#1-prerequisites-installation)
|
|
2. [Backend Setup](#2-backend-setup)
|
|
3. [Frontend Setup](#3-frontend-setup)
|
|
4. [Running Both Services](#4-running-both-services)
|
|
5. [Verification](#5-verification)
|
|
6. [Common Issues and Solutions](#6-common-issues-and-solutions)
|
|
7. [Development Tips](#7-development-tips)
|
|
|
|
---
|
|
|
|
## 1. Prerequisites Installation
|
|
|
|
### Verify Your Installation
|
|
|
|
Before starting, verify you have the required tools installed:
|
|
|
|
```bash
|
|
# Check Python version (must be 3.12+)
|
|
python3.12 --version
|
|
|
|
# Check Node.js version (must be 20+)
|
|
node --version
|
|
|
|
# Check npm (comes with Node.js)
|
|
npm --version
|
|
|
|
# Check UV (Python package manager)
|
|
uv --version
|
|
```
|
|
|
|
### Install Missing Prerequisites
|
|
|
|
#### Python 3.12
|
|
|
|
**macOS (using Homebrew):**
|
|
```bash
|
|
brew install python@3.12
|
|
```
|
|
|
|
**Ubuntu/Debian:**
|
|
```bash
|
|
sudo apt update
|
|
sudo apt install python3.12 python3.12-venv
|
|
```
|
|
|
|
**Windows:**
|
|
Download from [python.org](https://www.python.org/downloads/)
|
|
|
|
#### Node.js 20+
|
|
|
|
**macOS (using Homebrew):**
|
|
```bash
|
|
brew install node
|
|
```
|
|
|
|
**Ubuntu/Debian:**
|
|
```bash
|
|
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
|
|
sudo apt install -y nodejs
|
|
```
|
|
|
|
**Windows:**
|
|
Download from [nodejs.org](https://nodejs.org/)
|
|
|
|
#### UV (Python Package Manager)
|
|
|
|
```bash
|
|
pip install uv
|
|
# or
|
|
pipx install uv
|
|
```
|
|
|
|
---
|
|
|
|
## 2. Backend Setup
|
|
|
|
### Step 1: Navigate to Backend Directory
|
|
|
|
```bash
|
|
cd backend
|
|
```
|
|
|
|
### Step 2: Create Virtual Environment
|
|
|
|
A virtual environment isolates your project dependencies:
|
|
|
|
```bash
|
|
# Create virtual environment
|
|
python3.12 -m venv .venv
|
|
|
|
# Activate on macOS/Linux
|
|
source .venv/bin/activate
|
|
|
|
# Activate on Windows
|
|
.venv\Scripts\activate
|
|
```
|
|
|
|
You should see `(.venv)` appear in your terminal prompt.
|
|
|
|
### Step 3: Install Dependencies with UV
|
|
|
|
UV is a fast Python package installer that resolves dependencies quickly:
|
|
|
|
```bash
|
|
uv sync
|
|
```
|
|
|
|
This reads `pyproject.toml` and `uv.lock` to install exact versions of all dependencies.
|
|
|
|
### Step 4: Verify Installation
|
|
|
|
```bash
|
|
python -c "import fastapi; import pandas; import pyarrow; print('All dependencies installed!')"
|
|
```
|
|
|
|
### Step 5: Start the Backend Server
|
|
|
|
```bash
|
|
uvicorn main:app --reload --host 0.0.0.0 --port 8000
|
|
```
|
|
|
|
**Command explained:**
|
|
- `uvicorn` - ASGI server for FastAPI
|
|
- `main:app` - Points to the FastAPI app instance in `main.py`
|
|
- `--reload` - Auto-reload on code changes (development mode)
|
|
- `--host 0.0.0.0` - Listen on all network interfaces
|
|
- `--port 8000` - Use port 8000
|
|
|
|
You should see output like:
|
|
```
|
|
INFO: Uvicorn running on http://0.0.0.0:8000 (Press CTRL+C to quit)
|
|
INFO: Started reloader process [12345] using WatchFiles
|
|
INFO: Started server process [12346]
|
|
INFO: Waiting for application startup.
|
|
INFO: Application startup complete.
|
|
```
|
|
|
|
### Step 6: Access Backend Services
|
|
|
|
Open your browser and navigate to:
|
|
|
|
- **API Root:** http://localhost:8000
|
|
- **Swagger UI (Interactive API Docs):** http://localhost:8000/docs
|
|
- **ReDoc (Alternative API Docs):** http://localhost:8000/redoc
|
|
|
|
---
|
|
|
|
## 3. Frontend Setup
|
|
|
|
### Step 1: Open New Terminal
|
|
|
|
Keep the backend running in its terminal. Open a **new terminal** for the frontend.
|
|
|
|
### Step 2: Navigate to Frontend Directory
|
|
|
|
```bash
|
|
cd frontend
|
|
```
|
|
|
|
### Step 3: Install Dependencies
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
This downloads all packages listed in `package.json` and `package-lock.json`.
|
|
|
|
Expected output includes packages like:
|
|
- `next` (16.1.1)
|
|
- `react` (19.2.3)
|
|
- `typescript` (latest)
|
|
- `tailwindcss` (4+)
|
|
- `apache-arrow` (21+)
|
|
|
|
### Step 4: Configure Environment (Optional)
|
|
|
|
Check if `.env.local` exists:
|
|
|
|
```bash
|
|
ls -la .env.local
|
|
```
|
|
|
|
If not present, create it from the example (if available):
|
|
|
|
```bash
|
|
cp .env.local.example .env.local
|
|
```
|
|
|
|
Edit `.env.local` to configure environment-specific settings like API endpoints.
|
|
|
|
### Step 5: Start the Frontend Development Server
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
You should see output like:
|
|
```
|
|
▲ Next.js 16.1.1
|
|
- Local: http://localhost:3000
|
|
- Network: http://192.168.1.X:3000
|
|
|
|
✓ Ready in 2.3s
|
|
```
|
|
|
|
### Step 6: Access Frontend Application
|
|
|
|
Open your browser and navigate to:
|
|
|
|
**Frontend App:** http://localhost:3000
|
|
|
|
---
|
|
|
|
## 4. Running Both Services
|
|
|
|
For full-stack development, run both services simultaneously.
|
|
|
|
### Option 1: Two Terminals (Recommended for Development)
|
|
|
|
**Terminal 1 - Backend:**
|
|
```bash
|
|
cd backend
|
|
source .venv/bin/activate # or .venv\Scripts\activate on Windows
|
|
uvicorn main:app --reload --host 0.0.0.0 --port 8000
|
|
```
|
|
|
|
**Terminal 2 - Frontend:**
|
|
```bash
|
|
cd frontend
|
|
npm run dev
|
|
```
|
|
|
|
### Option 2: Background Processes
|
|
|
|
**Backend:**
|
|
```bash
|
|
cd backend
|
|
source .venv/bin/activate
|
|
uvicorn main:app --reload --host 0.0.0.0 --port 8000 > ../backend.log 2>&1 &
|
|
```
|
|
|
|
**Frontend:**
|
|
```bash
|
|
cd frontend
|
|
npm run dev > ../frontend.log 2>&1 &
|
|
```
|
|
|
|
View logs:
|
|
```bash
|
|
tail -f backend.log
|
|
tail -f frontend.log
|
|
```
|
|
|
|
---
|
|
|
|
## 5. Verification
|
|
|
|
### Test Backend Health
|
|
|
|
```bash
|
|
curl http://localhost:8000/docs
|
|
```
|
|
|
|
Or open http://localhost:8000/docs in your browser.
|
|
|
|
### Test Frontend
|
|
|
|
Open http://localhost:3000 in your browser.
|
|
|
|
### Check API Connectivity
|
|
|
|
From the frontend, you should be able to make requests to the backend at `http://localhost:8000`.
|
|
|
|
---
|
|
|
|
## 6. Common Issues and Solutions
|
|
|
|
### Port Already in Use
|
|
|
|
**Error:** `Address already in use`
|
|
|
|
**Solution:**
|
|
```bash
|
|
# Find process using port 8000 (backend)
|
|
lsof -i :8000
|
|
# or
|
|
netstat -tlnp | grep :8000
|
|
|
|
# Kill the process
|
|
kill -9 <PID>
|
|
|
|
# Or use a different port
|
|
uvicorn main:app --reload --port 8001
|
|
```
|
|
|
|
### Virtual Environment Issues
|
|
|
|
**Error:** Python command not found or wrong Python version
|
|
|
|
**Solution:**
|
|
```bash
|
|
# Deactivate current environment
|
|
deactivate
|
|
|
|
# Remove and recreate virtual environment
|
|
rm -rf .venv
|
|
python3.12 -m venv .venv
|
|
source .venv/bin/activate
|
|
uv sync
|
|
```
|
|
|
|
### Module Import Errors
|
|
|
|
**Error:** `ModuleNotFoundError: No module named 'fastapi'`
|
|
|
|
**Solution:**
|
|
```bash
|
|
# Ensure virtual environment is activated
|
|
source .venv/bin/activate
|
|
|
|
# Reinstall dependencies
|
|
uv sync
|
|
```
|
|
|
|
### Frontend Build Errors
|
|
|
|
**Error:** `Cannot find module 'X'`
|
|
|
|
**Solution:**
|
|
```bash
|
|
# Clear node_modules and reinstall
|
|
rm -rf node_modules package-lock.json
|
|
npm install
|
|
```
|
|
|
|
### CORS Errors (Frontend Cannot Access Backend)
|
|
|
|
**Error:** Browser console shows CORS policy errors
|
|
|
|
**Solution:**
|
|
Ensure the backend has CORS middleware configured. Check `backend/main.py` for:
|
|
|
|
```python
|
|
from fastapi.middleware.cors import CORSMiddleware
|
|
|
|
app.add_middleware(
|
|
CORSMiddleware,
|
|
allow_origins=["http://localhost:3000"],
|
|
allow_credentials=True,
|
|
allow_methods=["*"],
|
|
allow_headers=["*"],
|
|
)
|
|
```
|
|
|
|
---
|
|
|
|
## 7. Development Tips
|
|
|
|
### Hot Reload
|
|
|
|
- **Backend:** UVicorn's `--reload` flag automatically restarts the server when Python files change
|
|
- **Frontend:** Next.js dev server automatically refreshes the browser when files change
|
|
|
|
### Useful Commands
|
|
|
|
**Backend:**
|
|
```bash
|
|
# Run tests
|
|
pytest
|
|
|
|
# Run with verbose output
|
|
uvicorn main:app --reload --log-level debug
|
|
```
|
|
|
|
**Frontend:**
|
|
```bash
|
|
# Run tests (when configured)
|
|
npm test
|
|
|
|
# Build for production
|
|
npm run build
|
|
|
|
# Run production build
|
|
npm start
|
|
|
|
# Lint code
|
|
npm run lint
|
|
```
|
|
|
|
### IDE Recommendations
|
|
|
|
- **VS Code** with extensions:
|
|
- Python (Microsoft)
|
|
- Pylance
|
|
- ESLint
|
|
- Tailwind CSS IntelliSense
|
|
- Thunder Client (for API testing)
|
|
|
|
### Debugging
|
|
|
|
**Backend:** Use VS Code's debugger with launch configuration:
|
|
```json
|
|
{
|
|
"name": "Python: FastAPI",
|
|
"type": "debugpy",
|
|
"request": "launch",
|
|
"module": "uvicorn",
|
|
"args": ["main:app", "--reload", "--host", "0.0.0.0", "--port", "8000"],
|
|
"cwd": "${workspaceFolder}/backend"
|
|
}
|
|
```
|
|
|
|
**Frontend:** Use Chrome DevTools or React DevTools browser extension.
|
|
|
|
---
|
|
|
|
## Next Steps
|
|
|
|
Once both services are running:
|
|
|
|
1. Explore the API documentation at http://localhost:8000/docs
|
|
2. Interact with the frontend at http://localhost:3000
|
|
3. Review the project context at `_bmad-output/project-context.md`
|
|
4. Check planning artifacts in `_bmad-output/planning-artifacts/`
|
|
|
|
For Docker deployment instructions, see the main README.md (coming soon).
|
|
|
|
---
|
|
|
|
**Last Updated:** 2026-01-11
|