14

I am playing with firebase functions. Works fine when deploying to firebase server using command firebase deploy --only functions. However, I would like to test my functions locally before deploy to server of course. What I see running firebase serve is that the functions "deployed" locally have not the latest changes I did in indext.ts - are running the last builded version, which are in index.js.

My question is, How do I manual build my firebase functions project to test them locally with latest changes? Should firebase serve autobuild the project before deploy it locally? For me, it sounds like a bug.

lordneru
  • 700
  • 7
  • 19

6 Answers6

34

If you want to reload the changes to your TypeScript when running firebase serve or firebase functions:shell, all you have to do is build your project again using npm script that was created for you when you initialized the project (see package.json):

cd functions
npm run build

This will transpile your TypeScript to JavaScript, and the changes to the JavaScript will get picked up by the emulator automatically.

Also, if you are a more advanced TypeScript user, you can run tsc --watch to automatically compile TS to JS when source files change on disk. You can read more about that in this blog.

Doug Stevenson
  • 297,357
  • 32
  • 422
  • 441
  • Thanks Doug!! Working now. Definitly, this is what I was looking for!. I tried with `npm run build`, but I missed to run `cd functions` before. – lordneru Jul 19 '18 at 18:36
  • And you have to build everytime? – Teodor Ciuraru Feb 13 '20 at 10:56
  • 9
    Or you could just put this as your npm "serve" script: `"serve": "npm run build && firebase emulators:start --only functions & tsc --watch"`. (Note the addition of `& tsc --watch` at the end. – Matthcw Apr 10 '20 at 10:27
  • @Matthcw did you test that? It doesn't work for me with a new `firebase init` project. This command `firebase emulators:start --only functions` is still active so `tsc --watch` never gets executed. I have tried `&` and `&&` in front of `tsc --watch`. So far I've found that I need to open a new terminal and run `tsc --watch` in some manner. – Ash Apr 24 '20 at 13:27
  • 1
    @Ash It might be your OS and choice-of-terminal. I'm using macOS Mojave v10.14.6 and Terminal. The use of single `&` works fine for me. I learned this from here: https://bashitout.com/2013/05/18/Ampersands-on-the-command-line.html – Matthcw Apr 29 '20 at 08:28
  • @Matthcw of course, that makes sense as I'm on Windows. OS was the key part as per that article; `This trailing ampersand directs the shell to run the command in the background, that is, it is forked and run in a separate sub-shell, as a job, asynchronously.` and `A single ampersand & can also delimit a list of commands to be run asynchronously` – Ash Apr 29 '20 at 12:31
  • @Matthcw your first comment is _exactly_ what i was looking for. Wasn't getting graceful emulator shutdowns when the ts app crashed. For anyone worried about background process shutdown, ```^C``` will do it. I verified using ```ps -A``` output before and after ```^C``` – J.E.C. May 06 '22 at 11:41
8

firebase serve doesn't seem to be running npm build. But if you look inside functions/package.json, you can see there is already a serve script there that performs npm run build && firebase serve --only functions. So if you just do:

cd functions
npm run serve

You can build and serve without having to do two separate commands.

JYeh
  • 4,273
  • 3
  • 27
  • 40
4

If you are looking for hot reloading i just did it like below:

"start:emulators": "firebase emulators:start --only functions",
"ts:watch": "tsc --watch",
"dev": "concurrently --kill-others \"npm run start:emulators\" \"npm run ts:watch\"",

It will run both firebase and ts watch in parallel, which will help your development speed

Chaitanya
  • 126
  • 2
  • 7
1

I don't think you can just switch between Javascript and Typescript in an initialized project. The setup for Typescript is a bit different than Javascript. You will need to migrate your Javascript project to Typescript.

To migrate your project from JS to TS follow this firebase-functions documentation on :

Migrating an existing JavaScript Cloud Functions project

Typescript project setup:

Typescript project setup

Ashu
  • 2,970
  • 1
  • 19
  • 31
  • 1
    The transpilation process is performed by firebase cli when I execute "firebase deploy", but not when I execute "firebase serve" to run the functions locally. So, I understand, there should be a manual build for that, or do it automatically when "firebase serve" command is executed. – lordneru Jul 19 '18 at 10:17
  • 'firebase serve' sometime doesn't hot reload changes and instead uses cache data. have you tried clearing browser window cache or re-serving the command. – Ashu Jul 19 '18 at 10:24
  • 1
    It is not related to browser. I can see the old version of index.js in IDE. – lordneru Jul 19 '18 at 12:05
  • don't know dude. just wait for a better answer. meanwhile, you can backup your project and try migration if you like. no harm done :) – Ashu Jul 19 '18 at 12:09
1

Go to functions folder, open package.json and add new key: "hotReload": "tsc --watch"

next, run npm run hotReload in same functions folder and keep the terminal open. This will update *.js whenever any changes to *.ts file. Remember that cloud functions run from *.js file not *.ts file. Hence, *.ts file needs to compiled to *.js first.

Next, open new terminal, go to main project folder and run firebase serve (to parallely run hosting+functions) or firebase serve --only functions

GorvGoyl
  • 42,508
  • 29
  • 229
  • 225
-1

Just use this command when you are using first time npm serve command

firebase emulators:start
Hammad ul Hasan
  • 306
  • 3
  • 15