[feat] added documentation for angular guide for deploy

Author: kristiyan-velkov

content/guides/angular/configure-ci-cd.md

@@ -9,7 +9,7 @@ description: Learn how to configure CI/CD using GitHub Actions for your Angular
 
 ## Prerequisites
 
-Complete all the previous sections of this guide, starting with [Containerize Angular application](containerize.md).
+Complete all the previous sections of this guide, starting with [Containerize an Angular application](containerize.md).
 
 You must also have:
 - A [GitHub](https://github.com/signup) account.
@@ -19,7 +19,7 @@ You must also have:
 
 ## Overview
 
-In this section, you'll set up a **CI/CD pipeline** using [GitHub Actions](https://docs.github.com/en/actions) to automatically:
+In this section, you'll set up a CI/CD pipeline using [GitHub Actions](https://docs.github.com/en/actions) to automatically:
 
 - Build your Angular application inside a Docker container.
 - Run tests in a consistent environment.
@@ -31,7 +31,7 @@ In this section, you'll set up a **CI/CD pipeline** using [GitHub Actions](https
 
 To enable GitHub Actions to build and push Docker images, you’ll securely store your Docker Hub credentials in your new GitHub repository.
 
-### Step 1: Connect your GitHub repository to Docker Hub
+### Step 1: Generate Docker Hub Credentials and Set GitHub Secrets"
 
 1. Create a Personal Access Token (PAT) from [Docker Hub](https://hub.docker.com)
    1. Go to your **Docker Hub account → Account Settings → Security**.
@@ -61,7 +61,7 @@ To enable GitHub Actions to build and push Docker images, you’ll securely stor
    | `DOCKERHUB_TOKEN` | Your Docker Hub access token (created in Step 1)   |
    | `DOCKERHUB_PROJECT_NAME` | Your Docker Project Name (created in Step 2)   |
 
-   These secrets let GitHub Actions to authenticate securely with Docker Hub during automated workflows.
+   These secrets allow GitHub Actions to authenticate securely with Docker Hub during automated workflows.
 
 5. Connect Your Local Project to GitHub
 
@@ -89,7 +89,7 @@ To enable GitHub Actions to build and push Docker images, you’ll securely stor
 
    This confirms that your local repository is properly linked and ready to push your source code to GitHub.
 
-6. Push Your Source Code to GitHub
+6. Push your source code to GitHub
 
    Follow these steps to commit and push your local project to your GitHub repository:
 
@@ -101,7 +101,7 @@ To enable GitHub Actions to build and push Docker images, you’ll securely stor
       This command stages all changes — including new, modified, and deleted files — preparing them for commit.
 
 
-   2. Commit your changes.
+   2. Commit the staged changes with a descriptive message.
 
       ```console
       $ git commit -m "Initial commit"
@@ -152,15 +152,15 @@ on:
 
 jobs:
   build-test-push:
-    name: Build, Test and Push Docker Image
+    name: Build, Test, and Push Docker Image
     runs-on: ubuntu-latest
 
     steps:
       # 1. Checkout source code
       - name: Checkout source code
         uses: actions/checkout@v4
         with:
-          fetch-depth: 0 # Fetches full history for better caching/context
+          fetch-depth: 0
 
       # 2. Set up Docker Buildx
       - name: Set up Docker Buildx
@@ -172,15 +172,17 @@ jobs:
         with:
           path: /tmp/.buildx-cache
           key: ${{ runner.os }}-buildx-${{ github.sha }}
-          restore-keys: ${{ runner.os }}-buildx-
+          restore-keys: |
+            ${{ runner.os }}-buildx-
 
       # 4. Cache npm dependencies
       - name: Cache npm dependencies
         uses: actions/cache@v4
         with:
           path: ~/.npm
           key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: ${{ runner.os }}-npm-
+          restore-keys: |
+            ${{ runner.os }}-npm-
 
       # 5. Extract metadata
       - name: Extract metadata
@@ -196,31 +198,31 @@ jobs:
           context: .
           file: Dockerfile.dev
           tags: ${{ steps.meta.outputs.REPO_NAME }}-dev:latest
-          load: true # Load to local Docker daemon for testing
+          load: true
           cache-from: type=local,src=/tmp/.buildx-cache
           cache-to: type=local,dest=/tmp/.buildx-cache,mode=max
 
-      # 7. Run Vitest tests
-      - name: Run Vitest tests and generate report
+      # 7. Run Angular tests with Jasmine
+      - name: Run Angular Jasmine tests inside container
         run: |
           docker run --rm \
             --workdir /app \
             --entrypoint "" \
             ${{ steps.meta.outputs.REPO_NAME }}-dev:latest \
-            sh -c "npm ci && npx vitest run --reporter=verbose"
+            sh -c "npm ci && npm run test -- --ci --runInBand"
         env:
           CI: true
           NODE_ENV: test
         timeout-minutes: 10
 
-      # 8. Login to Docker Hub
+      # 8. Log in to Docker Hub
       - name: Log in to Docker Hub
         uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
-      # 9. Build and push prod image
+      # 9. Build and push production image
       - name: Build and push production image
         uses: docker/build-push-action@v6
         with:
@@ -255,14 +257,14 @@ After you've added your workflow file, it's time to trigger and observe the CI/C
 
 1. Commit and push your workflow file
 
-   Select "Commit changes…" in the GitHub editor.
+   - Select "Commit changes…" in the GitHub editor.
 
    - This push will automatically trigger the GitHub Actions pipeline.
 
 2. Monitor the workflow execution
 
-   1. Go to the Actions tab in your GitHub repository.
-   2. Click into the workflow run to follow each step: **build**, **test**, and (if successful) **push**.
+   - Go to the Actions tab in your GitHub repository.
+   - Click into the workflow run to follow each step: **build**, **test**, and (if successful) **push**.
 
 3. Verify the Docker image on Docker Hub
 
@@ -293,7 +295,7 @@ Here's what you accomplished:
 
 - Created a new GitHub repository specifically for your project.
 - Generated a secure Docker Hub access token and added it to GitHub as a secret.
-- Defined a GitHub Actions workflow to:
+- Defined a GitHub Actions workflow that:
    - Build your application inside a Docker container.
    - Run tests in a consistent, containerized environment.
    - Push a production-ready image to Docker Hub if tests pass.

content/guides/angular/containerize.md

@@ -1,9 +1,9 @@
 ---
-title: Containerize a Angular Application
+title: Containerize an Angular Application
 linkTitle: Containerize
 weight: 10
 keywords: angular, node, image, initialize, build
-description: Learn how to containerize a Angular application with Docker by creating an optimized, production-ready image using best practices for performance, security, and scalability.
+description: Learn how to containerize an Angular application with Docker by creating an optimized, production-ready image using best practices for performance, security, and scalability.
 
 ---
 
@@ -22,22 +22,21 @@ Before you begin, make sure the following tools are installed and available on y
 
 ## Overview
 
-This guide walks you through the complete process of containerizing a Angular application with Docker. You’ll learn how to create a production-ready Docker image using best practices that improve performance, security, scalability, and deployment efficiency.
+This guide walks you through the complete process of containerizing an Angular application with Docker. You’ll learn how to create a production-ready Docker image using best practices that improve performance, security, scalability, and deployment efficiency.
 
 By the end of this guide, you will:
 
-- Containerize a Angular application using Docker.
+- Containerize an Angular application using Docker.
 - Create and optimize a Dockerfile for production builds. 
 - Use multi-stage builds to minimize image size.
 - Serve the application efficiently with a custom NGINX configuration.
-- Follow best practices for building secure and maintainable Docker images. 
+- Build secure and maintainable Docker images by following best practices.
 
 ---
 
 ## Get the sample application
 
-Clone the sample application to use with this guide. Open a terminal, change
-directory to a directory that you want to work in, and run the following command
+Clone the sample application to use with this guide. Open a terminal, navigate to the directory where you want to work, and run the following command
 to clone the git repository:
 
 ```console
@@ -117,7 +116,7 @@ These updates help ensure your app is easy to deploy, fast to load, and producti
 > For full details, see the [Dockerfile reference](/reference/dockerfile/).
 
 
-### Step 2: Configure the Dockerfile file 
+### Step 2: Configure the Dockerfile
 
 Copy and replace the contents of your existing `Dockerfile` with the configuration below:
 
@@ -188,62 +187,64 @@ The `.dockerignore` file tells Docker which files and folders to exclude when bu
 Copy and replace the contents of your existing `.dockerignore` with the configuration below:
 
 ```dockerignore
-# =========================================
-# Dependency directories and build output
-# =========================================
-node_modules/
-dist/
-out-tsc/
-.tmp/
-.cache/
-.angular/
-
-# =========================================
-# Angular CLI, build tools, and test artifacts
-# =========================================
-coverage/
-.vite/
-.vitepress/
-jest/
-cypress/
-cypress/screenshots/
-cypress/videos/
-reports/
-playwright-report/
-
-# =========================================
-# Environment and log files
-# =========================================
+# ================================
+# Node and build output
+# ================================
+node_modules
+dist
+out-tsc
+.angular
+.cache
+.tmp
+
+# ================================
+# Testing & Coverage
+# ================================
+coverage
+jest
+cypress
+cypress/screenshots
+cypress/videos
+reports
+playwright-report
+.vite
+.vitepress
+
+# ================================
+# Environment & log files
+# ================================
 *.env*
-!.env.production
+!*.env.production
 *.log
 *.tsbuildinfo
 
-# =========================================
-# IDE and local development files
-# =========================================
-.vscode/
-.idea/
-*.swp
+# ================================
+# IDE & OS-specific files
+# ================================
+.vscode
+.idea
 .DS_Store
 Thumbs.db
+*.swp
 
-# =========================================
-# Version control
-# =========================================
-.git/
+# ================================
+# Version control & CI files
+# ================================
+.git
 .gitignore
 
-# =========================================
-# Docker-specific config files (not needed inside image)
-# =========================================
+# ================================
+# Docker & local orchestration
+# ================================
 Dockerfile
+Dockerfile.*
 .dockerignore
+docker-compose.yml
 docker-compose*.yml
 
-# =========================================
+# ================================
 # Miscellaneous
-# =========================================
+# ================================
 *.bak
 *.old
 *.tmp
@@ -338,7 +339,7 @@ With your custom configuration in place, you're now ready to build the Docker im
 
 The updated setup includes:
 
-- Clean, production-ready Nginx configuration tailored specifically for Angular.
+- The updated setup includes a clean, production-ready NGINX configuration tailored specifically for Angular.
 - Efficient multi-stage Docker build, ensuring a small and secure final image.
 
 After completing the previous steps, your project directory should now contain the following files:
@@ -424,7 +425,7 @@ in a terminal.
 $ docker compose up --build -d
 ```
 
-Open a browser and view the application at [http://localhost:8080](http://localhost:8080). You should see a simple web application preview.
+Open a browser and view the application at [http://localhost:8080](http://localhost:8080). You should see your Angular application running in the browser.
 
 
 To confirm that the container is running, use `docker ps` command:
@@ -458,7 +459,7 @@ $ docker compose down
 
 ## Summary
 
-In this guide, you learned how to containerize, build, and run a Angular application using Docker. By following best practices, you created a secure, optimized, and production-ready setup.
+In this guide, you learned how to containerize, build, and run an Angular application using Docker. By following best practices, you created a secure, optimized, and production-ready setup.
 
 What you accomplished:
 - Initialized your project using `docker init` to scaffold essential Docker configuration files.