CI/CD Deployment

The project currently does not have a fully set up Continuous Integration/Continuous Deployment (CI/CD) pipeline. To implement CI/CD for the project, follow these steps:

1. Integrate CI/CD Tool: Choose a CI/CD service (like GitHub Actions, GitLab CI, Travis CI, or CircleCI). For this documentation, GitHub Actions will be illustrated.

2. Create CI/CD Configuration: In the root of the project, create a new directory for GitHub Actions workflows: .github/workflows.

3. Define Workflow File: Inside the .github/workflows directory, create a file named ci-cd.yml to establish CI/CD processes:

   name: CI/CD Pipeline
   
   on:
     push:
       branches:
         - master
     tags:
       - 'v*'
   
   jobs:
     build:
       runs-on: ubuntu-latest
   
       steps:
         - name: Checkout repository
           uses: actions/checkout@v2
   
         - name: Set up Node.js
           uses: actions/setup-node@v2
           with:
             node-version: '22'
   
         - name: Install dependencies
           run: npm install
   
         - name: Build the project
           run: npm run build
   
         - name: Create Release
           id: create_release
           uses: softprops/action-gh-release@v1
           with:
             files: dist/*
           env:
             GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
   

4. Build Script: Ensure that there is a build script defined in package.json. This script will be called during the build process:

   {
     "scripts": {
       "build": "webpack --config webpack.prod.js"
     }
   }
   

5. Docker Support: Utilize Docker for a consistent build environment. The following Docker configurations can assist in building your project within a containerized environment.

   Dockerfile:

   FROM node:22
   
   WORKDIR /app
   RUN mkdir -p /output
   RUN chmod -R 777 /output
   
   # Install necessary packages for headless Chrome.
   RUN apt-get update --fix-missing \
       && apt-get install -y \
           ca-certificates \
           fonts-liberation \
           gconf-service \
           libappindicator1 \
           libasound2 \
           libatk1.0-0 \
           libc6 \
           libcairo2 \
           libcups2 \
           libdbus-1-3 \
           libexpat1 \
           libfontconfig1 \
           libgcc1 \
           libgconf-2-4 \
           libgdk-pixbuf2.0-0 \
           libglib2.0-0 \
           libgtk-3-0 \
           libnspr4 \
           libnss3 \
           libpango-1.0-0 \
           libpangocairo-1.0-0 \
           libstdc++6 \
           libx11-6 \
           libx11-xcb1 \
           libxcb1 \
           libxcomposite1 \
           libxcursor1 \
           libxdamage1 \
           libxext6 \
           libxfixes3 \
           libxi6 \
           libxrandr2 \
           libxrender1 \
           libxss1 \
           libxtst6 \
       && rm -rf /var/lib/apt/lists/*
   
   ADD package.json /app/package.json
   ADD package-lock.json /app/package-lock.json
   RUN npm install --quiet
   
   ADD . /app
   

6. Docker Compose: Utilize Docker Compose to manage the build environment effectively.

   docker-compose.yml:

   services:
     webpack:
       build: .
       command: npx webpack --watch --config webpack.dev.js
       image: sce_webpack:latest
       volumes:
         - .:/app:delegated
         - /app/node_modules/  # Exclude from volume mount; we want this inside the container
       environment:
         - JEKYLL_ENV=development
   

7. Deployment Steps: Upon successfully building and testing your code, the package can be uploaded to the Chrome Web Store:

   • Generate a new release tag in git:

     $ git pull
     $ git checkout master
     $ git tag -a vX.Y.Z -m "tl;dr changelog."
     $ git push origin vX.Y.Z
     

   • Navigate to the GitHub releases to draft a new release and upload the .zip file downloaded from the CI job.

   • Select the right publisher account and upload the .zip to the Chrome Web Store Developer Dashboard.

For further consideration, documentation should be updated as CI/CD processes are refined and implemented. Always keep deployment practices and environments secure through appropriate token management and repository settings.