Why won't Angular Firebase Cloud Functions Emulator update functions without a full deploy?

Question

I'm trying to get my development environment setup. I'm using Angular 5 TypeScript, VisualStudio IDE on a Windows 10 machine. I'm using Firebase Hosting, Firestore and Firebase Functions. I'm writing functions within the 'functions' folder in the TypeScript (index.ts) file. When following the instructions for testing Firebase Functions Locally (https://firebase.google.com/docs/functions/local-emulator). I am able to get the functions running locally both on the local server via "firebase serve" and via the Functions Shell, as described in the link. However, when I make changes to index.ts, the function is not updated when pinged again. It is only updated when I do a full "firebase deploy functions" command. That defeats the purpose of having the local Functions emulator. The idea is to avoid having to deploy the Function every-time you are changing something. Maybe, something with firebase.json? I copied it below along with the output of 'ng version'.

Angular CLI: 1.6.8
Node: 6.11.5
OS: win32 x64
Angular: 5.2.4
... cdk, common, compiler, compiler-cli, core, forms, http
... language-service, material, platform-browser
... platform-browser-dynamic, router

@angular/animations: 5.2.5
@angular/cli: 1.6.8
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.8
@schematics/angular: 0.1.17
typescript: 2.5.3
webpack: 3.10.0


// firebase.json
{
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint",
      "npm --prefix \"$RESOURCE_DIR\" run build"
    ],
    "source": "functions"
  },
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "database": {
    "rules": "database.rules.json"
  }
}

Do you have a transpile stage when working with your Cloud Functions code? Please go into more detail about the steps you take when working with the emulator. — Doug Stevenson
No transpile stage, I've never seen that in the documents. I just make changes to the function within index.ts and assume the hot swap transpile kicks in? Similar to the Angular UI code does. This is not how it works? Thank you! — dve3413
In your question, you said index.js. In your comment, you just said index.ts. Which is it? Are you using plain JavaScript, or TypeScript to write your Cloud Functions code? — Doug Stevenson
it's TypeScript index.ts. I updated the question, thank you. — dve3413

Doug Stevenson Doug Stevenson · Accepted Answer · 2018-05-06T19:31:30

TypeScript has a transpile phase that's required to get the code into JavaScript (ES6), which can be understood by Cloud Functions. You will have to make that transpile phase happen in order for the emulator to pick up the changes.

Using the package.json that's created by the Firebase CLI for new TypeScript projects, you can run npm run build to transpile without deploying. Or you can use tsc --watch to have a process automatically transpile changes to your TypeScript.

It sounds like your package.json might be very old and doesn't include the newest npm scripts for dealing with TypeScript. I suggest re-creating it with the latest version of the Firebase CLI if you don't have npm run build available.

Also, I've written a detailed blog about this - you can read it here.

Why won't Angular Firebase Cloud Functions Emulator update functions without a full deploy?

1 Answers