codegeekdev/cg_theme_v4-app_build-node20

•Updated 9 months ago

A CodeGeek specific base image for CG Theme v4 projects with app_build containers.

Image

1.8K

codegeekdev/cg_theme_v4-app_build-node20 repository overview

⁠Quick reference

This image is created for CodeGeek-specific internal applications. It's to be used by cg_theme_v4 projects in order to 'lock in' the node build packages used in these older projects. The image supports both amd64 and arm64 platforms. This build container uses vite to serve and bundle sass and js assets. It also has pa11y installed for accessibility testing.

Maintained by:
CodeGeek⁠, a Fort Collins, Colorado company specializing in custom website design and development.

⁠How To Use This Image

Edit your project-config.json with your desired WP and PHP versions. Also, update the following lines to include this image for your app_build.

    {
      "name": "app_build",
      "image": "codegeekdev/cg_theme_v4-app_build-node20",
      "version": "latest",
      "platform": ""
    },

Reinitialize the project.

Use the following command to bring in the new Dockerfile and entrypoint for the app_build container. It will also add the pa11y-ci command to your project if it doesn't already exist.

$ proj reinit -t cg_theme_v4

Rebuild the project.

$ proj rebuild

Build the project's assets.

$ proj build

Pull the live website.

$ proj pull -pU prod

Test the site. Once your testing is successful, commit and push the file changes to the Git repository.

⁠This Image is Built with the Following Files

⁠Dockerfile

ARG IMAGE=node
ARG VERSION=20

FROM ${IMAGE}:${VERSION}

# These are packages needed to support the pa11y node-module. They add support for chromium headless browser
RUN apt-get update && \
    apt-get install -y libnss3 libgconf-2-4 ca-certificates fonts-liberation libappindicator3-1 libasound2 libatk-bridge2.0-0 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 && \
    apt-get install -y libexpat1 libfontconfig1 libgbm1 libgcc1 libglib2.0-0 libgtk-3-0 libnspr4 libnss3 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 && \
    apt-get install -y libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 lsb-release wget xdg-utils chromium

RUN mkdir /node_modules && \
    chmod 777 /node_modules

# Keep THIS Dockerfile recipe in the image so we can reference this in the future.
# Same with our package.json file.
COPY Dockerfile /
COPY package.json /

RUN useradd -ms /bin/bash app
WORKDIR /app

# Copy package.json and yarn.lock if it exists
COPY package.json /app/

ENV PATH="/node_modules/.bin:$PATH"

# Install the codegeek theme
RUN ln -s /node_modules . && \
  yarn install && \
  yarn global add pa11y-ci pa11y-ci-reporter-html && \
  cp package.json /node_modules && \
  chmod 666 /node_modules/package.json && \
  cp yarn.lock /node_modules && \
  chmod 666 /node_modules/yarn.lock

USER app

⁠package.json

{
  "name": "codegeek-fse",
  "version": "1.1.0",
  "description": "CodeGeek Full site editing theme",
  "author": "CodeGeek",
  "homepage": "https://codegeek.net",
  "license": "GPL-2.0-or-later",
  "keywords": [
    "WordPress",
    "Theme"
  ],
  "devDependencies": {
    "@codegeekdevs/vite-encrypt-file": "^1.0.2",
    "cssnano": "^5.1.14",
    "postcss": "^8.4.49",
    "postcss-pxtorem": "^6.0.0",
    "rollup-plugin-copy": "^3.5.0",
    "sass": "^1.55.0",
    "vite": "^7.0.7"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

This package.json file is included in this image so as to 'lock in' these specific package versions. Your project will inherit this package.json file in your running container each time you rebuild your project. If you need to install additional packages for your project, do not edit the package.json file (in your project's root folder). Instead, install additional packages from within your /cg_config/docker/app_build/Dockerfile. For example, add a 'yarn add' command in your Dockerfile, like this:

ARG IMAGE=check-proj-config-file-for-image
ARG VERSION=check-proj-config-file-for-version

FROM ${IMAGE}:${VERSION}

ARG NAME

WORKDIR /app

ENV PROJECTNAME=${NAME}

# If you have any additional packages to install, do so here.
# We'll save the modified package[*].json files to the node_modules folder.
# When the container mounts to the /app folder, we'll lose these
# local copies. In our entrypoint.sh, we'll copy them back.
RUN yarn add @wordpress/a11y@^3.4.1 && \
    cp package*.json yarn.lock /node_modules

⁠Building this Image

Recipe for building this image and pushing it to the Docker Hub repo.

Create the two files Dockerfile and package.json. Copy the above contents into each one. If needed, edit any changes, including the Dockerfile Node version, etc.

$ mkdir build-dir 
$ cd build-dir
$ vi Dockerfile
$ vi package.json

Determine if we've already created a Docker builder instance. Note: buildx enhances the Docker build tool, allowing us to build multi-platform images.

$ docker buildx ls

NAME/NODE       DRIVER/ENDPOINT  STATUS  BUILDKIT             PLATFORMS
cg-builder *    docker-container                              
  cg-builder0   desktop-linux    stopped                      linux/arm64*, linux/amd64*

If the builder instance name 'cg-builder' is listed, then run:

$ docker buildx use cg-builder

Otherwise, create a new builder instance:

$ docker buildx create --name cg-builder --bootstrap --use --platform linux/arm64,linux/amd64

$ docker login -u codegeekdev
$ password: xxxxxxxx

Build and push the image to Docker Hub under this account. Note: Replace the image tag with the new version. See Docker Multi-platform build instructions⁠.

$ docker buildx build --no-cache --push --platform linux/amd64,linux/arm64 --tag codegeekdev/cg_theme_v4-app_build-node20:1.0.0 --tag codegeekdev/cg_theme_v4-app_build-node20:latest -f Dockerfile .

Delete the builder instance you created above. This will reset the Docker build driver to the default.

$ docker buildx rm cg-builder

⁠To Shell into a Container using this Image

Pull the image locally.

$ docker pull codegeekdev/cg_theme_v4-app_build-node20:latest

Start a container that we will shell into.

$ docker run -it codegeekdev/cg_theme_v4-app_build-node20 /bin/bash

View the contents of the Dockerfile that we store, etc.

$ more /Dockerfile

Tag summary

Recent tags

Content type

Image

Digest

sha256:4cf6ef76a…

Size

1.2 GB

Last updated

9 months ago

docker pull codegeekdev/cg_theme_v4-app_build-node20