🚀 Full Stack TypeScript Template

Ein modernes Full Stack Template mit React Frontend und Express Backend, komplett containerisiert mit Docker.

📋 Übersicht

• Frontend: React 18 + TypeScript + Create React App
• Backend: Express.js + TypeScript + Node.js
• Database: PostgreSQL 15
• Container: Docker + Docker Compose
• Development: Hot Reload für Frontend & Backend
• CI/CD: Woodpecker CI Ready

🛠️ Voraussetzungen

• Node.js >= 18.0.0
• npm >= 9.0.0
• Docker & Docker Compose

📦 Installation

1. Repository klonen

git clone <repository-url>
cd fullstack-typescript-template

2. Dependencies installieren

npm run install:all

🏃‍♂️ Development

Lokale Entwicklung (ohne Docker)

# Alle Services starten
npm run dev

# Einzeln starten
npm run dev:backend    # Backend auf Port 3001
npm run dev:frontend   # Frontend auf Port 3000

# Development-Prozesse beenden
npm run kill:dev

Mit Docker (empfohlen)

# Development mit Hot Reload
npm run docker:dev

# Production-ähnliche Umgebung
npm run docker:prod

# Services stoppen
npm run docker:down

🐳 Docker Commands

Build & Start

npm run docker:build    # App Image erstellen
npm run docker:up       # Services im Hintergrund starten
npm run docker:dev      # Development-Modus mit Rebuild
npm run docker:prod     # Production-Modus

Management

npm run docker:stop     # Services stoppen (Container bleiben)
npm run docker:down     # Services stoppen + Container entfernen
npm run docker:restart  # Services neustarten

Logs & Debugging

npm run docker:logs     # Alle Logs anzeigen
npm run docker:logs:app # Nur App-Logs
npm run docker:logs:db  # Nur Datenbank-Logs

Cleanup

npm run docker:clean    # Alles aufräumen (Volumes, Container, Images)

Manuelle Docker Commands

# Image bauen
docker build -t fullstack-app .

# Services starten
docker-compose up -d

# Logs verfolgen
docker-compose logs -f

# Services stoppen
docker-compose down

🏗️ Build

Development Build

npm run build           # Frontend + Backend
npm run build:frontend  # Nur Frontend
npm run build:backend   # Nur Backend

Production Build

# Mit Docker (empfohlen)
npm run docker:prod

# Manuell
npm run build
NODE_ENV=production npm start

🧪 Testing

npm run test            # Alle Tests
npm run test:frontend   # Frontend Tests
npm run test:backend    # Backend Tests

🧹 Cleanup

npm run clean           # Alle node_modules & Build-Ordner
npm run clean:build     # Nur Build-Ordner
npm run docker:clean    # Docker Cleanup

🌍 Environment Variables

Erstelle eine .env Datei im Root-Verzeichnis:

# Database
POSTGRES_DB=appdb
POSTGRES_USER=postgres
POSTGRES_PASSWORD=secure-password-change-this
DATABASE_URL=postgresql://postgres:secure-password-change-this@postgres:5432/appdb

# App
NODE_ENV=development
JWT_SECRET=your-jwt-secret-change-this

# Ports
APP_PORT=3000
POSTGRES_PORT=5432

📡 Ports

• Frontend: http://localhost:3000
• Backend: http://localhost:3001
• Database: localhost:5432

🏗️ Projekt-Struktur

├── 📁 frontend/          # React App
│   ├── 📁 src/
│   ├── 📁 public/
│   └── 📄 package.json
├── 📁 backend/           # Express API
│   ├── 📁 src/
│   └── 📄 package.json
├── 📁 scripts/           # Helper Scripts
│   └── 🔧 kill-dev-processes.sh
├── 🐳 docker-compose.yml
├── 🐳 Dockerfile
├── ⚙️ .woodpecker.yml    # CI/CD
└── 📦 package.json       # Root Package

🔧 VS Code Tasks

Das Template enthält vorkonfigurierte VS Code Tasks:

• 🖥️ Backend - Backend im Watch-Modus starten
• 🌐 Frontend - Frontend starten
• 🛑 Terminate All Development Processes - Alle Dev-Prozesse beenden
• 📊 Show Development Processes Status - Status anzeigen

Öffne die Command Palette (Ctrl+Shift+P) und tippe "Tasks: Run Task".

🚢 Deployment

Mit Docker (empfohlen)

# Production Image erstellen
docker build -t fullstack-app .

# Mit Environment-Variablen starten
NODE_ENV=production npm run docker:prod

CI/CD mit Woodpecker

Das Template ist ready für Woodpecker CI. Konfiguration in .woodpecker.yml.

🤝 Development Workflow

1. Development starten: npm run docker:dev
2. Code ändern: Hot Reload ist aktiv
3. Tests ausführen: npm run test
4. Build testen: npm run build
5. Production testen: npm run docker:prod
6. Cleanup: npm run docker:clean

📝 Troubleshooting

Port bereits belegt

npm run kill:dev
npm run docker:down

Docker Problems

npm run docker:clean
docker system prune -a

Development-Prozesse hängen

./scripts/kill-dev-processes.sh

📄 License

MIT