firebase: Deploy first version

juliaogris · juliaogris · commit 03315e6aeaf3 · 2022-08-16T12:18:40.000+10:00
Use firebase boilerplate .html pages, initially written to out/public
and move them to source directory `frontend`. Later we will use
`frontend` for frontend source code, probably written in SvelteJS.

Add make targets for frontend builds and firebase tests and deployment.

firebase puts various log files alongside the firebase.json which really
bloats the root directory, so move everything firebase related to
`firebase`. In order to start the emulator with `make firebase-test`
java is required so install openjre with hermit:

	hermit install openjre

Signed-off-by: Julia Ogris &lt;julia.ogris@gmail.com&gt;
diff --git a/.github/workflows/firebase-hosting-merge.yml b/.github/workflows/firebase-hosting-merge.yml
@@ -14,3 +14,4 @@ jobs:
           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_EVY_LANG }}'
           channelId: live
           projectId: evy-lang
+          entryPoint: firebase
diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml
@@ -1,8 +1,5 @@
-# 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
+on: pull_request
 jobs:
   build_and_preview:
     if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
@@ -15,3 +12,4 @@ jobs:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'
           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_EVY_LANG }}'
           projectId: evy-lang
+          entryPoint: firebase
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
+/firebase/*.log
+/firebase/.firebase/
 /out/
diff --git a/Makefile b/Makefile
@@ -64,6 +64,19 @@ lint: ## Lint go source code
 
 .PHONY: lint
 
+# --- frontend -----------------------------------------------------------------
+frontend: | $(O) ## Build frontend, typically iterate with npm and inside frontend
+	rm -rf $(O)/public
+	cp -r frontend $(O)/public
+
+firebase-deploy: frontend ## Deploy to live channel on firebase, use with care
+	firebase --config firebase/firebase.json deploy
+
+firebase-test: frontend ## Run firebase emulator for auth, hosting and datastore
+	firebase --config firebase/firebase.json emulators:start
+
+.PHONY: firebase-deploy firebase-test frontend
+
 # --- Release -------------------------------------------------------------------
 release: nexttag ## Tag and release binaries for different OS on GitHub release
 	git tag $(NEXTTAG)
diff --git a/bin/.openjre-11.0.10_9.pkg b/bin/.openjre-11.0.10_9.pkg
@@ -0,0 +1 @@
+hermit
diff --git a/bin/jaotc b/bin/jaotc
@@ -0,0 +1 @@
+.openjre-11.0.10_9.pkg
diff --git a/bin/java b/bin/java
@@ -0,0 +1 @@
+.openjre-11.0.10_9.pkg
diff --git a/bin/jfr b/bin/jfr
@@ -0,0 +1 @@
+.openjre-11.0.10_9.pkg
diff --git a/bin/jjs b/bin/jjs
@@ -0,0 +1 @@
+.openjre-11.0.10_9.pkg
diff --git a/bin/jrunscript b/bin/jrunscript
@@ -0,0 +1 @@
+.openjre-11.0.10_9.pkg
diff --git a/bin/keytool b/bin/keytool
@@ -0,0 +1 @@
+.openjre-11.0.10_9.pkg
diff --git a/bin/pack200 b/bin/pack200
@@ -0,0 +1 @@
+.openjre-11.0.10_9.pkg
diff --git a/bin/rmid b/bin/rmid
@@ -0,0 +1 @@
+.openjre-11.0.10_9.pkg
diff --git a/bin/rmiregistry b/bin/rmiregistry
@@ -0,0 +1 @@
+.openjre-11.0.10_9.pkg
diff --git a/bin/unpack200 b/bin/unpack200
@@ -0,0 +1 @@
+.openjre-11.0.10_9.pkg
diff --git a/firebase/.firebaserc b/firebase/.firebaserc
diff --git a/firebase/firebase.json b/firebase/firebase.json
@@ -1,10 +1,10 @@
 {
   "firestore": {
-    "rules": "firebase/firestore.rules",
-    "indexes": "firebase/firestore.indexes.json"
+    "rules": "firestore.rules",
+    "indexes": "firestore.indexes.json"
   },
   "hosting": {
-    "public": "out/public",
+    "public": "public",
     "ignore": [
       "firebase.json",
       "**/.*",
diff --git a/firebase/public b/firebase/public
@@ -0,0 +1 @@
+../out/public
diff --git a/frontend/404.html b/frontend/404.html
@@ -0,0 +1,33 @@
+<!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/frontend/index.html b/frontend/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Welcome to Firebase Hosting</title>
+
+    <!-- update the version number as needed -->
+    <script defer src="/__/firebase/9.9.2/firebase-app-compat.js"></script>
+    <!-- include only the Firebase features as you need -->
+    <script defer src="/__/firebase/9.9.2/firebase-auth-compat.js"></script>
+    <script defer src="/__/firebase/9.9.2/firebase-database-compat.js"></script>
+    <script defer src="/__/firebase/9.9.2/firebase-firestore-compat.js"></script>
+    <script defer src="/__/firebase/9.9.2/firebase-functions-compat.js"></script>
+    <script defer src="/__/firebase/9.9.2/firebase-messaging-compat.js"></script>
+    <script defer src="/__/firebase/9.9.2/firebase-storage-compat.js"></script>
+    <script defer src="/__/firebase/9.9.2/firebase-analytics-compat.js"></script>
+    <script defer src="/__/firebase/9.9.2/firebase-remote-config-compat.js"></script>
+    <script defer src="/__/firebase/9.9.2/firebase-performance-compat.js"></script>
+    <!-- 
+      initialize the SDK after all desired features are loaded, set useEmulator to false
+      to avoid connecting the SDK to running emulators.
+    -->
+    <script defer src="/__/firebase/init.js?useEmulator=true"></script>
+
+    <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; border-radius: 3px; }
+      #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>Welcome</h2>
+      <h1>Firebase Hosting Setup Complete</h1>
+      <p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
+      <a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
+    </div>
+    <p id="load">Firebase SDK Loading&hellip;</p>
+
+    <script>
+      document.addEventListener('DOMContentLoaded', function() {
+        const loadEl = document.querySelector('#load');
+        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
+        // // The Firebase SDK is initialized and available here!
+        //
+        // firebase.auth().onAuthStateChanged(user => { });
+        // firebase.database().ref('/path/to/ref').on('value', snapshot => { });
+        // firebase.firestore().doc('/foo/bar').get().then(() => { });
+        // firebase.functions().httpsCallable('yourFunction')().then(() => { });
+        // firebase.messaging().requestPermission().then(() => { });
+        // firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
+        // firebase.analytics(); // call to activate
+        // firebase.analytics().logEvent('tutorial_completed');
+        // firebase.performance(); // call to activate
+        //
+        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
+
+        try {
+          let app = firebase.app();
+          let features = [
+            'auth', 
+            'database', 
+            'firestore',
+            'functions',
+            'messaging', 
+            'storage', 
+            'analytics', 
+            'remoteConfig',
+            'performance',
+          ].filter(feature => typeof app[feature] === 'function');
+          loadEl.textContent = `Firebase SDK loaded with ${features.join(', ')}`;
+        } catch (e) {
+          console.error(e);
+          loadEl.textContent = 'Error loading the Firebase SDK, check the console.';
+        }
+      });
+    </script>
+  </body>
+</html>

Original file line number	Diff line number	Diff line change
`@@ -1 +1,3 @@`
	`1`	`+/firebase/*.log`
	`2`	`+/firebase/.firebase/`
`1`	`3`	`/out/`