Docker Configuration

This section details how Docker is utilized in the development environment for the Screenly Chrome extension. The configuration is specified using Dockerfile and docker-compose.yml files, simplified for local development and testing.

Dockerfile

The Dockerfile is designed to set up the development environment using a Node.js image. Below are the relevant sections.

FROM node:22

WORKDIR /app
RUN mkdir -p /output
RUN chmod -R 777 /output

This creates the working directory /app within the container and prepares an output directory. The permissions are set to allow full access.

The following portion installs necessary dependencies for headless Chrome, which is required for unit testing:

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/*

This extensive list of packages ensures that headless Chrome operates smoothly. Afterward, the following lines manage dependencies via Node.js:

ADD package.json /app/package.json
ADD package-lock.json /app/package-lock.json
RUN npm install --quiet

ADD . /app

This code copies the package.json and package-lock.json, then installs the dependencies quietly. Finally, the entire application code is added to the container.

docker-compose.yml

The docker-compose.yml file defines the services required for the development setup. Here is the relevant content:

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

This configuration establishes a service for the Webpack build tool.

• build: . specifies that Docker should build an image using the Dockerfile in the current directory.
• command runs Webpack in watch mode, allowing immediate recompilation when changes are made to the source files.
• The volume mount .:/app:delegated allows the current directory on the host to be mirrored inside the container, while - /app/node_modules/ keeps the node_modules directory within the container to avoid conflicts.
• The environment variable JEKYLL_ENV=development specifies that the environment is set for development.

Running the Development Environment

To start the Docker environment for development, execute the following command in the terminal:

$ docker compose up --build

This will build the necessary Docker image and start the defined services. Changes to the source files will trigger automatic rebuilding of the extension, ensuring that the latest version is always loaded in Chrome.

Conclusion

This configuration allows for a smooth and efficient development process using Docker, facilitating automated builds and dependency management while isolating the development environment.