DEV Community

Muhammad Muhajir
Muhammad Muhajir

Posted on

Speed up your firebase development workflow and save your time.

Did you know that firebase now has local emulator? Previously, if we write firebase functions, we have to deploy it. And then we test it online. The iteration speed is slow, this is bad.

But not anymore, firebase now has emulator suite. It covers pretty much everything, from authentication, to firestore, to firebase functions. Pretty good.

I still miss one thing tho, Hot Reload. But it's still possible to do that with with firebase functions

This is how you hot reload the firebase functions

Initialize your project

Follow the steps here https://firebase.google.com/docs/emulator-suite/images/emulator-suite-usecase.png

Hot Reload

So for example, this is our current package.json

{
  "name": "functions",
  "scripts": {
    "lint": "eslint \"src/**/*\"",
    "build": "tsc",
    "serve": "npm run build && firebase emulators:start --only functions",
    "shell": "npm run build && firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "12"
  },
  "main": "lib/index.js",
  "dependencies": {
    "firebase-admin": "^9.2.0",
    "firebase-functions": "^3.11.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^3.9.1",
    "@typescript-eslint/parser": "^3.8.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "^2.22.0",
    "typescript": "^3.8.0",
    "firebase-functions-test": "^0.2.0"
  },
  "private": true
}

Enter fullscreen mode Exit fullscreen mode

change it into

{
  "name": "functions",
  "scripts": {
    "lint": "eslint \"src/**/*\"",
    "build": "tsc",
    "build:watch": "tsc --watch --preserveWatchOutput",
    "serve": "npm run build:watch | firebase emulators:start --only functions",
    "shell": "npm run build && firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "12"
  },
  "main": "lib/index.js",
  "dependencies": {
    "firebase-admin": "^9.2.0",
    "firebase-functions": "^3.11.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^3.9.1",
    "@typescript-eslint/parser": "^3.8.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "^2.22.0",
    "typescript": "^3.8.0",
    "firebase-functions-test": "^0.2.0"
  },
  "private": true
}

Enter fullscreen mode Exit fullscreen mode

notice the build:watch and serve script is updated

That's it. Now you can npm run serve, and your functions will be hot reloaded

Latest comments (2)

Collapse
 
ivioninjs profile image
Mo

Thanks man! You really help me!

Collapse
 
tccodez profile image
Tim Carey

I’m gonna try this out, thank you!