Scaling in Production

To scale the Screenly Chrome extension in production, a well-structured Docker setup is necessary. This ensures that the application is portable, manageable, and efficient across different environments. Below are the steps involved in scaling the project effectively.

Step 1: Docker Setup

1. Dockerfile Preparation

   The Dockerfile specifies the image and application setup. To manage dependencies efficiently and to utilize Docker’s caching mechanism, ensure that you properly structure it:

   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 \
           gconf-service \
           libappindicator1 \
           libasound2 \
           libgtk-3-0 \
           wget \
           zip \
       && 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
   

   This setup ensures all necessary libraries for headless Chrome are installed and that the application dependencies are cached effectively.

Step 2: docker-compose.yml Configuration

2. Service Configuration

   Define services using docker-compose.yml. This file will manage the services and their configurations, especially during scaling:

   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 to keep this inside the container
       environment:
         - JEKYLL_ENV=development
   

   The above configuration assumes that the webpack service is crucial for building and watching changes made to the code, highlighted by the command set to watch for changes.

Step 3: Building and Running Docker Containers

3. Building and Running Containers

   To scale the application, run the following commands to build and execute Docker containers:

   docker compose build
   docker run --rm -ti -v $(pwd):/app:delegated -v /app/node_modules sce_webpack:latest /bin/bash -c "npx webpack --config webpack.prod.js"
   

   This command sets up containers that will build the production version of the application. The volume mounts allow local changes to propagate into the containers efficiently.

Step 4: Running Tests

4. Testing the Application

   It’s critical to ensure that the application runs correctly in the production-like environment. Use a shell script for running tests via Docker:

   #!/usr/bin/env bash
   
   set -euo pipefail
   
   docker compose build
   docker run \
       --rm -ti \
       -v $(pwd):/app:delegated \
       -v /app/node_modules \
       sce_webpack:latest \
       /bin/bash -c "npx webpack --config webpack.dev.js && npm test"
   

   This script ensures that the application is built correctly and all tests are executed within the containerized environment.

Step 5: Packaging the Extension

5. Packaging for Deployment

   To deploy the application, package it using a script that zips the contents for release:

   #!/usr/bin/env bash
   
   set -euo pipefail
   VERSION=${VERSION:-0.0.0}
   cat src/manifest.json
   
   docker compose build
   docker run \
       --rm -ti \
       -v $(pwd):/app:delegated \
       -v /app/node_modules \
       sce_webpack:latest \
       /bin/bash -c "npx webpack --config webpack.prod.js"
   
   (cd dist && zip -r ../screenly-chrome-extension-$VERSION.zip *)
   

   This script efficiently packages the built extension for deployment.

Step 6: Continuous Integration and Deployment

6. Utilization of CI/CD

   Make sure to integrate GitHub actions or any CI/CD service to automatically build and deploy the application upon new tag creation in Git. Here is a typical release tag process:

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

   Upon tagging, the CI system can trigger the build pipeline which packages and deploys the extension.

By utilizing Docker for building, testing, and deploying the Screenly Chrome extension, along with proper packaging and CI/CD practices, scaling into production can be streamlined and efficient.

Source: Code snippets provided from the codebase and related files.