CI/CD Workflow

The project has not yet set up a CI/CD workflow. Here are some next steps to establish one based on best practices for a project using JavaScript, HTML, SCSS, and Docker.

Step 1: Define Continuous Integration

1. Testing Framework: Set up a testing framework suitable for JavaScript. Consider using Jest for unit tests.

   Example configuration in src/test/spec/all.js:

   import './test-main';
   

2. Create a CI Configuration File: Create a file named .github/workflows/ci.yml in the root directory to define the CI pipeline.

   Example ci.yml:

   name: CI
   
   on: [push, pull_request]
   
   jobs:
     build:
       runs-on: ubuntu-latest
   
       steps:
       - name: Check out code
         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: Run tests
         run: npm test
   

Step 2: Define Continuous Delivery

1. Build and Package: Utilize Docker for creating a container for your application. Ensure your Dockerfile and docker-compose.yml are properly set.

   Example Dockerfile:

   FROM node:22
   
   WORKDIR /app
   RUN mkdir -p /output
   RUN chmod -R 777 /output
   
   RUN apt-get update --fix-missing \
       && apt-get install -y \
           ca-certificates \
           fonts-liberation \
           ...
       && 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
   

   Example 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
   

2. Tag and Release:

   Utilize the versioning best practices by tagging the release in Git. Update the README.md accordingly:

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

3. Deployment Steps: In README.md, include instructions to upload the generated .zip from the CI to the Chrome Web Store.

   Example instructions:

   Navigate to the GitHub releases and click 'Draft a new release'.
   Select the tag you just created above and provide a release title and description.
   
   Navigate to Chrome Web Store Developer Dashboard.
   Select the right publisher account and upload the `.zip` file.
   

Step 3: Code Quality and Linting

Integrate a linter to maintain code quality. Create a configuration file, e.g., .eslintrc.json:

Example .eslintrc.json:

{
   "extends": "eslint:recommended",
   "env": {
     "browser": true,
     "es6": true
   },
   "rules": {
     "indent": ["error", 2],
     "linebreak-style": ["error", "unix"],
     "quotes": ["error", "single"],
     "semi": ["error", "always"]
   }
}

Add a step in the CI pipeline to run the linter:

- name: Lint code
  run: npm run lint

Step 4: Continuous Monitoring and Optimization

Once the CI/CD workflow is established, continuously monitor the builds and optimize the process. Ensure to review failed CI/CD jobs and refine the setup as necessary.

These instructions lay out a foundational CI/CD workflow suitable for the screenly/chrome-extension project, focusing on leveraging Docker, Git for versioning, and GitHub Actions for CI.