local test firebase functions with typescript

Question

I have a problem with local test functions in typescript. Now, I used npm run build && firebase serve --only functions to run local functions, but every change I made on the code, I need to run this command again to see the result. I want to view real-time change without having to build the typescript code every time. Is there a solution to this problem?

Answer 1

The Firebase emulator will pick up changes to JavaScript automatically while it's running. Since you're using TypeScript, you will have to compile to JavaScript in order for the emulator to pick up the change. You have two main choices:

• Run npm run build again after each change
• Tell the TypeScript compile to "watch" your source files and compile them whenever there is a change. You can do that with npx tsc --watch .

Answer 2

This is how I run both command together for my typescript functions

tsc --watch & firebase serve --only functions

That is my package.json and an npm scripts so I can invoke it easily with one command and have it update whenever I make changes.

Answer 3

This Solved it

Stop using firebase serve and use npm run serve after you cd to your functions folder.

npm run serve

This will automatically update changes on your typescript before serving

Answer 4

run tsc --watch in the same time you run the emulator to transpile ts build files to js on every change.

replace:

"serve": "npm run build && firebase emulators:start --only functions",

with:

"serve": "npm run build && firebase emulators:start --only functions | npm run build:watch",