Merge pull request #149 from weaponsforge/dev

weaponsforge · web-flow · commit bfcca49f485d · 2024-09-28T07:14:21.000+08:00
v4.1.0
diff --git 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
@@ -1,14 +1,18 @@
-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
 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
@@ -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.<br><br>Set its value to blank `''` when working on development mode in localhost.<br><br>Set its value to the sub-directory name where the exported NextJS app is to be deployed, i.e. `/<YOUR_REPOSITORY_NAME>` when<br> deploying on a repository (sub-directory) of a root GitHub Pages site, i.e, on `https://<YOUR_GITHUB_USERNAME>.github.io/<YOUR_REPOSITORY_NAME>` |
+| 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<br>
 20230326
diff --git 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
@@ -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.<br>
+> Do the following to avoid commiting local updates in the `.firebaserc` file:
+> - Ignore local changes to the file.<br>
+> `git update-index --assume-unchanged .firebaserc`
+> - Revert/start tracking later if needed.<br>
+> `git update-index --no-assume-unchanged .firebaserc`
+
 3. Switch to the **dev** Firebase target.<br>
 `firebase use dev`
 
diff --git a/scripts/build.sh 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

Original file line number	Diff line number	Diff line change
`@@ -1,25 +1,25 @@`
`1`	`1`	`{`
`2`	`2`	`"projects": {`
`3`		`- "dev": "climate-profile-app",`
`4`		`- "prod": "gsites-embed"`
	`3`	`+ "dev": "FIREBASE_PROJECT_DEV",`
	`4`	`+ "prod": "FIREBASE_PROJECT_PROD"`
`5`	`5`	`},`
`6`	`6`	`"targets": {`
`7`		`- "climate-profile-app": {`
	`7`	`+ "FIREBASE_PROJECT_DEV": {`
`8`	`8`	`"hosting": {`
`9`	`9`	`"dev": [`
`10`		`- "climate-profile-dev"`
	`10`	`+ "FIREBASE_HOSTING_DEV"`
`11`	`11`	`]`
`12`	`12`	`},`
`13`	`13`	`"storage": {`
`14`	`14`	`"dev": [`
`15`		`- "climate-profile-app.appspot.com"`
	`15`	`+ "FIREBASE_PROJECT_DEV.appspot.com"`
`16`	`16`	`]`
`17`	`17`	`}`
`18`	`18`	`},`
`19`		`- "gsites-embed": {`
	`19`	`+ "FIREBASE_PROJECT_PROD": {`
`20`	`20`	`"storage": {`
`21`	`21`	`"dev": [`
`22`		`- "gsites-embed.appspot.com"`
	`22`	`+ "FIREBASE_PROJECT_PROD.appspot.com"`
`23`	`23`	`]`
`24`	`24`	`}`
`25`	`25`	`}`