codegeekdev/harlem-capital-app_build-node12 repository overview

⁠Quick reference

This image is for the Harlem Capital website at the time we inherited this project. It was created to 'lock in' the node packages used in this older project. 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 file.

• Update the WordPress and PHP versions.
• Update the following lines to include this new image for your app_build container:

    {
      "name": "app_build",
      "image": "codegeekdev/harlem-capital-app_build-node12",
      "version": "latest",
      "platform": ""
    },

2. Reinitialize the project.

$ proj reinit

3. Rebuild the project.

$ proj rebuild

4. Pull the live website.

$ proj pull -tpU prod

5. Build the project's assets.

$ proj build

6. Access the website.

$ proj open

⁠What if I Need to Add additional Node Packages to the Project?

This base image has installed within it all of the node packages listed within the package.json file. Because of this, the 'proj rebuild|start' command in your project folder will no longer rely on package.json to install node packages.

The package.json in the project root folder is now an artifact, left in place, from this base image. Therefore, editing the package.json, in order to install additional packages to the project, will have no effect. Do not edit this file now.

⁠Details

By installing the node modules into this base image, we are able to install older packages that may become outdated over time and eventually be removed from remote npm repositories. If that ever became the case, then we would lose access to those packages and the project's build process would fail. Locking in these modules now in the base image prevents this.

The older website codebase was originally inherited from the client, and updating package versions this late in the game would be arduous, difficult to reconcile dependencies, and risk breaking the site without extensive testing. This is the reason the base image was created.

⁠Installing Additional Node Packages

You can do this by editing the project's cg_config/docker/app_build/Dockerfile. See the instructions within.

⁠How to Recreate this DockerHub Image

1. Create a Temporary Folder in Which to Build the Image.

Change into any temporary folder you wish.

$ cd /tmp
$ mkdir build-dir 
$ cd build-dir

2. Create a New File named 'Dockerfile' to Include the Following Contents.

# Insert the contents below into the file.
$ vi Dockerfile

Dockerfile Contents:

ARG IMAGE=node
ARG VERSION=12

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 yarn.lock /

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

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

3. Create a New File Named 'package.json'

# Insert the contents from the /package.json file from the Harlem Capital project.
# You'll find this file in the root folder of the project.
$ vi package.json

4. Create a New File Named 'yarn.lock'

# Insert the contents from the /yarn.lock file from the Harlem Capital project.
# You'll find this file in the root folder of the project.
$ vi yarn.lock

5. Create a Docker Builder Instance.

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

6. Login to DockerHub.

On the command line, enter:

$ docker login -u codegeekdev
$ password: xxxxxxxx

7. Build and Push the Image to DockerHub.

Note: Replace the image tag with the new version. See Docker Multi-platform build instructions⁠.

Run the following command, replacing the version number at the end of the 'tag' strings:

$ docker buildx build --no-cache --push --platform linux/amd64,linux/arm64 --tag codegeekdev/harlem-capital-app_build-node12:1.0.1 --tag codegeekdev/harlem-capital-app_build-node12:latest -f Dockerfile .

8. 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 the Container Using this Image

1. Pull the Imaage Locally.

$ docker pull codegeekdev/harlem-capital-app_build-node12:latest

2. Start a Container that we will shell into.

$ docker run -it codegeekdev/harlem-capital-app_build-node12:latest /bin/bash

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

$ more /Dockerfile