Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Developing Locally with the Firebase UI Emulator

Developing Locally with the Firebase UI Emulator

Firebase is a great suite of tools for mobile and web developers, to link an external database to their application as well as to monitor performance or to give a developer the ability to do some heavy logic on the server side with serverless functions. One of the fallbacks of firebase products in the beginning was that you always needed to connect to the real online instance and could not develop locally. The Firebase Emulator was released to combat this issue but it was not great to use as it was all done in the command line. Recently the Firebase UI Emulator was released and this had a significant improvement in helping developers work locally. In this talk, I will show how to get the Firebase UI emulators up and running and how this will improve your development process when working with Firebase. We will learn how to connect our mobile app to a local Firestore instance and how to trigger Cloud functions locally.

Peter-John Welcome

August 20, 2020

More Decks by Peter-John Welcome

Other Decks in Technology


  1. Peter-John Welcome GDE Firebase @pjapplez Developing locally with the Firebase

    UI Emulator An Introduction to the Firebase UI Emulator
  2. Half screen photo slide if text is necessary Who I

    am Freelance Mobile Engineer Google Developer Expert for Firebase
  3. • Always had to be online • Felt a little

    like you were developing in Prod. • Teammates would be sad if you broke database • Using up your free quota for development • Etc. Dev Environment Cons
  4. • Creating dev and prod. projects • Create separate database

    (RTDB) • Using different BundleID’s and package names Some hacky solutions
  5. • Accessing databases offline • Can now run end to

    end tests on CI • Easily import and export data • Increase in development productivity • Unit Testing security rules • Testing does not contribute to your quota Benefits of UI Emulator
  6. • Does not support all products ( Auth, Storage )

    • All triggers in cloud functions are not supported. Limitations of UI Emulator
  7. UI Emulator You should not try and host the emulator

    as a prod environment yourself instead of using the Firebase Console.
  8. • Node install version 8 or greater • JDK version

    1.8 or greater • Firebase CLI UI Emulator
  9. UI Emulator $ npm install -g firebase-tools $ firebase login

    $ firebase init $ firebase init emulators $ firebase emulators:start
  10. UI Emulator ( Firebase.json ) { "firestore": { "rules": "firestore.rules",

    "indexes": "firestore.indexes.json" }, "storage": { "rules": "storage.rules" }, "emulators": { "firestore": { "port": "8090" }, "ui": { "enabled": true, "host": "localhost", "port": 4001 }, "functions": { "port": "5001" }, "database": { "port": "9000" }, "pubsub": { "port": "8085" } } }
  11. Interacting with UI Emulator private func emulatorSettings() { let settings

    = Firestore.firestore().settings settings.host = "localhost:8090" settings.isPersistenceEnabled = false settings.isSSLEnabled = false Firestore.firestore().settings = settings } FirebaseApp.configure() emulatorSettings() Firestore
  12. Interacting with UI Emulator const functions = require('firebase-functions'); const admin

    = require("firebase-admin"); admin.initializeApp() exports.sayHello = functions.https.onCall ((data, context) => { const text = data.text; var db = admin.firestore(); const webDetection = JSON.parse('{"webEntities": [ {"entityId": "1", "score": 1.44225, "description": "Carnival in Rio de Janeiro" }]}'); let imageRef = db.collection('images').doc(text); imageRef.set(webDetection); }); Cloud functions js
  13. Interacting with UI Emulator pod 'Firebase/Functions' lazy var function =

    Functions.functions() function.useFunctionsEmulator(origin: "http://localhost:5001") private func callCloudFunction(text: String) { function.httpsCallable("sayHello").call(["text":text]) { if let error = $1 { } if let text = ($0?.data as? [String: Any])?["text"] as? String { self.resultsTextView.text = text } } } self.callCloudFunction(text: "image.jpg") Cloud functions iOS
  14. UI Emulator There's more • Firebase Web Hosting can be

    tested locally. • Running containerized Emulator images with CLI on CI • Emulating Pub/Sub interactions with Cloud Functions • Realtime Database interaction • Still able to connect to external services through emulator
  15. References • https://firebase.google.com/docs/emulator-suite • https://github.com/pjwelcome/GDGCloudVision • https://github.com/firebase • https://www.youtube.com/user/Firebase •

    https://www.youtube.com/watch?v=8CR86yFmY2I&feature=emb_logo • https://www.youtube.com/watch?v=sl_8OGI68g4&feature=emb_logo • https://firebaseonair.withgoogle.com/events/firebase-live20