feat(examples/firebase): deploy to Cloud Functions for Firebase (#53)

Author: penx

firebase/.gitignore

@@ -8,3 +8,4 @@ node_modules
 firestore-debug.log
 firebase-debug.log
 ui-debug.log
+.firebase

firebase/README.md

@@ -10,7 +10,7 @@ See the screen recording at `./screen_recording.gif` or Open this example on [Co
 
 [![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/remix-run/examples/tree/main/firebase)
 
-## Example
+## Running locally
 
 To run it, you need to either:
 
@@ -31,15 +31,25 @@ When the SERVICE_ACCOUNT and CLIENT_CONFIG environment variables have not been s
 
 When you run `npm run emulators`, an initial user is created with credentials `user@example.com:password`. This can be configured in `firebase-fixtures/auth/accounts.json` or via the emulator UI.
 
-## Auth (`app/server/auth.server.ts`)
+## Deploying
+
+1. Follow the "Run against a Firebase Project" steps above if not done already
+2. Install the Firebase CLI with `npm i -g firebase-tools`
+3. Log in to the CLI with `firebase login`
+4. Run `firebase use --add` and choose the Firebase project you want to deploy to
+5. Deploy with `firebase deploy`
+
+## Details
+
+### Auth (`app/server/auth.server.ts`)
 
 `signIn` returns a Firebase session-cookie-string, when sign-in is successfull. Then Remix `cookieSessionStorage` is used to set, read and destroy it.
 
 `signUp` creates a user and calls sign-in to receive the session cookie.
 
 `requireAuth` uses `firebase-admin` to verify the session cookie. When this check fails, it throws a `redirect` to the login page. Use this method to protect loaders and actions. The returned `UserRecord` can be handy to request or manipulate data from the Firestore for this user.
 
-## Firestore (`app/server/db.server.ts`)
+### Firestore (`app/server/db.server.ts`)
 
 Requests to the Firestore are made using the `firebase-admin`-SDK. You need to check validity of your requests manually, since `firestore.rules` don't apply to admin requests.
 

firebase/firebase.json

@@ -1,5 +1,26 @@
 {
+  "functions": {
+    "predeploy": "npm run build",
+    "source": "."
+  },
+  "hosting": {
+    "public": "public",
+    "ignore": [
+      "firebase.json",
+      "**/.*"
+    ],
+    "rewrites": [{
+      "source": "**",
+      "function": "remix"
+    }]
+  },
   "emulators": {
+    "functions": {
+      "port": 5001
+    },
+    "hosting": {
+      "port": 5000
+    },
     "auth": {
       "port": 9099
     },

firebase/functions.yaml

@@ -0,0 +1,6 @@
+specVersion: v1alpha1
+endpoints:
+  remix:
+    platform: gcfv2
+    entryPoint: remix
+    httpsTrigger: {}

firebase/functions/index.js

@@ -0,0 +1,9 @@
+const { onRequest } = require("firebase-functions/v2/https");
+const { createRequestHandler } = require("remix-google-cloud-functions");
+
+const remix = onRequest(
+  createRequestHandler({
+    build: require("../build"),
+  })
+);
+module.exports = { remix };

firebase/package.json

@@ -1,6 +1,7 @@
 {
   "private": true,
   "sideEffects": false,
+  "main": "./functions/index.js",
   "scripts": {
     "build": "remix build",
     "dev": "remix dev",
@@ -13,9 +14,11 @@
     "@remix-run/react": "*",
     "@remix-run/serve": "*",
     "firebase-admin": "^10.0.2",
+    "firebase-functions": "^3.21.2",
     "isbot": "^3.6.5",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "remix-google-cloud-functions": "0.0.1"
   },
   "devDependencies": {
     "@remix-run/dev": "*",
@@ -27,6 +30,6 @@
     "typescript": "^4.8.4"
   },
   "engines": {
-    "node": ">=14"
+    "node": "14"
   }
 }