Production Deployment

Step 1: Prepare Docker Environment

Create a Dockerfile that sets up the environment for the Screenly Chrome extension. Ensure it uses Node.js, installs necessary packages, and sets file permissions correctly.

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 \
        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 \
        lsb-release \
        wget \
        zip \
        xdg-utils \
    && 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

Step 2: Setup Docker Compose File

Set up the docker-compose.yml file for managing multi-container Docker applications. It should include the Webpack service for building the extension.

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/ 
    environment:
      - JEKYLL_ENV=development

Step 3: Build the Docker Image

Use Docker Compose to build the application. This step ensures all dependencies are resolved correctly, and the required assets are available.

Run the following command in the terminal:

$ docker compose up --build

Step 4: Generate Release Tag

Create a new release tag in the Git repository. This is crucial for versioning and tracking changes.

Example commands:

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

Step 5: Create Release on GitHub

Navigate to GitHub releases and draft a new release. Select the tag created in the previous step, providing a release title and detailed description.

To compare changes between releases, use:

$ git diff v0.2.0..v0.3.0

Step 6: Download Release Artifact

Head to the CI Job and pull the release .zip file associated with the new version.

Step 7: Verify Release Artifact

Use the GitHub CLI to verify the downloaded .zip file:

$ gh attestation verify path/to/release.zip --owner Screenly

Step 8: Upload to Chrome Web Store

Access the Chrome Web Store Developer Dashboard. Select the appropriate publisher account and upload the .zip file downloaded earlier.

Step 9: Load Unpacked Extension Locally

For local testing, load the contents of the dist/ folder as an unpacked extension in Chrome. This allows for real-time testing of changes.

This command initiates the development process with live rebuilding:

$ docker compose up --build

Ensure to reflect changes in the dist/ folder directly within Chrome.

This outline serves as comprehensive groundwork for deploying the Screenly Chrome extension in production. Source: README.md.