added a guide for Dockerized Vue.js application

content/guides/angular/develop.md

@@ -53,7 +53,7 @@ WORKDIR /app
 COPY package.json package-lock.json ./
 
 # Install dependencies using npm with caching to speed up subsequent builds
-RUN --mount=type=cache,target=/root/.npm npm ci
+RUN --mount=type=cache,target=/root/.npm npm install
 
 # Copy all application source files into the container
 COPY . .

content/guides/vuejs/_index.md

@@ -0,0 +1,49 @@
+---
+title: Vue.js language-specific guide
+linkTitle: Vue.js
+description: Containerize and develop Vue.js apps using Docker
+keywords: getting started, vue, vuejs docker, language, Dockerfile
+summary: |
+  This guide explains how to containerize Vue.js applications using Docker.
+toc_min: 1
+toc_max: 2
+languages: [js]
+params:
+  time: 20 minutes
+
+---
+
+The Vue.js language-specific guide shows you how to containerize an Vue.js application using Docker, following best practices for creating efficient, production-ready containers.
+
+[Vue.js](https://vuejs.org/) is a progressive and flexible framework for building modern, interactive web applications. However, as applications scale, managing dependencies, environments, and deployments can become complex. Docker simplifies these challenges by providing a consistent, isolated environment for both development and production.
+
+> 
+> **Acknowledgment**
+>
+> Docker extends its sincere gratitude to [Kristiyan Velkov](https://www.linkedin.com/in/kristiyan-velkov-763130b3/) for authoring this guide. As a Docker Captain and highly skilled Front-end engineer, Kristiyan brings exceptional expertise in modern web development, Docker, and DevOps. His hands-on approach and clear, actionable guidance make this guide an essential resource for developers aiming to build, optimize, and secure Vue.js applications with Docker.
+---
+
+## What will you learn?
+
+In this guide, you will learn how to:
+
+- Containerize and run an Vue.js application using Docker.
+- Set up a local development environment for Vue.js inside a container.
+- Run tests for your Vue.js application within a Docker container.
+- Configure a CI/CD pipeline using GitHub Actions for your containerized app.
+- Deploy the containerized Vue.js application to a local Kubernetes cluster for testing and debugging.
+
+You'll start by containerizing an existing Vue.js application and work your way up to production-level deployments.
+
+---
+
+## Prerequisites
+
+Before you begin, ensure you have a working knowledge of:
+
+- Basic understanding of [TypeScript](https://www.typescriptlang.org/) and [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript).
+- Familiarity with [Node.js](https://nodejs.org/en) and [npm](https://docs.npmjs.com/about-npm) for managing dependencies and running scripts.
+- Familiarity with [Vue.js](https://vuejs.org/) fundamentals.
+- Understanding of core Docker concepts such as images, containers, and Dockerfiles. If you're new to Docker, start with the [Docker basics](/get-started/docker-concepts/the-basics/what-is-a-container.md) guide.
+
+Once you've completed the Vue.js getting started modules, you’ll be fully prepared to containerize your own Vue.js application using the detailed examples and best practices outlined in this guide.

content/guides/vuejs/configure-github-actions.md

@@ -0,0 +1,320 @@
+---
+title: Automate your builds with GitHub Actions
+linkTitle: Automate your builds with GitHub Actions
+weight: 60
+keywords: CI/CD, GitHub( Actions), Vue.js
+description: Learn how to configure CI/CD using GitHub Actions for your Vue.js application.
+
+---
+
+## Prerequisites
+
+Complete all the previous sections of this guide, starting with [Containerize an Vue.js application](containerize.md).
+
+You must also have:
+- A [GitHub](https://github.com/signup) account.
+- A [Docker Hub](https://hub.docker.com/signup) account.
+
+---
+
+## Overview
+
+In this section, you'll set up a CI/CD pipeline using [GitHub Actions](https://docs.github.com/en/actions) to automatically:
+
+- Build your Vue.js application inside a Docker container.
+- Run tests in a consistent environment.
+- Push the production-ready image to [Docker Hub](https://hub.docker.com).
+
+---
+
+## Connect your GitHub repository to Docker Hub
+
+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: 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**.
+   2. Generate a new Access Token with **Read/Write** permissions.
+   3. Name it something like `docker-vuejs-sample`.
+   4. Copy and save the token — you’ll need it in Step 4.
+
+2. Create a repository in [Docker Hub](https://hub.docker.com/repositories/)
+   1. Go to your **Docker Hub account → Create a repository**.
+   2. For the Repository Name, use something descriptive — for example: `vuejs-sample`.
+   3. Once created, copy and save the repository name — you’ll need it in Step 4.
+
+3. Create a new [GitHub repository](https://github.com/new) for your Vue.js project
+
+4. Add Docker Hub credentials as GitHub repository secrets
+
+   In your newly created GitHub repository:
+
+   1. Navigate to:
+   **Settings → Secrets and variables → Actions → New repository secret**.
+
+   2. Add the following secrets:
+
+   | Name              | Value                          |
+   |-------------------|--------------------------------|
+   | `DOCKER_USERNAME` | Your Docker Hub username       |
+   | `DOCKERHUB_TOKEN` | Your Docker Hub access token (created in Step 1)   |
+   | `DOCKERHUB_PROJECT_NAME` | Your Docker Project Name (created in Step 2)   |
+
+   These secrets allow GitHub Actions to authenticate securely with Docker Hub during automated workflows.
+
+5. Connect Your Local Project to GitHub
+
+   Link your local project `docker-vuejs-sample` to the GitHub repository you just created by running the following command from your project root:
+
+   ```console
+      $ git remote set-url origin https://github.com/{your-username}/{your-repository-name}.git
+   ```
+
+   >[!IMPORTANT]
+   >Replace `{your-username}` and `{your-repository}` with your actual GitHub username and repository name.
+
+   To confirm that your local project is correctly connected to the remote GitHub repository, run:
+
+   ```console
+   $ git remote -v
+   ```
+
+   You should see output similar to:
+
+   ```console
+   origin  https://github.com/{your-username}/{your-repository-name}.git (fetch)
+   origin  https://github.com/{your-username}/{your-repository-name}.git (push)
+   ```
+
+   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
+
+   Follow these steps to commit and push your local project to your GitHub repository:
+
+   1. Stage all files for commit.
+
+      ```console
+      $ git add -A
+      ```
+      This command stages all changes — including new, modified, and deleted files — preparing them for commit.
+
+
+   2. Commit the staged changes with a descriptive message.
+
+      ```console
+      $ git commit -m "Initial commit"
+      ```
+      This command creates a commit that snapshots the staged changes with a descriptive message.  
+
+   3. Push the code to the `main` branch.
+
+      ```console
+      $ git push -u origin main
+      ```
+      This command pushes your local commits to the `main` branch of the remote GitHub repository and sets the upstream branch.
+
+Once completed, your code will be available on GitHub, and any GitHub Actions workflow you’ve configured will run automatically.
+
+> [!NOTE]  
+> Learn more about the Git commands used in this step:
+> - [Git add](https://git-scm.com/docs/git-add) – Stage changes (new, modified, deleted) for commit  
+> - [Git commit](https://git-scm.com/docs/git-commit) – Save a snapshot of your staged changes  
+> - [Git push](https://git-scm.com/docs/git-push) – Upload local commits to your GitHub repository  
+> - [Git remote](https://git-scm.com/docs/git-remote) – View and manage remote repository URLs
+
+---
+
+### Step 2: Set up the workflow
+
+Now you'll create a GitHub Actions workflow that builds your Docker image, runs tests, and pushes the image to Docker Hub.
+
+1. Go to your repository on GitHub and select the **Actions** tab in the top menu.
+
+2. Select **Set up a workflow yourself** when prompted.
+
+    This opens an inline editor to create a new workflow file. By default, it will be saved to:
+   `.github/workflows/main.yml`
+
+
+3. Add the following workflow configuration to the new file:
+
+```yaml
+name: CI/CD – Vue.js App with Docker
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+    types: [opened, synchronize, reopened]
+
+jobs:
+  build-test-deploy:
+    name: Build, Test & Deploy
+    runs-on: ubuntu-latest
+
+    steps:
+      # 1. Checkout the codebase
+      - name: Checkout Code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      # 2. Set up Docker Buildx
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      # 3. Cache Docker layers
+      - name: Cache Docker Layers
+        uses: actions/cache@v4
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-buildx-${{ github.sha }}
+          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-
+
+      # 5. Generate build metadata
+      - name: Generate Build Metadata
+        id: meta
+        run: |
+          echo "REPO_NAME=${GITHUB_REPOSITORY##*/}" >> "$GITHUB_OUTPUT"
+          echo "SHORT_SHA=${GITHUB_SHA::7}" >> "$GITHUB_OUTPUT"
+
+      # 6. Build Docker image for testing
+      - name: Build Dev Docker Image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: Dockerfile.dev
+          tags: ${{ steps.meta.outputs.REPO_NAME }}-dev:latest
+          load: true
+          cache-from: type=local,src=/tmp/.buildx-cache
+          cache-to: type=local,dest=/tmp/.buildx-cache,mode=max
+
+      # 7. Run unit tests inside container
+      - name: Run Vue.js Tests
+        run: |
+          docker run --rm \
+            --workdir /app \
+            --entrypoint "" \
+            ${{ steps.meta.outputs.REPO_NAME }}-dev:latest \
+            sh -c "npm ci && npm run test -- --ci --runInBand"
+        env:
+          CI: true
+          NODE_ENV: test
+        timeout-minutes: 10
+
+      # 8. Log in to Docker Hub
+      - name: Docker Hub Login
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      # 9. Build and push production image
+      - name: Build and Push Production Image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: Dockerfile
+          push: true
+          platforms: linux/amd64,linux/arm64
+          tags: |
+            ${{ secrets.DOCKER_USERNAME }}/${{ secrets.DOCKERHUB_PROJECT_NAME }}:latest
+            ${{ secrets.DOCKER_USERNAME }}/${{ secrets.DOCKERHUB_PROJECT_NAME }}:${{ steps.meta.outputs.SHORT_SHA }}
+          cache-from: type=local,src=/tmp/.buildx-cache
+```
+
+This workflow performs the following tasks for your Vue.js application:
+- Triggers on every `push` or `pull request` targeting the `main` branch.
+- Builds a development Docker image using `Dockerfile.dev`, optimized for testing.
+- Executes unit tests using Vitest inside a clean, containerized environment to ensure consistency.
+- Halts the workflow immediately if any test fails — enforcing code quality.
+- Caches both Docker build layers and npm dependencies for faster CI runs.
+- Authenticates securely with Docker Hub using GitHub repository secrets.
+- Builds a production-ready image using the `prod` stage in `Dockerfile`.
+- Tags and pushes the final image to Docker Hub with both `latest` and short SHA tags for traceability.
+
+> [!NOTE]
+>  For more information about  `docker/build-push-action`, refer to the [GitHub Action README](https://github.com/docker/build-push-action/blob/master/README.md).
+
+---
+
+### Step 3: Run the workflow
+
+After you've added your workflow file, it's time to trigger and observe the CI/CD process in action.
+
+1. Commit and push your workflow file
+   - Select "Commit changes…" in the GitHub editor.
+   - This push will automatically trigger the GitHub Actions pipeline.
+
+2. Monitor the workflow execution
+   - 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
+
+   - After a successful workflow run, visit your [Docker Hub repositories](https://hub.docker.com/repositories).
+   - You should see a new image under your repository with:
+      - Repository name: `${your-repository-name}`
+      - Tags include:
+         - `latest` – represents the most recent successful build; ideal for quick testing or deployment.
+         - `<short-sha>` – a unique identifier based on the commit hash, useful for version tracking, rollbacks, and traceability.
+
+> [!TIP] Protect your main branch
+> To maintain code quality and prevent accidental direct pushes, enable branch protection rules:
+>  - Navigate to your **GitHub repo → Settings → Branches**.
+>  - Under Branch protection rules, click **Add rule**.
+>  - Specify `main` as the branch name.
+>  - Enable options like:
+>     - *Require a pull request before merging*.
+>     - *Require status checks to pass before merging*.
+>
+>  This ensures that only tested and reviewed code is merged into `main` branch.
+---
+
+## Summary
+
+In this section, you set up a complete CI/CD pipeline for your containerized Vue.js application using GitHub Actions.
+
+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 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.
+- Triggered and verified the workflow execution through GitHub Actions.
+- Confirmed that your image was successfully published to Docker Hub.
+
+With this setup, your Vue.js application is now ready for automated testing and deployment across environments — increasing confidence, consistency, and team productivity.
+
+---
+
+## Related resources
+
+Deepen your understanding of automation and best practices for containerized apps:
+
+- [Introduction to GitHub Actions](/guides/gha.md) – Learn how GitHub Actions automate your workflows  
+- [Docker Build GitHub Actions](/manuals/build/ci/github-actions/_index.md) – Set up container builds with GitHub Actions  
+- [Workflow syntax for GitHub Actions](https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions) – Full reference for writing GitHub workflows  
+- [Compose file reference](/compose/compose-file/) – Full configuration reference for `compose.yaml`  
+- [Best practices for writing Dockerfiles](/develop/develop-images/dockerfile_best-practices/) – Optimize your image for performance and security  
+
+---
+
+## Next steps
+
+Next, learn how you can locally test and debug your Vue.js workloads on Kubernetes before deploying. This helps you ensure your application behaves as expected in a production-like environment, reducing surprises during deployment.