diff --git a/.github/workflows/deploy-dev.yml b/.github/workflows/deploy-dev.yml index 28f8b10..05c1ebb 100644 --- a/.github/workflows/deploy-dev.yml +++ b/.github/workflows/deploy-dev.yml @@ -7,6 +7,9 @@ on: branches: - dev +env: + FIREBASE_TARGET: 'dev' + jobs: lint-export-client: name: Lint and Export client @@ -17,11 +20,14 @@ jobs: NEXT_PUBLIC_FIREBASE_WEB_AUTHDOMAIN: ${{ secrets.FIREBASE_WEB_AUTHDOMAIN_DEV }} NEXT_PUBLIC_FIREBASE_WEB_PROJECT_ID: ${{ secrets.FIREBASE_WEB_PROJECT_ID_DEV }} NEXT_PUBLIC_FIREBASE_WEB_STORAGE_BUCKET: ${{ secrets.FIREBASE_WEB_STORAGE_BUCKET_DEV }} + FIREBASE_HOSTING_DEV: ${{ secrets.FIREBASE_HOSTING_DEV }} steps: - name: Checkout the repository uses: actions/checkout@v3 with: - ref: 'dev' + ref: ${{ env.FIREBASE_TARGET }} + - name: Build Firebase Settings + run: chmod u+x scripts/build.sh && ./scripts/build.sh - name: Use NodeJS v16.14.2 uses: actions/setup-node@v3 with: @@ -47,9 +53,13 @@ jobs: client/out client/firebase.json client/.firebaserc + client/firestore.rules + client/firestore.indexes.json + client/storage.rules retention-days: 3 - deploy-client: + # Deploy Firebase: Hosting, Firestore/Storage Rules and Indexes + deploy-firebase: name: Deploy Client to Firebase Hosting needs: lint-export-client runs-on: ubuntu-latest @@ -61,6 +71,8 @@ jobs: - name: Deploy to Firebase uses: w9jds/firebase-action@master with: - args: use dev && firebase deploy --only hosting:dev + args: > + use $FIREBASE_TARGET && + firebase deploy --only firestore:rules,firestore:indexes,storage,hosting:$FIREBASE_TARGET env: FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }} diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 3ec749e..ba30354 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -1,4 +1,4 @@ -name: Deploy to GitHub Pages +name: Prduction - Deploy to GitHub Pages # This workflow will trigger on any tag/release created on *any* branch # Make sure to create tags/releases only from the "master" branch for consistency @@ -6,9 +6,13 @@ on: release: types: [published] +env: + FIREBASE_TARGET: 'prod' + 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 }} @@ -21,6 +25,8 @@ jobs: uses: actions/checkout@v3 with: ref: ${{ github.event.release.tag_name }} + - name: Build Firebase Settings + run: chmod u+x scripts/build.sh && ./scripts/build.sh - name: Use NodeJS v16.14.2 uses: actions/setup-node@v3 with: @@ -45,11 +51,38 @@ jobs: with: name: main-out include-hidden-files: true - path: client/out + path: | + client/out + client/firebase.json + client/.firebaserc + client/firestore.rules + client/firestore.indexes.json + client/storage.rules retention-days: 3 + # Deploy Firebase: Firestore/Storage Rules and Indexes + deploy-firebase: + name: Deploy Firebase Settings + if: github.event.release.target_commitish == 'master' + needs: lint-export-client + runs-on: ubuntu-latest + steps: + - name: Download Artifact + uses: actions/download-artifact@v4 + with: + name: main-out + - name: Deploy to Firebase + uses: w9jds/firebase-action@master + with: + args: > + use $FIREBASE_TARGET && + firebase deploy --only firestore:rules,firestore:indexes,storage + env: + FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }} + deploy-client: - name: Deploy client to Github Pages + name: Deploy Client to Github Pages + if: github.event.release.target_commitish == 'master' needs: lint-export-client runs-on: ubuntu-latest steps: @@ -63,5 +96,5 @@ jobs: uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} - publish_dir: ./ + publish_dir: ./out publish_branch: gh-pages diff --git a/README.md b/README.md index e8f6309..116efb1 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ It also features a lightweight Content Management System (CMS) for creating and https://weaponsforge.github.io/gsites-components/ #### Development (Playground) App -https://gsites-components.web.app/ +https://climate-profile-dev.web.app/ ``` EXAMPLE USER (Development App Only) @@ -115,5 +115,66 @@ docker compose -f docker-compose.prod.yml up docker compose -f docker-compose.prod.yml down ``` +## Deploy With GitHub Actions + +### Requirements + +1. Two (2) Firebase Projects (to use for development/production environments), pre-activated with: + - Firestore Database + - Firebase Storage + - Firebase Hosting + - Authentication (Email/Address) + +> [!TIP] +> Refer to the server README for additional setup information + +2. Firebase configuration settings for each of the two (2) Firebase projects. + +3. Service account JSON file for each of the two (2) Firebase projects. + +## Steps + +Follow the steps to self-host the project in your own repository and Firebase projects. + +### 1. GitHub Secrets + +Create the following GitHub Secrets, using values from the Firebase (web) configuration and settings from the requirements. + +| GitHub Secret | Description | +| --- | --- | +| NEXT_PUBLIC_BASE_PATH | Root directory path name that NextJS uses for assets, media and client-side routing for the app.

