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.

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!