codegeekdev/cg_theme_v1-app_build-node14 repository overview

⁠Quick reference

This image is created for CodeGeek-specific internal applications. It's to be used by cg_theme_v1 projects in order to 'lock in' the node build packages used in these older projects. The image supports both amd64 and arm64 platforms.

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

⁠How To Use This Image

1. 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_v1-app_build-node14",
      "version": "latest",
      "platform": ""
    },

1. Reinitialize the project.

Our Docker proj tooling was patched in v1.7.12 to contain code fixes for cg_theme_v1 projects that fail to build due to references to Ruby, Compass, and other obsolete packages. These patches need to be applied to your project only once. Note that it is expected that some projects will need some minimal hand surgery after applying the reinit changes, but the goal is to fix 95% of the troubling code. Also, do not apply these patches to cg_theme_v1 multisite projects. If you haven't already done so, then reinitialize the project with the following:

$ proj reinit -t cg_theme_v1

Otherwise, just perform a normal reinitialization.

$ proj reinit

1. Rebuild the project.

$ proj rebuild

1. Build the project's assets.

$ proj build

1. If you experience sass division (i.e. number / number) deprecation warnings during the 'proj build' process, then consider installing and running sass-migrator⁠. This will replace deprecated division statements with division functions that SASS will better understand. It is important to verify that the changes made are legitimate. Sometimes the automatic conversion of some property values from (number/number) to math.div(number, number) is not always correct. Another option is to replace these instances by hand.

Install Sass Migrator into the app_build container:

$ proj shell app_build
$ npm install sass-migrator
$ sass-migrator division --migrate-deps ./assets/sass/main.scss
$ exit

1. Pull the live website.

$ proj pull -pU prod

1. 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 Dockerfile

ARG IMAGE=node
ARG VERSION=14

FROM ${IMAGE}:${VERSION}

WORKDIR /app

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

# Keep THIS Dockerfile recipe in the image so we can reference this in the future.
COPY Dockerfile /

# Install our node modules.
# 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 your entrypoint.sh, copy them back.
RUN mkdir /node_modules && \
    ln -s /node_modules . && \
    npm init --yes && \
    npm install --save-dev \
    bower@^1.8.14 \
    browser-sync@^2.29.3 \
    grunt@^0.4.5 \
    grunt-browser-sync@^2.1.3 \
    grunt-cli@^1.4.3 \
    grunt-contrib-concat@~0.5.0 \
    grunt-contrib-jshint@~0.10.0 \
    grunt-contrib-uglify@~0.5.0 \
    grunt-contrib-watch@~0.6.1 \
    grunt-dart-sass@^2.0.1 \
    grunt-wp-assets@~0.2.6 \
    load-grunt-tasks@~0.6.0 \
    lodash@^4.17.21 \
    sass@^1.69.5 \
    time-grunt@~0.4.0 && \
    cp package*.json /node_modules

# Nice to have alias.
RUN echo "alias ll='ls -al'" >> ~/.bashrc

Note: The Dockerfile above will create a package.json file that will 'lock in' 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 'npm install' 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 npm install --save-dev @wordpress/a11y@^3.4.1 && \
     cp package*.json /node_modules

⁠Building this Image

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

1. Copy and paste the contents of the above Dockerfile into a new Dockerfile. Edit any changes, including Node version, etc.

$ mkdir build-dir 
$ cd build-dir
$ vi Dockerfile

1. 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*

1. 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

1. Login to Docker Hub on the command line.

$ docker login -u codegeekdev
$ password: xxxxxxxx

1. 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_v1-app_build-node14:1.0.0 --tag codegeekdev/cg_theme_v1-app_build-node14:latest -f Dockerfile .

1. 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

1. Pull the image locally.

$ docker pull codegeekdev/cg_theme_v1-app_build-node14:latest

1. Start a container that we will shell into.

$ docker run -it codegeekdev/cg_theme_v1-app_build-node14 /bin/bash

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

$ more /Dockerfile