Christian Schindler
c40b069ab9
- Created package.json for managing workspaces (frontend and backend) - Added scripts for development, build, testing, and Docker operations - Implemented kill-dev-processes.sh script to terminate development processes gracefully
255 lines
4.9 KiB
Markdown
255 lines
4.9 KiB
Markdown
# 🚀 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
|
|
|
|
```bash
|
|
git clone <repository-url>
|
|
cd fullstack-typescript-template
|
|
```
|
|
|
|
### 2. Dependencies installieren
|
|
|
|
```bash
|
|
npm run install:all
|
|
```
|
|
|
|
## 🏃♂️ Development
|
|
|
|
### Lokale Entwicklung (ohne Docker)
|
|
|
|
```bash
|
|
# 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)
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
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
|
|
|
|
```bash
|
|
npm run docker:stop # Services stoppen (Container bleiben)
|
|
npm run docker:down # Services stoppen + Container entfernen
|
|
npm run docker:restart # Services neustarten
|
|
```
|
|
|
|
### Logs & Debugging
|
|
|
|
```bash
|
|
npm run docker:logs # Alle Logs anzeigen
|
|
npm run docker:logs:app # Nur App-Logs
|
|
npm run docker:logs:db # Nur Datenbank-Logs
|
|
```
|
|
|
|
### Cleanup
|
|
|
|
```bash
|
|
npm run docker:clean # Alles aufräumen (Volumes, Container, Images)
|
|
```
|
|
|
|
### Manuelle Docker Commands
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
npm run build # Frontend + Backend
|
|
npm run build:frontend # Nur Frontend
|
|
npm run build:backend # Nur Backend
|
|
```
|
|
|
|
### Production Build
|
|
|
|
```bash
|
|
# Mit Docker (empfohlen)
|
|
npm run docker:prod
|
|
|
|
# Manuell
|
|
npm run build
|
|
NODE_ENV=production npm start
|
|
```
|
|
|
|
## 🧪 Testing
|
|
|
|
```bash
|
|
npm run test # Alle Tests
|
|
npm run test:frontend # Frontend Tests
|
|
npm run test:backend # Backend Tests
|
|
```
|
|
|
|
## 🧹 Cleanup
|
|
|
|
```bash
|
|
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:
|
|
|
|
```bash
|
|
# 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)
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
npm run kill:dev
|
|
npm run docker:down
|
|
```
|
|
|
|
### Docker Problems
|
|
|
|
```bash
|
|
npm run docker:clean
|
|
docker system prune -a
|
|
```
|
|
|
|
### Development-Prozesse hängen
|
|
|
|
```bash
|
|
./scripts/kill-dev-processes.sh
|
|
```
|
|
|
|
## 📄 License
|
|
|
|
[MIT](LICENSE)
|