Guide: Next.js + Django Monorepo (No Docker)

Use Case

One repo with /frontend and /backend. You want each workspace to spin up both services with isolated ports and predictable URLs.

Project Settings Explained

Port Definitions

FRONTEND_PORT
API_PORT

Separate reserved ports keep frontend/backend stable per workspace and prevent collisions across branches.

Setup Script

cd frontend && npm i
cd ../backend && pip install -r requirements.txt
cp /shared/.env .env

Bootstraps both app layers. Copying .env gives per-workspace config freedom. Symlink centralizes updates but can cause cross-workspace side effects.

Processes

cd frontend && API_URL=http://localhost:$API_PORT PORT=$FRONTEND_PORT npm run dev
cd backend && python manage.py runserver 0.0.0.0:$API_PORT

Frontend points to the workspace backend port. Both processes stay in one workspace context with shared named-port env vars.

Browser Sessions

http://localhost:$FRONTEND_PORT
http://localhost:$API_PORT/admin

Opens both frontend preview and Django admin for the same workspace.

Status Checks

curl -fsS http://localhost:$FRONTEND_PORT
curl -fsS http://localhost:$API_PORT/health

Separate checks help isolate whether failures are in frontend, backend, or integration between the two.