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.

7cfaab5ac5113201604c3ad16d9a293b?s=128

Peter-John Welcome

August 20, 2020
Tweet

Transcript

  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. Quick Firebase History Lesson

  4. Syncing data in real time

  5. • 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
  6. • Creating dev and prod. projects • Create separate database

    (RTDB) • Using different BundleID’s and package names Some hacky solutions
  7. Firebase Emulator

  8. Emulator has been around for a while https://www.youtube.com/watch?v=tResEeK6P5I

  9. Firebase UI Emulator

  10. Firebase UI Emulator

  11. • 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
  12. • Does not support all products ( Auth, Storage )

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

    as a prod environment yourself instead of using the Firebase Console.
  14. Getting Started with the Emulator

  15. • Node install version 8 or greater • JDK version

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

    $ firebase init $ firebase init emulators $ firebase emulators:start
  17. 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" } } }
  18. UI Emulator

  19. UI Emulator http://Localhost:4001

  20. How do we interact with the Emulator

  21. Interacting with UI Emulator

  22. 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
  23. Demo Firestore

  24. 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
  25. 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
  26. Demo Cloud Functions

  27. 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
  28. 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
  29. Peter-John Welcome GDE Firebase @pjapplez Thank You!