diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml new file mode 100644 index 0000000..4a77b23 --- /dev/null +++ b/.github/workflows/docker.yml @@ -0,0 +1,19 @@ +name: Build & Push Frontend +on: + push: + branches: [ main ] +jobs: + docker: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: docker/setup-buildx-action@v3 + - uses: docker/login-action@v3 + with: + username: ${{ secrets.DOCKERHUB_USERNAME }} + password: ${{ secrets.DOCKERHUB_TOKEN }} + - uses: docker/build-push-action@v6 + with: + context: . + push: true + tags: docker.io/${{ secrets.DOCKERHUB_USERNAME }}/playground-frontend:main diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..fbd519e --- /dev/null +++ b/Dockerfile @@ -0,0 +1,12 @@ +# Build +FROM node:22-alpine AS build +WORKDIR /app +COPY package*.json ./ +RUN npm ci +COPY . . +RUN npm run build -- --configuration production + +# Serve +FROM nginx:stable-alpine +COPY --from=build /app/dist/*/browser /usr/share/nginx/html +COPY nginx.conf /etc/nginx/conf.d/default.conf diff --git a/README.md b/README.md index 0e923b7..0e1d478 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,97 @@ -# playground-frontend -This is the frontend, written in angular, for by playground backend. +## 📗 `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](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 +```bash +npm install +``` + +# 2. Start development server +```bash +ng serve --open +``` + +App runs at http://localhost:4200 + + +# 3. 🐳 Docker Build (local) +```bash +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 + +1. Create a Docker image +2. Push it to Docker Hub (docker.io/andreasdahm/playground-frontend:main) +3. 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 diff --git a/nginx.conf b/nginx.conf new file mode 100644 index 0000000..0eea1de --- /dev/null +++ b/nginx.conf @@ -0,0 +1,10 @@ +server { + listen 80; + server_name _; + root /usr/share/nginx/html; + index index.html; + + location / { + try_files $uri $uri/ /index.html; + } +}