Integrate firebase for deployment (#727)

* Integrate firebase Basically imported from https://github.com/kachick/convert-color-json-between-windows-terminal-and-vscode/blob/3f97620134b8048d227eae08f0dc81ecc357d59e/.github/workflows/firebase-hosting-pull-request.yml * Update documents * `dprint fmt` * Fix revison footer in PRs * Trancate revision commit ref
mobu-of-the-world · Nov 24, 2022 · 429d537 · 429d537
1 parent ef05bd0
commit 429d537
Show file tree

Hide file tree

Showing 7 changed files with 201 additions and 12 deletions.
diff --git a/.firebaserc b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "mobu-waiwai"
+  }
+}
diff --git a/.github/workflows/firebase-hosting-merge.yml b/.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
+    paths-ignore:
+      - '.github/dependabot.yml'
+      - '.github/workflows/dependency-review.yml'
+      - '.github/workflows/main.yml'
+      - '.editorconfig'
+      - '**.md'
+      - '.vscode/**'
+      - 'dprint.json'
+      - 'renovate.json'
+      - '.eslintrc.json'
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          cache: npm
+          node-version-file: '.node-version'
+      - name: install dependencies
+        run: npm ci --ignore-scripts
+      - run: npm run build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MOBU_WAIWAI }}'
+          channelId: live
+          projectId: mobu-waiwai
diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.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 PR
+'on':
+  pull_request:
+    paths-ignore:
+      - '.github/dependabot.yml'
+      - '.github/workflows/dependency-review.yml'
+      - '.github/workflows/main.yml'
+      - '.editorconfig'
+      - '**.md'
+      - '.vscode/**'
+      - 'dprint.json'
+      - 'renovate.json'
+      - '.eslintrc.json'
+jobs:
+  build_and_preview:
+    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          cache: npm
+          node-version-file: '.node-version'
+      - name: install dependencies
+        run: npm ci --ignore-scripts
+      - name: Specify actual commit ref for revisions
+        run: echo VITE_COMMIT_REF=${{ github.event.pull_request.head.sha }} > .env
+      - run: npm run build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MOBU_WAIWAI }}'
+          projectId: mobu-waiwai
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@
 
 A web application to manage participants and timer for mob-programming!
 
-Visit here to enjoy: [https://mobu-waiwai.netlify.com](https://mobu-waiwai.netlify.com)
+Visit here to enjoy: [https://mobu-waiwai.web.app/](https://mobu-waiwai.web.app/)
 
 ## How to start development
 

diff --git a/firebase.json b/firebase.json
@@ -0,0 +1,10 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  }
+}
diff --git a/public/404.html b/public/404.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Page Not Found</title>
+
+    <style media="screen">
+      body {
+        background: #eceff1;
+        color: rgba(0, 0, 0, 0.87);
+        font-family: Roboto, Helvetica, Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+      }
+      #message {
+        background: white;
+        max-width: 360px;
+        margin: 100px auto 16px;
+        padding: 32px 24px 16px;
+        border-radius: 3px;
+      }
+      #message h3 {
+        color: #888;
+        font-weight: normal;
+        font-size: 16px;
+        margin: 16px 0 12px;
+      }
+      #message h2 {
+        color: #ffa100;
+        font-weight: bold;
+        font-size: 16px;
+        margin: 0 0 8px;
+      }
+      #message h1 {
+        font-size: 22px;
+        font-weight: 300;
+        color: rgba(0, 0, 0, 0.6);
+        margin: 0 0 16px;
+      }
+      #message p {
+        line-height: 140%;
+        margin: 16px 0 24px;
+        font-size: 14px;
+      }
+      #message a {
+        display: block;
+        text-align: center;
+        background: #039be5;
+        text-transform: uppercase;
+        text-decoration: none;
+        color: white;
+        padding: 16px;
+        border-radius: 4px;
+      }
+      #message,
+      #message a {
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+      }
+      #load {
+        color: rgba(0, 0, 0, 0.4);
+        text-align: center;
+        font-size: 13px;
+      }
+      @media (max-width: 600px) {
+        body,
+        #message {
+          margin-top: 0;
+          background: white;
+          box-shadow: none;
+        }
+        body {
+          border-top: 16px solid #ffa100;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="message">
+      <h2>404</h2>
+      <h1>Page Not Found</h1>
+      <p>
+        The specified file was not found on this website. Please check the URL
+        for mistakes and try again.
+      </p>
+      <h3>Why am I seeing this?</h3>
+      <p>
+        This page was generated by the Firebase Command-Line Interface. To
+        modify it, edit the <code>404.html</code> file in your project's
+        configured <code>public</code> directory.
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,15 +1,21 @@
 import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import { execSync } from "child_process";
 
-const commitRef = execSync("git rev-parse --short HEAD").toString().trim();
-
-export default defineConfig({
-  build: {
-    outDir: "./build",
-  },
-  plugins: [react()],
-  define: {
-    APP_COMMIT_REF: JSON.stringify(commitRef),
-  },
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd());
+  const commitRef = env["VITE_COMMIT_REF"] ?? execSync("git rev-parse --short HEAD").toString().trim();
+  const commitShortRef = commitRef.slice(
+    0,
+    7,
+  );
+  return {
+    build: {
+      outDir: "./build",
+    },
+    plugins: [react()],
+    define: {
+      APP_COMMIT_REF: JSON.stringify(commitShortRef),
+    },
+  };
 });