Lobo
304c25cb6c
Introduces Dockerfile and nginx.conf for containerized deployment of the Angular frontend. Adds a GitHub Actions workflow for automated Docker image build and push. Updates README with setup, tech stack, and deployment instructions.
2.1 KiB
📗 playground-frontend/README.md
🎨 Playground Frontend
This is the frontend of the Playground project.
Built with Angular 21 and Angular Material, including a simple light/dark theme toggle and multi-language support via ngx-translate.
The app is built as a static Single Page Application (SPA) served by NGINX,
deployed at:
👉 https://app.andreas-dahm.eu
🧩 Tech Stack
| Component | Purpose |
|---|---|
| Angular 21 | Frontend framework |
| Angular Material | UI components & theming |
| ngx-translate | i18n / instant translation |
| NGINX | Serves the compiled SPA |
| Docker + GitHub Actions | Automated build & image publishing |
📁 Project Structure
playground-frontend/ ├─ src/ │ ├─ app/ │ │ ├─ app.component.ts │ │ ├─ theme.service.ts │ │ └─ ... │ ├─ assets/i18n/ │ │ ├─ en.json │ │ └─ de.json │ └─ index.html ├─ Dockerfile ├─ nginx.conf └─ .github/workflows/docker.yml
🚀 Local Development
1. Install dependencies
npm install
2. Start development server
ng serve --open
App runs at http://localhost:4200
3. 🐳 Docker Build (local)
docker build -t playground-frontend:local .
docker run -p 8080:80 playground-frontend:local
Then open http://localhost:8080
⚙️ GitHub Actions (CI/CD)
On every push to main, GitHub Actions will:
Build the Angular project
- Create a Docker image
- Push it to Docker Hub (docker.io/andreasdahm/playground-frontend:main)
- Workflow file: .github/workflows/docker.yml
Required repository secrets:
Name Description DOCKERHUB_USERNAME Your Docker Hub username DOCKERHUB_TOKEN Personal access token for Docker Hub
🌐 Deployment
The built image is deployed via https://github.com/lobothedark/playground-deploy
on the Hostinger KVM server using Traefik.
docker compose pull docker compose up -d
✅ Live site at https://app.andreas-dahm.eu
🪄 Maintainer
Andreas Dahm 📧 andreas.dahm@gmail.com 🌐 https://andreas-dahm.eu