Development Server Procedures

Development Server Overview

The HostingCo system consists of multiple development servers:

Starting Development Servers

Method 1: Concurrent Development (Recommended)

# From project root - starts both frontend and backend
npm run dev

# This runs:
# - npm run dev:backend (port 3003)
# - npm run dev:frontend (port 3000)

Method 2: Individual Servers

# Start backend only
npm run dev:backend

# Start frontend only
npm run dev:frontend

# Start with specific environments
npm run dev:backend --env=development
npm run dev:frontend --env=development

Method 3: Using Scripts

# Use automation scripts
./scripts/dev.sh                    # Start all servers
./scripts/dev-backend.sh            # Start backend only
./scripts/dev-frontend.sh           # Start frontend only

Server Configuration

Backend Server Configuration

// backend/package.json scripts
{
  "scripts": {
    "dev": "nodemon --exec ts-node src/index.ts",
    "dev:debug": "nodemon --exec ts-node --inspect src/index.ts",
    "dev:watch": "ts-node --watch src/index.ts"
  }
}

Frontend Server Configuration

// frontend/vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    host: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3003',
        changeOrigin: true
      }
    }
  }
});

Environment Variables

# .env.development
NODE_ENV=development
PORT=3003
FRONTEND_URL=http://localhost:3000
DATABASE_URL=postgresql://localhost:5432/hostingco_dev
REDIS_URL=redis://localhost:6379
LOG_LEVEL=debug

Database Setup

PostgreSQL Development Server

# Start PostgreSQL service
sudo systemctl start postgresql

# Create development database
createdb hostingco_dev

# Check connection
psql -d hostingco_dev -c "SELECT version();"

Redis Development Server

# Start Redis service
sudo systemctl start redis

# Check connection
redis-cli ping

# Monitor Redis
redis-cli monitor

Database Migrations

# Run migrations
npm run migrate:latest

# Seed development data
npm run seed:dev

# Reset database
npm run db:reset:dev

Hot Reload and Watch Modes

Frontend Hot Reload

Backend Auto-Restart

// nodemon configuration
{
  "watch": ["src"],
  "ext": "ts,js,json",
  "ignore": ["src/**/*.test.ts"],
  "exec": "ts-node src/index.ts",
  "env": {
    "NODE_ENV": "development"
  }
}

File Watching

# Watch for file changes
npm run dev:watch

# Watch specific directories
npm run dev:watch -- --watch src --watch config

# Ignore specific files
npm run dev:watch -- --ignore src/**/*.test.ts

🐛 Debugging Development

Backend Debugging

# Start with Node.js debugger
npm run dev:debug

# Connect with Chrome DevTools
# Open chrome://inspect and click "Open dedicated DevTools for Node"

# Or use VS Code debugger
# Set breakpoints in VS Code and press F5

Frontend Debugging

# Start with source maps
npm run dev:debug

# Use Chrome DevTools
# Open Developer Tools and use Sources panel

# React DevTools
# Install React DevTools browser extension

VS Code Configuration

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Backend",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/backend/src/index.ts",
      "runtimeArgs": ["-r", "ts-node/register"],
      "env": {
        "NODE_ENV": "development"
      },
      "console": "integratedTerminal",
      "restart": true,
      "protocol": "inspector"
    }
  ]
}

Development Workflows

Daily Development Workflow

1. Start development servers: npm run dev
2. Check database status: npm run db:status
3. Run tests: npm test
4. Make changes and see hot reload
5. Run specific tests: npm run test:watch
6. Commit changes: git add . && git commit -m "feat: ..."

Feature Development Workflow

# 1. Create feature branch
git checkout -b feature/new-feature

# 2. Start development servers
npm run dev

# 3. Make changes with hot reload
# Edit files and see changes immediately

# 4. Run tests
npm test

# 5. Build and test production build
npm run build && npm run test:e2e

# 6. Commit and push
git add . && git commit -m "feat: add new feature"
git push origin feature/new-feature

Testing Workflow

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Run specific test files
npm test -- User.test.ts

# Run tests with coverage
npm run test:coverage

# Run E2E tests
npm run test:e2e

Troubleshooting Development Issues

Common Issues

Port Issues

# Find processes using ports
lsof -i :3000  # Frontend
lsof -i :3003  # Backend

# Kill processes
kill -9 <PID>

# Or use killall
killall node

Database Issues

# Check PostgreSQL status
sudo systemctl status postgresql

# Restart PostgreSQL
sudo systemctl restart postgresql

# Check Redis status
sudo systemctl status redis

# Restart Redis
sudo systemctl restart redis

Module Issues

# Clean and reinstall
rm -rf node_modules package-lock.json
npm install

# Clear npm cache
npm cache clean --force

# Rebuild packages
npm run rebuild

Development Best Practices

Environment Management

Code Organization

• Keep development and production code separate
• Use feature flags for experimental features
• Maintain clean git history with meaningful commits
• Write tests for new features and bug fixes

Performance Optimization

# Monitor performance
npm run dev:profile

# Check bundle size
npm run build:analyze

# Optimize builds
npm run build:optimize