🚀 Separate Frontend & Backend Commands

Date: November 18, 2025
Purpose: Run frontend and backend independently for testing

📋 Available Commands

Option 1: Run Both Together (Original Behavior)

# This starts BOTH backend + frontend automatically
yarn serve:gograb-space

# Or using nx directly
nx serve gograb-space

What happens:

1. ✅ Backend starts on port 3000
2. ✅ Frontend starts on port 5200
3. ✅ Backend auto-restarts when backend code changes
4. ✅ Frontend auto-reloads when frontend code changes

Use when: You're developing both frontend and backend

Option 2: Run Separately (New!)

Terminal 1: Backend Only

yarn serve:backend-api

What happens:

• ✅ Starts backend on port 3000
• ✅ No frontend starts
• ✅ Backend auto-restarts on code changes

Terminal 2: Frontend Only

yarn serve:gograb-space

What happens:

• ✅ Starts frontend on port 5200
• ❌ Does NOT start backend automatically
• ✅ Frontend auto-reloads on code changes

Use when:

• Testing backend APIs with Postman/Thunder Client
• Backend already running from another terminal
• Using Railway backend (don't need local backend)
• You want full control over what's running

Option 3: All-in-One Convenience Command

yarn dev:full-stack

What happens:

1. ✅ Starts backend in one process
2. ⏳ Waits 3 seconds for backend to initialize
3. ✅ Starts frontend in another process
4. ✅ Both run concurrently in same terminal

Use when: You want both running but with more explicit control

🎯 Quick Reference Table

📖 Examples

Example 1: Test Backend API Only

# Terminal 1: Start backend
yarn serve:backend-api

# Test with curl
curl http://localhost:3000/api/health

# Or use Thunder Client / Postman

Example 2: Frontend with Railway Backend

# 1. Switch to Railway environment
cp apps/gograb-space/src/environments/environment.railway.ts \
   apps/gograb-space/src/environments/environment.ts

# 2. Start ONLY frontend (no local backend needed)
yarn serve:gograb-space

# Frontend will connect to Railway backend automatically

Example 3: Full Separation (Two Terminals)

# Terminal 1: Backend
yarn serve:backend-api
# Wait for: "GoGrab Backend API - READY"

# Terminal 2: Frontend  
yarn serve:gograb-space
# Wait for: "Local: http://localhost:5200/"

# Now you have full control over each process

Example 4: Restart Only Frontend

# You have both running in separate terminals

# Frontend has an error - just restart it:
# Terminal 2: Ctrl+C, then:
yarn serve:gograb-space

# Backend keeps running undisturbed in Terminal 1

🔧 Technical Details

How It Works

Original yarn serve:gograb-space:

// apps/gograb-space/project.json
"serve": {
  "dependsOn": ["backend-api:serve"],  // ← Auto-starts backend
  ...
}

New yarn serve:gograb-space:

// apps/gograb-space/project.json
"serve-only": {
  // No dependsOn!  ← Frontend runs independently
  ...
}

🎓 Pro Tips

Tip 1: Check What's Running

# Check if backend is running
lsof -i:3000

# Check if frontend is running
lsof -i:5200

Tip 2: Kill Stuck Processes

# Kill backend
lsof -ti:3000 | xargs kill -9

# Kill frontend
lsof -ti:5200 | xargs kill -9

Tip 3: Environment Switching

# Local backend
cp apps/gograb-space/src/environments/environment.local.ts \
   apps/gograb-space/src/environments/environment.ts
yarn serve:backend-api  # Terminal 1
yarn serve:gograb-space # Terminal 2

# Railway backend
cp apps/gograb-space/src/environments/environment.railway.ts \
   apps/gograb-space/src/environments/environment.ts
yarn serve:gograb-space # Only need frontend!

# Mock API (offline)
cp apps/gograb-space/src/environments/environment.mock.ts \
   apps/gograb-space/src/environments/environment.ts
yarn serve:gograb-space # Only need frontend!

✅ Summary

Before (original):

• Only one way: yarn serve:gograb-space (starts both)

Now (flexible):

• ✅ yarn serve:gograb-space - Original (starts both automatically)
• ✅ yarn serve:backend-api - Backend only
• ✅ yarn serve:gograb-space - Frontend only
• ✅ yarn dev:full-stack - Both concurrently

Choose what works best for your workflow! 🚀

Related Documentation:

• Environment Configuration
• Local Backend Setup
• Environment Files README