I am using Firebase as the database, auth, and hosting backend for my React webapp. I have started to incorporate functions for some of the backend database processing. It's a perfect way to automate some things and write less code. I have written and deployed a few functions that work really well. The drawback of this is that using database triggers is not really discussed in the firebase documentation or around the internet. So I find myself having to write a few lines of a function, deploy it to my firebase account, test my app, and watch the firebase functions website for any changes. It's pretty painful. I found out about firebase functions:log
the other day, which makes it a bit more bearable, but what I'm really looking for is a way to run my app locally and have a console.log like output for the functions.
So, in short:
- ReactJS frontend (using Create-React-App / CRA), Firebase backend (auth, db, and hosting)
- Using cloud functions for automation (no additional backend server)
- Want to monitor function console.log outputs for database triggers in a terminal window
- Don't want to deploy to my firebase account each time.
Here's what I've tried:
Set up
package.json
to proxy all requests through"proxy": "http://localhost:5000"
. Runfirebase emulators:start
, which starts a database emulator on port 9001, a hosting emulator on port 5000, and a function emulator on port 5001. The proxy pushes all calls through the hosting emulator, but apparently the hosting emulator doesn't tap into the other two for any console.log outputs. So I can only see http requests when I test the app locally throughhttp://localhost:3000
.Set up
setupProxy.js
, as per the CRA documentation. Write a proxy redirect for/
to port 5000 and tried to write one for/functions
(it was a guess for the url path) for port 5001. Runfirebase emulators:start
. Tested app onhttp://localhost:3000
to see if that showed anything other than http requests, but it did not.firebase serve
on port 5000. This requires building my react app first (npm run build
). When I test my app onhttp://localhost:5000
the terminal will show the http traffic, but nothing from any other firebase console logs. This also doesn't really save me any time, since I have to build my code.Write a few lines in the functions index.js file with console.logs everywhere. Save file, and deploy via
firebase deploy --only functions:functionname
. Runfirebase functions:log
in terminal. Test app viahttp://localhost:3000
. The output shows the console.log lines, which is great, but the flow is not ideal.
I've tried everything I've found written about to get CRA and local firebase function monitoring to work. I feel like I'm almost there, but can't figure out the last bit. I can't possibly be the only person who uses react and firebase functions, right? Any help would be greatly appreciated.