feat: push development image to docker hub

.github/workflows/deploy-prod.yml

@@ -9,6 +9,7 @@ on:
 jobs:
   lint-export-client:
     name: Lint and Export client
+    if: github.event.release.target_commitish == 'master'
     runs-on: ubuntu-latest
     env:
       NEXT_PUBLIC_BASE_PATH: ${{ secrets.NEXT_PUBLIC_BASE_PATH }}
@@ -51,6 +52,7 @@ jobs:
 
   deploy-client:
     name: Deploy client to Github Pages
+    if: github.event.release.target_commitish == 'master'
     needs: lint-export-client
     runs-on: ubuntu-latest
     steps:
@@ -66,3 +68,29 @@ jobs:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./
           publish_branch: gh-pages
+
+  docker-build-push:
+    name: Development Image to Dockerhub
+    if: github.event.release.target_commitish == 'master' && vars.DOCKERHUB_USERNAME != ''
+    needs: deploy-client
+    runs-on: ubuntu-latest
+    steps:
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Checkout the repository
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.event.release.tag_name }}
+
+      - name: Create env variables
+        run: cp docs/.env.example docs/.env
+
+      - name: Build Image
+        run: docker compose -f docker-compose.dev.yml build
+
+      - name: Push Image to Docker Hub
+        run: docker compose -f docker-compose.dev.yml push

README.md

@@ -25,6 +25,16 @@ The app depends these libraries and frameworks.
 - React v18.3.1
 - TailwindCSS v3.4.7
 
+### Table of Contents
+
+- [Requirements](#requirements)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Available Scripts](#available-scripts)
+- [Usage with Docker](#usage-with-docker)
+- [Usage with GitHub Actions](#usage-with-gitHub-actions)
+- [Deployment to Docker Hub](#deployment-to-docker-hub)
+
 ## Installation
 
 1. Clone this repository.<br>
@@ -68,14 +78,6 @@ The app depends these libraries and frameworks.
 3. Add or edit MDX files in the `/pages` directory, or add React components in the `/components` directory.
    - View the [**nextra**](https://nextra.site/docs) (docs-theme) documentation for more information on using nextra to add content.
 
-## Usage with GitHub Actions
-
-1. Add the environment variables described in the [Installation - step # 2](#installation) section to GitHub Secrets.
-2. Create a Release to deploy the site to the production environment (GitHub Pages).
-3. To update the banner content while there are no code or content updates:
-   - Update the GitHub Secrets: `RELEASE_VERSION`, `COMMIT_ID` and `RELEASE_PAGE`
-   - Re-deploy the latest production environment workflow from the GitHub Actions tab.
-
 
 ## Available Scripts
 
@@ -95,5 +97,56 @@ Checks lint errors.
 
 Fixes lint errors.
 
+## Usage with Docker
+
+Usage with Docker is an alternate option to using Node directly from the [Usage](#usage) section.
+
+### Use Pre-Built Development Docker Image
+
+1. Pull the development Docker image from Docker Hub using one of the options.<br>
+   - `docker pull acaptutorials/acaptutorials.github.io:dev`
+   - `docker compose -f docker-compose.dev.yml pull` (using Docker compose from the root project directory)
+
+2. Navigate to the project directory using the command line. Create a `.env` file inside the **/docs** directory with reference to the `.env.example` file.
+   - See [Usage](#usage) - **step # 2** for more information.
+
+3. Run the development Docker image.<br>
+`docker compose -f docker-compose.dev.yml up`
+
+4. (Optional) Run the development Docker image (from other directories).<br>
+`docker run -it --rm -p 3000:3000 acaptutorials/acaptutorials.github.io:dev`
+
+### Build the Development Docker Image
+
+1. Build the development Docker image on your machine.<br>
+`docker compose -f docker-compose.dev.yml build`
+
+2. Navigate to the project directory using the command line. Create a `.env` file inside the **/docs** directory with reference to the `.env.example` file.
+   - See [Usage](#usage) - **step # 2** for more information.
+
+3. Run the development Docker image.<br>
+`docker compose -f docker-compose.dev.yml up`
+
+## Usage with GitHub Actions
+
+1. Add the environment variables described in the [Installation - step # 2](#installation) section to GitHub Secrets.
+2. Create a Release to deploy the site to the production environment (GitHub Pages).
+3. To update the banner content while there are no code or content updates:
+   - Update the GitHub Secrets: `RELEASE_VERSION`, `COMMIT_ID` and `RELEASE_PAGE`
+   - Re-deploy the latest production environment workflow from the GitHub Actions tab.
+
+### Deployment to Docker Hub
+
+This repository deploys the latest development Docker image `acaptutorials/acaptutorials.github.io:dev` to Docker Hub on the creation of new Tags/Releases with GitHub Actions. Supply the following GitHub Secrets and Variable to enable deployment to Docker Hub. It requires a Docker Hub account.
+
+| GitHub Secret | Description |
+| --- | --- |
+| DOCKERHUB_USERNAME | Docker Hub username |
+| DOCKERHUB_TOKEN | Deploy token for the Docker Hub account |
+
+| GitHub Variable | Description |
+| --- | --- |
+| DOCKERHUB_USERNAME | Docker Hub username |
+
 @acaptutorials<br>
 20240806

docker-compose.dev.yml

@@ -1,8 +1,8 @@
 services:
   # NextJS v13 app running on development mode
   acaptutorials.github.io-dev:
-    container_name: acaptutorials.github.io-dev
-    image: acaptutorials.github.io:dev
+    container_name: acaptutorials-docs-dev
+    image: acaptutorials/acaptutorials.github.io:dev
     env_file:
       - ./docs/.env
     build:

docker-compose.prod.yml

@@ -1,8 +1,8 @@
 services:
   # NextJS exported app running on an nginx webserver
   acaptutorials.github.io-prod:
-    container_name: acaptutorials.github.io-prod
-    image: acaptutorials.github.io:prod
+    container_name: acaptutorials-docs-prod
+    image: acaptutorials/acaptutorials.github.io:prod
     restart: always
     env_file:
       - ./docs/.env