feat: add github action ci workflow

Author: namnguyen2k1

.github/workflows/ci.yml

@@ -0,0 +1,147 @@
+name: CI/CD Angular + Docker + Vercel
+
+on:
+  push:
+    branches:
+      - develop
+      - release-*
+      - master
+
+env:
+  NODE_VERSION: 24
+  APP_NAME: angular-bb
+
+jobs:
+  lint:
+    name: Lint Code
+    runs-on: ubuntu-latest
+    steps:
+      - name: 1. Checkout Source
+        uses: actions/checkout@v4
+
+      - name: 2. Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: 3. Cache npm
+        uses: actions/cache@v4
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: 4. Install Dependencies
+        run: npm ci
+
+      - name: 5. Run Linter
+        run: npm run lint
+
+  test:
+    name: Run Unit Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: 1. Checkout Source
+        uses: actions/checkout@v4
+
+      - name: 2. Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: 3. Cache npm
+        uses: actions/cache@v4
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: 4. Install Dependencies
+        run: npm ci
+
+      - name: 5. Run Tests
+        run: npm run test
+
+  build-frontend:
+    name: Build Angular Frontend
+    runs-on: ubuntu-latest
+    needs: [lint, test]
+    steps:
+      - name: 1. Checkout Source
+        uses: actions/checkout@v4
+
+      - name: 2. Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: 3. Cache npm
+        uses: actions/cache@v4
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: 4. Install Dependencies
+        run: npm ci
+
+      - name: 5. Build Angular App
+        run: npm run build -- --configuration production
+
+      - name: 6. Upload Angular Dist Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist
+          path: dist
+
+  build-image:
+    name: Build & Push Docker Image
+    runs-on: ubuntu-latest
+    needs: build-frontend
+    env:
+      DH_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+      DH_TOKEN: ${{ secrets.DOCKERHUB_TOKEN }}
+    steps:
+      - name: 1. Checkout Source
+        uses: actions/checkout@v4
+
+      - name: 2. Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          driver: docker-container
+          buildkitd-flags: --debug
+
+      - name: 3. Log in to DockerHub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ env.DH_USERNAME }}
+          password: ${{ env.DH_TOKEN }}
+
+      - name: 4. Build & Push Docker Image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: true
+          tags: ${{ env.DH_USERNAME }}/angular-topics:latest
+          cache-from: type=registry,ref=${{ env.DH_USERNAME }}/angular-topics:latest
+          cache-to: type=registry,ref=${{ env.DH_USERNAME }}/angular-topics:latest,mode=max
+
+  deploy:
+    name: Deploy to Vercel
+    runs-on: ubuntu-latest
+    needs: build-frontend
+    steps:
+      - name: 1. Download Angular Dist Artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: dist
+          path: dist
+
+      - name: 2. Install Vercel CLI
+        run: npm install -g vercel
+
+      - name: 3. Deploy to Vercel
+        run: vercel dist/${{ env.APP_NAME }}/browser --prod --yes --token=${{ secrets.VERCEL_TOKEN }}

Dockerfile

@@ -0,0 +1,20 @@
+# Stage 1: Build app
+FROM node:24 AS build
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install
+
+COPY . .
+RUN npm run build -- --configuration production
+
+# Stage 2: Nginx serve static files
+FROM nginx:stable-alpine
+
+COPY --from=build /app/dist/angular-bb/browser /usr/share/nginx/html
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

docker-compose.yaml

@@ -0,0 +1,7 @@
+services:
+  angular-bb:
+    build: .
+    image: angular-bb:latest
+    ports:
+      - "4200:80"
+    container_name: angular-bb

karma.config.js

@@ -0,0 +1,11 @@
+module.exports = function (config) {
+  config.set({
+    browsers: ['ChromeHeadless'],
+    customLaunchers: {
+      ChromeHeadlessCI: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox', '--disable-gpu', '--disable-dev-shm-usage']
+      }
+    }
+  });
+};

nginx.conf

@@ -0,0 +1,12 @@
+server {
+  listen 80;
+  server_name localhost;
+
+  root /usr/share/nginx/html;
+
+  index index.html;
+
+  location / {
+    try_files $uri $uri/ /index.html;
+  }
+}

package.json

@@ -9,7 +9,7 @@
     "build:dev": "ng build --configuration=development",
     "analyze": "ng build && source-map-explorer dist/angular-bb/**/*.js",
     "knip": "npx knip --cache --reporter symbols --performance",
-    "test": "ng test",
+    "test": "ng test --watch=false --browsers=ChromeHeadless",
     "commitlint": "commitlint",
     "lint": "eslint --fix",
     "format": "prettier --write",

src/app/app.component.spec.ts

@@ -0,0 +1,37 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { AppComponent } from "./app.component";
+
+describe("AppComponent (Standalone)", () => {
+  let fixture: ComponentFixture<AppComponent>;
+  let component: AppComponent;
+  let compiled: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AppComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    compiled = fixture.nativeElement;
+  });
+
+  it("should create the app", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it(`should have title 'Angular Bootstrap Boilerplate'`, () => {
+    expect(component.title).toBe("Angular Bootstrap Boilerplate");
+  });
+
+  it("should render title in h1", () => {
+    const h1 = compiled.querySelector("#title");
+    expect(h1?.textContent).toContain("Angular Bootstrap Boilerplate");
+  });
+
+  it("should contain router outlet", () => {
+    const routerOutlet = compiled.querySelector("router-outlet");
+    expect(routerOutlet).toBeTruthy();
+  });
+});

src/app/app.component.ts

@@ -6,9 +6,12 @@ import { RouterOutlet } from "@angular/router";
   imports: [RouterOutlet],
   standalone: true,
   template: `
+    <h1 id="title">{{ title }}</h1>
     <div class="!max-w-[1200px] mx-auto">
       <router-outlet></router-outlet>
     </div>
   `,
 })
-export class AppComponent {}
+export class AppComponent {
+  title = "Angular Bootstrap Boilerplate";
+}