diff --git a/.github/workflows/deploy-prod.yml b/.github/workflows/deploy-prod.yml
index 4614caa7..59f282ec 100644
--- a/.github/workflows/deploy-prod.yml
+++ b/.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 == 'main'
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 == 'main'
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 == 'main' && 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
diff --git a/README.md b/README.md
index 9d17d8da..c9406634 100644
--- a/README.md
+++ b/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.
@@ -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.
+ - `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.
+`docker compose -f docker-compose.dev.yml up`
+
+4. (Optional) Run the development Docker image (from other directories).
+`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.
+`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.
+`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
20240806
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
index 7568bac4..834af6ed 100644
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@@ -1,9 +1,8 @@
-version: "3"
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:
diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml
index e43183c1..53c1831e 100644
--- a/docker-compose.prod.yml
+++ b/docker-compose.prod.yml
@@ -1,9 +1,8 @@
-version: "3"
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
diff --git a/docs/next.config.js b/docs/next.config.js
index 8309f04a..9e752c24 100644
--- a/docs/next.config.js
+++ b/docs/next.config.js
@@ -4,6 +4,16 @@ const withNextra = require('nextra')({
})
module.exports = withNextra({
+ // Hydration fix: WATCHPACK_POLLING + config if running in Docker and Windows WSL2
+ ...(process.env.WATCHPACK_POLLING && {
+ webpackDevMiddleware: config => {
+ config.watchOptions = {
+ poll: 1000,
+ aggregateTimeout: 300,
+ }
+ return config
+ }
+ }),
reactStrictMode: true,
trailingSlash: true,
output: 'export',