feat: add fullstack TypeScript template with Docker support

- 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
This commit is contained in:
2025-05-29 08:03:49 +00:00
commit c40b069ab9
41 changed files with 36870 additions and 0 deletions

254
README.md Normal file
View File

@@ -0,0 +1,254 @@
# 🚀 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)