Make Firebase project configurable, and straighten out extension mess…

…age-passing (#122)

* spell out how to set up and use multiple Firebase environments

* remove screenshots dirs

* ignore screenshots except for README

* ignore local firebase cache

* rename web config and put it in ./config subdir

* firebase should be dev dependency, not peer

* rename config to something more specific

* must use import type if importsNotUsedAsValues is set to error in tsconfig

* load firebase config at runtime

* copy firebase web config based on current in-use firebase project name

* move firebase to gitignore

* configure CircleCI to override firebase per-project setting

* upgrade to latest firebase-functions package

* configure functions host in firebase web config file

* info log on every account creation

* get project name from environment for load:data target, and make sure the dev target configures for firebase

* put rally site const with others

* add proper build support for test extension, make sure to copy content script in

* add package command to generate test extensions

* wait for rally-sdk to send request before generating and sending back token

* only send web-check after logging in, and handle missing attached update to study enrollment

* build test extension instead of having to chck in assets

* capture failure from firebase use

* use demo-rally for emulator, so firebase does not attempt to connect to live resources

* use demo- prefix for dev and integration test mode, per https://firebase.google.com/docs/emulator-suite/connect_firestore#choose_a_firebase_project

* bump pinned sdk version

* explain how to build without being logged in

* prefix message types with rally-sdk, and warn not throw for unrecognized message types

* keep the chrome extension version test working even though it's temporarily disabled

* typo

* upgrade test extension to latest rally-sdk

* bump rally SDK version

* point to latest official Rally SDK

.circleci/config.yml

@@ -92,14 +92,17 @@ jobs:
           name: Check out the deploy branch.
           command: git checkout deploy && git pull --rebase origin deploy
       - run:
-          name: Create Service Account key JSON
+          name: Create Service Account key JSON.
           command: echo $GSA_KEY > "$HOME"/gcloud.json
       - run:
-          name: Install Firebase Tools needed for deploy
+          name: Install Firebase Tools needed for deploy.
           command: npm install firebase-tools firebase-functions
       - run:
-          name: Firebase Deploy
-          command: GOOGLE_APPLICATION_CREDENTIALS="$HOME"/gcloud.json ./node_modules/.bin/firebase deploy
+          name: Configure Firebase for the deployment project name.
+          command: ./node_modules/.bin/firebase use --add rally-web-spike && cp config/firebase.config.rally-web-spike.json config/firebase.config.json
+      - run:
+          name: Firebase Deploy.
+          command: GOOGLE_APPLICATION_CREDENTIALS="$HOME"/gcloud.json ./node_modules/.bin/firebase deploy --project rally-web-spike
 workflows:
   # Below is the definition of your workflow.
   # Inside the workflow, you provide the jobs you want to run, e.g this workflow runs the build-and-test job above.

.gitignore

@@ -121,4 +121,12 @@ web-ext-artifacts/
 generated/
 
 #miscell
-.vscode/
+.vscode/
+
+!screenshots/README.md
+screenshots/
+
+.firebase/
+.firebaserc
+
+static/firebase.config.json

README.md

@@ -1,3 +1,4 @@
+l
 # Rally Web Platform
 
 This repository contains the code needed to build the Rally Web Platform.
@@ -22,11 +23,12 @@ WebExtensions are built from the [Rally Study Template](https://github.com/mozil
   * Functions
   * Firestore
   * Hosting
-- & [Java SDK](https://www.oracle.com/java/technologies/javase-jdk16-downloads.html) – needed for integration tests
+* [Java SDK](https://www.oracle.com/java/technologies/javase-jdk16-downloads.html) for Firebase emulators
+
 
 ## Versioning
 
-You can always access the current version by going to `<hostname>/version.json`.
+You can always access the current version of the site by fetching `<hostname>/version.json`.
 
 ## Quickstart
 
@@ -88,7 +90,7 @@ For the Rally Web Platform, this is done in: `./src/lib/stores/initialize-fireba
 
 Integration tests can be run with:
 
-- integration tests: run `npm run test:integration`
+`npm run test:integration`
 
 This uses Selenium and the Firebase Emulators to run the full Rally Web Platform stack and test that
 the various supported UX flows work as expected.
@@ -99,6 +101,82 @@ This repository comes (aspirationally) with unit tests:
 These are currently severely underdeveloped right now, we are currently prioritizing
 integration testing.
 
+## Deploying
+
+CircleCI is used to generate build artifacts, which are pushed to the `deploy` branch on this repository.
+A deploy job is then triggered from this branch to the dev environment on merge to the `master` branch:
+https://rally-web-spike.web.app/
+
+NOTE: if you want to deploy to your own environment, you must either:
+
+1. `firebase login` and use your own GCP account.
+2. point `GOOGLE_APPLICATION_CREDENTIALS` shell variable to a GCP service account JSON file. The service account must have the role "Cloud Build Service Account".
+
+The first option is the simplest for occasional manual deployments, the second is necessary if you're doing automated deployment from CI.
+
+NOTE: if the Firebase environment you are deploying to is not set up yet, see the next section.
+
+Review the `./firebase.json` which contains the server configuration, and `./firebaserc` which contains your project names and aliases.
+When ready, deploy to your project:
+
+`firebase deploy --project {YOUR_FIREBASE_PROJECT_NAME}`
+
+## One-time Firebase server setup
+
+The `./firebase.json` holds the desired services and basic configuration, but there are a number of one-time configuration changes that must be made using the [Firebase console](https://console.firebase.google.com/):
+
+1. Create new Web app in UI under Project Settings -> Your apps
+​
+Place the returned configuration into `./firebase.config.{YOUR_FIREBASE_PROJECT_NAME}.json`, then set up your project and an alias (dev/stage/prod/etc):
+`firebase use --add`
+
+And complete the prompts:
+
+```
+? Which project do you want to add?
+? What alias do you want to use for this project? (e.g. staging)
+```
+​
+Then, enable the following in the Firebase console:
+
+- Authentication, along with the email and Google providers.
+- Cloud Firestore
+- Hosting
+
+1. Grant the ability to generate custom tokens to your Firebase functions:
+   1. Add the IAM Service Account Credentials API at https://console.developers.google.com/apis/api/iamcredentials.googleapis.com/overview?project=211360280873
+   2. Give the "Service Account Token Creator" role to your appspot service account in https://console.cloud.google.com/iam-admin/iam?authuser=0&project={YOUR_FIREBASE_PROJECT_NAME}.
+
+2. Deploy
+
+Build the site in production mode:
+`firebase use {YOUR_FIREBASE_PROJECT_NAME}`
+`npm run build`
+`npm run config:web`
+
+NOTE - if you are not logged into Firebase then it will not be able to automatically detect project name and details.
+If you want to build in a restricted environment, then make sure to copy the correct configuration file after building:
+
+`npm run build`
+`cp config/firebase.config.{YOUR_FIREBASE_PROJECT_NAME}.json ./static/firebase.config.json`
+
+Then deploy to your Firebase project:
+`firebase deploy --project {YOUR_FIREBASE_PROJECT_NAME}`
+
+If you are still on the free billing plan, you will get a message similar to the following:
+​
+```
+Error: Your project {YOUR_FIREBASE_PROJECT_NAME} must be on the Blaze (pay-as-you-go) plan to complete this command. Required API cloudbuild.googleapis.com can't be enabled until the upgrade is complete. To upgrade, visit the following URL:
+​
+https://console.firebase.google.com/project/{YOUR_FIREBASE_PROJECT_NAME}/usage/details
+​
+Having trouble? Try firebase [command] --help
+```
+
+Upgrading to the Blaze plan is necessary for access to Firebase Cloud Functions.
+
+You should now be able to access your site at:
+https://{YOUR_FIREBASE_PROJECT_NAME}.web.app
 
 ## Organization
 
@@ -112,7 +190,7 @@ integration testing.
 
 `svelte.config.js` – contains the configuration of the Sveltekit app. Sveltekit utilizes Vite under the hood, and has support for both Vite and Rollup plugins.
 
-`firebase.config.js` – contains our public firebase configuration for this application.
+`config/firebase.config.*.json` – the Firebase configuration files used by the Svelte site.
 
 `firebase.json` - contains the server-side configuration for this Firebase project.
 

config/firebase.config.demo-rally.json

@@ -0,0 +1,9 @@
+{
+  "apiKey": "abc123",
+  "authDomain": "demo-rally.firebaseapp.com",
+  "projectId": "demo-rally",
+  "storageBucket": "demo-rally.appspot.com",
+  "messagingSenderId": "abc123",
+  "appId": "1:123:web:abc123",
+  "functionsHost": "http://localhost:5001"
+}

config/firebase.config.rally-web-spike.json

@@ -0,0 +1,9 @@
+{
+  "apiKey": "AIzaSyAJv0aTJMCbG_e6FJZzc6hSzri9qDCmvoo",
+  "authDomain": "rally-web-spike.firebaseapp.com",
+  "projectId": "rally-web-spike",
+  "storageBucket": "rally-web-spike.appspot.com",
+  "messagingSenderId": "85993993890",
+  "appId": "1:85993993890:web:b975ff99733d2d8b50c9fb",
+  "functionsHost": "https://us-central1-rally-web-spike.cloudfunctions.net"
+}

functions/package.json

@@ -15,7 +15,7 @@
   "main": "lib/index.js",
   "dependencies": {
     "firebase-admin": "^9.8.0",
-    "firebase-functions": "^3.14.1"
+    "firebase-functions": "^3.15.5"
   },
   "devDependencies": {
     "@types/uuid": "^8.3.1",

functions/src/index.ts

@@ -40,7 +40,7 @@ export const rallytoken = functions.https.onRequest(
         response.status(200).send({ rallyToken });
       } catch (ex) {
         functions.logger.error(ex);
-        response.status(500).send(ex.message);
+        response.status(500).send();
       }
     } else {
       response.status(500).send("Only POST and OPTIONS methods are allowed.");
@@ -71,13 +71,12 @@ async function generateToken(idToken: string, studyId: string) {
 
 exports.addRallyUserToFirestore = functions.auth.user().onCreate(
   async (user) => {
-    functions.logger.info("addRallyUserToFirestore fired");
+    functions.logger.info("addRallyUserToFirestore - onCreate fired for user", { user });
     if (user.providerData.length == 0) {
       functions.logger.info("Extension users do not get user docs.");
       return;
     }
 
-
     const newRallyId = uuidv4();
     const extensionUserDoc = { rallyId: newRallyId };
     admin