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:
254
README.md
Normal file
254
README.md
Normal 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)
|
||||
Reference in New Issue
Block a user