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',