Set its value to blank `''` when working on development mode in localhost.

Set its value to the sub-directory name where the exported NextJS app is to be deployed, i.e. `/` when
deploying on a repository (sub-directory) of a root GitHub Pages site, i.e, on `https://.github.io/` | +| FIREBASE_WEB_API_KEY_DEV | Firebase web API key from the Firebase Project Settings configuration file for the (development) environment. | +| FIREBASE_WEB_AUTHDOMAIN_DEV | Firebase web auth domain key from the Firebase Project Settings configuration for the (development) environment. | +| FIREBASE_WEB_PROJECT_ID_DEV | Firebase web project ID from the Firebase Project Settings configuration file for the (development) environment. | +| FIREBASE_WEB_STORAGE_BUCKET_DEV | Firebase web storage bucket key from the Firebase Project Settings configuration file for the (development) environment. | +| FIREBASE_WEB_API_KEY_PROD | Firebase web API key from the Firebase Project Settings configuration file for the (production) environment. | +| FIREBASE_WEB_AUTHDOMAIN_PROD | Firebase web auth domain key from the Firebase Project Settings configuration for the (production) environment. | +| FIREBASE_WEB_PROJECT_ID_PROD | Firebase web project ID from the Firebase Project Settings configuration file for the (production) environment. | +| FIREBASE_WEB_STORAGE_BUCKET_PROD | Firebase web storage bucket key from the Firebase Project Settings configuration file for the (production) environment. | +| FIREBASE_TOKEN | Firebase CLI deploy token, retrieved with `"firebase login:ci"` | +| FIREBASE_HOSTING_DEV | Firebase Hosting name under the `FIREBASE_WEB_PROJECT_ID_DEV` | + +### 2. Firebase Hosting + +Initialize a Firebase Hosting website in the _**development**_ Firebase project. + +### 3. GitHub Pages + +Initialize an empty branch in the repository to use for deployment to GitHub Pages. + +```bash +# While inside the project code repository root +git checkout --orphan gh-pages +git reset +git commit --allow-empty -m "Initial commit" +git push --set-upstream origin gh-pages +``` + +### 4. Ship and Deploy + +- Deploy to the **development** environment (Firebase Hosting) by pushing or merging updates to the `dev` branch. +- Deploy to the **production** environment (GitHub Pages) by creating a Release/Tag from the `master` branch. + + @weaponsforge
20230326 diff --git a/client/.firebaserc b/client/.firebaserc index 948ed65..7b56b29 100644 --- a/client/.firebaserc +++ b/client/.firebaserc @@ -1,25 +1,25 @@ { "projects": { - "dev": "climate-profile-app", - "prod": "gsites-embed" + "dev": "FIREBASE_PROJECT_DEV", + "prod": "FIREBASE_PROJECT_PROD" }, "targets": { - "climate-profile-app": { + "FIREBASE_PROJECT_DEV": { "hosting": { "dev": [ - "climate-profile-dev" + "FIREBASE_HOSTING_DEV" ] }, "storage": { "dev": [ - "climate-profile-app.appspot.com" + "FIREBASE_PROJECT_DEV.appspot.com" ] } }, - "gsites-embed": { + "FIREBASE_PROJECT_PROD": { "storage": { "dev": [ - "gsites-embed.appspot.com" + "FIREBASE_PROJECT_PROD.appspot.com" ] } } diff --git a/client/README.md b/client/README.md index e51db1b..fb7dd2d 100644 --- a/client/README.md +++ b/client/README.md @@ -1,4 +1,4 @@ -## gsites-components +## /gsites-components/client Testing display of all related content based on a URL query string. @@ -18,7 +18,7 @@ Testing display of all related content based on a URL query string. https://weaponsforge.github.io/gsites-components/ #### Development App -https://gsites-components.web.app/ +https://climate-profile-dev.web.app/ ``` EXAMPLE USER (Development App Only) @@ -42,6 +42,19 @@ password: useruser | NEXT_PUBLIC_FIREBASE_WEB_STORAGE_BUCKET | Firebase web storage bucket key from the Firebase Project Settings configuration file. | | WATCHPACK_POLLING | Enables hot reload on NextJS apps (tested on NextJS v13.2.1) running inside Docker containers on a Windows host. Set it to `true` if running Docker Desktop with WSL2 on a Windows OS. | +3. Update the `.firebaserc` file. + - Replace all instances of the `FIREBASE_PROJECT_DEV` text with the **development** Firebase project ID. + - Replace all instances of the `FIREBASE_PROJECT_PROD` text with eth **production** Firebase project ID. + - Replace the `FIREBASE_HOSTING_DEV` text with the **development** Firebase Hosting website name (minus the `".web.app"`) + +> [!WARNING] +> Do not commit the updates in the `.firebaserc` file, if you plan on deploying updates using GitHub Actions.
+> Do the following to avoid commiting local updates in the `.firebaserc` file: +> - Ignore local changes to the file.
+> `git update-index --assume-unchanged .firebaserc` +> - Revert/start tracking later if needed.
+> `git update-index --no-assume-unchanged .firebaserc` + 3. Switch to the **dev** Firebase target.
`firebase use dev` diff --git a/scripts/build.sh b/scripts/build.sh new file mode 100644 index 0000000..6550c09 --- /dev/null +++ b/scripts/build.sh @@ -0,0 +1,15 @@ +#!/bin/bash + +echo "Setting the .firebaserc values..." + +if [ "$FIREBASE_TARGET" == "dev" ]; then + # Replace placeholders with development Firebase settings + sed -i -e "s/FIREBASE_PROJECT_DEV/${NEXT_PUBLIC_FIREBASE_WEB_PROJECT_ID}/g" client/.firebaserc + sed -i -e "s/FIREBASE_HOSTING_DEV/${FIREBASE_HOSTING_DEV}/g" client/.firebaserc +elif [ "$FIREBASE_TARGET" == "prod" ]; then + # Replace placeholders with production Firebase settings + sed -i -e "s/FIREBASE_PROJECT_PROD/${NEXT_PUBLIC_FIREBASE_WEB_PROJECT_ID}/g" client/.firebaserc +else + echo "Error: FIREBASE_TARGET must be 'dev' or 'prod', value: $FIREBASE_TARGET" + exit 1 +fi