codegeekdev/cg_theme_v2-app_build-node14

•Updated almost 3 years ago

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

Image

1.7K

codegeekdev/cg_theme_v2-app_build-node14 repository overview

⁠Quick reference

This image is created for CodeGeek-specific internal applications. It's to be used by cg_theme_v2 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

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

Reinitialize the project.

Our Docker proj tooling was patched in v1.8.3 to contain code fixes for cg_theme_v2 projects that may fail to build in the future as node packages become obsolete. 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_v2 multisite projects. If you haven't already done so, then reinitialize the project with the following:

$ proj reinit -t cg_theme_v2

Otherwise, just perform a normal reinitialization.

$ proj reinit

Rebuild the project.

$ proj rebuild

Build the project's assets.

$ proj build

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.

$ sass-migrator division --migrate-deps ./assets/sass/main.scss

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=14-slim

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.
# Same with our package.json file.
COPY Dockerfile /
COPY package.json /

# Copy the package.json file that we'll use to install packages below.
COPY package.json .

RUN mkdir /node_modules && \
    ln -s /node_modules . && \
    yarn install

RUN cp package*.json yarn.lock /node_modules

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

⁠package.json

{
    "name": "codegeek-theme",
    "version": "2.1.1",
    "private": true,
    "devDependencies": {
      "browser-sync": "^2.26.7",
      "browser-sync-webpack-plugin": "^2.0.1",
      "core-js": "^3.6.5",
      "cross-env": "^7.0.2",
      "cssnano": "^4.1.10",
      "glob": "^7.1.6",
      "import-glob": "^1.5.0",
      "laravel-mix": "^6.0.11",
      "lodash": "^4.17.15",
      "modernizr": "^3.7.1",
      "sanitize.css": "^12.0.1",
      "postcss": "^8.1",
      "postcss-normalize": "^9.0.0",
      "prettier": "^2.0.5",
      "resolve-url-loader": "^3.1.0",
      "sass": "^1.32.8",
      "sass-loader": "^11.0",
      "svgo-loader": "^2.2.1",
      "vue-template-compiler": "^2.6.11"
    },
    "scripts": {
      "modernizr": "./node_modules/modernizr/bin/modernizr -c assets/scripts/.modernizrrc.json -d assets/scripts/modernizr.js",
      "start": "npm run watch",
      "dev": "npm run development",
      "development": "mix",
      "watch": "npm run modernizr && mix watch",
      "watch-poll": "mix watch -- --watch-options-poll=1000",
      "hot": "mix watch --hot --host 0.0.0.0",
      "prod": "npm run production",
      "production": "mix --production"
    }
  }

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_v2-app_build-node14:1.0.0 --tag codegeekdev/cg_theme_v2-app_build-node14: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_v2-app_build-node14:latest

Start a container that we will shell into.

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

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

$ more /Dockerfile

Tag summary

Recent tags

Content type

Image

Digest

sha256:b1b376e66…

Size

147.9 MB

Last updated

almost 3 years ago

docker pull codegeekdev/cg_theme_v2-app_build-node14