build: add github action deployment pipelines. (#1)

* chore: update npm dependencies.

* build: add github action deployment pipelines.

* chore: update npm dependencies.

.firebaserc

@@ -11,4 +11,4 @@
   "projects": {
     "default": "mirus-remote"
   }
-}
+}

.github/workflows/firebase-hosting-merge.yml

@@ -0,0 +1,37 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on merge
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Inject Firebase Environment Variables
+        run: |
+          node inject-firebase-creds.js
+        env:
+          FIREBASE_DETAILS: ${{ secrets.FIREBASE_DETAILS }}
+
+      - name: Install Dependencies
+        run: |
+          npm ci
+
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: ${{ secrets.GITHUB_TOKEN }}
+          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_MIRUS_REMOTE }}
+          channelId: live
+          projectId: mirus-remote
+        env:
+          FIREBASE_CLI_EXPERIMENTS: webframeworks

.github/workflows/firebase-hosting-pull-request.yml

@@ -0,0 +1,38 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+on: pull_request
+permissions:
+  checks: write
+  contents: read
+  pull-requests: write
+jobs:
+  build_and_preview:
+    if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Inject Firebase Environment Variables
+        run: |
+          node inject-firebase-creds.js
+        env:
+          FIREBASE_DETAILS: ${{ secrets.FIREBASE_DETAILS }}
+
+      - name: Install Dependencies
+        run: |
+          npm ci
+
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: ${{ secrets.GITHUB_TOKEN }}
+          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_MIRUS_REMOTE }}
+          projectId: mirus-remote
+        env:
+          FIREBASE_CLI_EXPERIMENTS: webframeworks

firebase.json

@@ -1,9 +1,9 @@
 {
-    "hosting": [
-        {
-            "target": "mirus-remote",
-            "source": ".",
-            "frameworksBackend": {}
-        }
-    ]
-}
+  "hosting": [
+    {
+      "target": "mirus-remote",
+      "source": ".",
+      "frameworksBackend": {}
+    }
+  ]
+}

inject-firebase-creds.js

@@ -0,0 +1,45 @@
+/**
+ * Because Angular utilises an environment.ts file, we must somehow retrieve this during our CI pipeline.
+ * Suggested way is to retrieve this at runtime via a network request or inject it at build-time via modified WebPack configurations.
+ *
+ * However, this would mean we would have to make each item in the Firebase secret its own variable and reconstruct the firebase context object again at build-time.
+ * The alternative solution is to make the entire file a single environment variable and inject it during builds.
+ * This better preserves the atomicity of the Firebase secret and was a cleaner solution for this specific project.
+ *
+ * Code adapted from https://nidri.medium.com/angular-environment-ts-with-github-actions-4d86b7963a6c
+ */
+
+const fs = require("fs");
+const path = require("path");
+
+const dir = "src/environments";
+const ENV_FILE_NAME = "environment.ts";
+
+const content = `${process.env.FIREBASE_DETAILS}`;
+
+fs.access(dir, fs.constants.F_OK, (err) => {
+  if (err) {
+    // Directory doesn't exist
+    console.log("src doesn't exist, creating now", process.cwd());
+    // Create /src
+    try {
+      fs.mkdirSync(dir, { recursive: true });
+    } catch (error) {
+      console.log(`Error while creating ${dir}. Error is ${error}`);
+      process.exit(1);
+    }
+  }
+  // Now write to file
+  try {
+    fs.writeFileSync(dir + "/" + ENV_FILE_NAME, content);
+    console.log("Created successfully in", process.cwd());
+    if (fs.existsSync(dir + "/" + ENV_FILE_NAME)) {
+      console.log("File is created", path.resolve(dir + "/" + ENV_FILE_NAME));
+      const str = fs.readFileSync(dir + "/" + ENV_FILE_NAME).toString();
+      console.log(str);
+    }
+  } catch (error) {
+    console.error(error);
+    process.exit(1);
+  }
+});