initial attempt at firebase emulator in docker

ignore .env

add comments

lock react-leaflet-draw version

fix cors issue by changing ip address for cloud functions

remove .env

comment out emulator code and remove unneeded db dump file

clean up

update readme

add heading to readme

remove db backup and import on emulator start

remove token

.gitignore

@@ -37,3 +37,6 @@ __pycache__
 
 firebase-debug.log
 .Rproj.user
+
+yarn.lock
+.env

README.md

@@ -19,11 +19,19 @@ This will start a hot-reloading dev server. Click on the link that it outputs to
 
 ### Running the Firebase emulator
 
+#### Local Install Alternative
+
 Install firebase CLI [as described here](https://firebase.google.com/docs/emulator-suite/install_and_configure).
 
 Run `firebase emulators:start` from the `firebase-functions/functions` directory.
 Redirect function calls to this emulator by uncommenting the call to `useFunctionsEmulator` in [firebase.js](firebase.js).
 
+#### Docker Alternative
+Using the firebase emulator in docker will preload some data into a local realtime database and emulate cloud functions and the realtime database
+
+docker-compose up -d --build
+Redirect function calls to this emulator by uncommenting the call to `useFunctionsEmulator` in [firebase.js](firebase.js).
+
 ## Deploy to testing site at GitHub pages
 
 Pushes to master automatically deploy to <https://cioos-siooc.github.io/metadata-entry-form/>

docker-compose.yml

@@ -0,0 +1,30 @@
+version: "3.3"
+
+services:
+
+  # -------------------------------------
+  # Firebase Eumulator
+  # -------------------------------------
+
+  emulator:
+    image: cioos/firebase-emulator:latest
+    build: ./firebase-functions/
+    volumes:
+      - ./firebase-functions/firebase.json:/app/firebase.json:rw
+      - ./firebase-functions/firestore.rules:/app/firestore.rules
+      - ./firebase-functions/firestore.indexes.json:/app/firestore.indexes.json
+      - ./firebase-functions/functions:/app/functions
+    env_file:
+      - .env
+    environment:
+      FIREBASE_PROJECT: cioos-metadata-form
+    ports:
+      - 5002:5002 # Functions emulator
+      - 9001:9001 # Realtime Database
+      - 8081:8081
+      - 4000:4000 # UI
+      - 4400:4400
+      - 4500:4500
+      - 9299:9299
+      - 9099:9099 # Authentication emulator
+      - 9150:9150

firebase-functions/Dockerfile

@@ -0,0 +1,18 @@
+FROM node:lts-alpine AS app-env
+
+# Install Python and Java and pre-cache emulator dependencies.
+RUN apk add --no-cache python3 py3-pip openjdk11-jre bash && \
+    npm install -g firebase-tools && \
+    firebase setup:emulators:database && \
+    firebase setup:emulators:firestore && \
+    firebase setup:emulators:pubsub && \
+    firebase setup:emulators:storage && \
+    firebase setup:emulators:ui && \
+    rm -rf /var/cache/apk/*
+
+WORKDIR /app
+
+ADD ./entrypoint.sh /app/entrypoint.sh
+RUN chmod 755 entrypoint.sh
+
+ENTRYPOINT ["./entrypoint.sh"]

firebase-functions/entrypoint.sh

@@ -0,0 +1,7 @@
+#!/bin/sh
+
+echo "Launching emulator with following firebase.json config file"
+cat firebase.json
+
+npm --prefix ./functions install
+firebase emulators:start --project=cioos-metadata-form --only=firestore,database,functions,auth

firebase-functions/firebase.json

@@ -8,16 +8,25 @@
   },
   "emulators": {
     "functions": {
-      "port": 5002
+      "port": 5002,
+      "host": "0.0.0.0"
     },
     "database": {
-      "port": 9001
+      "port": 9001,
+      "host": "0.0.0.0"
     },
     "ui": {
-      "enabled": true
+      "enabled": true,
+      "host": "0.0.0.0",
+      "port": "4000"
     },
     "firestore": {
-      "port": 8081
+      "port": 8081,
+      "host": "0.0.0.0"
+    },
+    "auth": {
+      "port": 9099,
+      "host": "0.0.0.0"
     },
     "singleProjectMode": true
   }

package.json

@@ -30,7 +30,7 @@
     "react-dom": "^16.13.1",
     "react-helmet": "^6.1.0",
     "react-leaflet": "^2.7.0",
-    "react-leaflet-draw": "^0.19.0",
+    "react-leaflet-draw": "0.19.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^3.4.3",
     "react-smooth-dnd": "^0.11.1",

src/firebase.js

@@ -4,7 +4,7 @@ import "firebase/auth";
 import "firebase/functions";
 import "firebase/firestore";
 
-const deployedOnTestSserver = process.env.REACT_APP_DEV_DEPLOYMENT;
+const deployedOnTestServer = process.env.REACT_APP_DEV_DEPLOYMENT;
 
 const productionDB = "https://cioos-metadata-form.firebaseio.com";
 const devDB = "https://cioos-metadata-form-dev.firebaseio.com";
@@ -13,7 +13,7 @@ const config = {
   apiKey: "AIzaSyAdlELZS5Lbea5NquotMT8amwO-Lc_7ogc",
   authDomain: "cioos-metadata-form.firebaseapp.com",
   databaseURL:
-    process.env.NODE_ENV === "production" && !deployedOnTestSserver
+    process.env.NODE_ENV === "production" && !deployedOnTestServer
       ? productionDB
       : devDB,
   projectId: "cioos-metadata-form",
@@ -22,11 +22,15 @@ const config = {
   appId: "1:646114203434:web:bccceadc5144270f98f053",
 };
 
+if (window.location.hostname === "localhost" && deployedOnTestServer) {
+  config['databaseURL'] = "http://localhost:9001?ns=cioos-metadata-form"
+}
+
 firebase.initializeApp(config);
 // uncomment below to use firebase emulator for local development
-// if (window.location.hostname === "localhost") {
-//   firebase.functions().useFunctionsEmulator("http://localhost:5002");
-//   // firebase.auth().useEmulator("http://localhost:9099");
+// if (window.location.hostname === "localhost" && deployedOnTestServer) {
+//   firebase.functions().useFunctionsEmulator("http://127.0.0.1:5002");
+  // firebase.auth().useEmulator("http://localhost:9099");
 // }
 
 export default firebase;