6

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:

  1. Set up package.json to proxy all requests through "proxy": "http://localhost:5000". Run firebase 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 through http://localhost:3000.

  2. 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. Run firebase emulators:start. Tested app on http://localhost:3000 to see if that showed anything other than http requests, but it did not.

  3. firebase serve on port 5000. This requires building my react app first (npm run build). When I test my app on http://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.

  4. Write a few lines in the functions index.js file with console.logs everywhere. Save file, and deploy via firebase deploy --only functions:functionname. Run firebase functions:log in terminal. Test app via http://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.

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
mjparker78
  • 63
  • 5
  • You can submit a feature request [1] since you are looking for a custom solution. https://issuetracker.google.com/issues/new?component=530136&template=1192449. Make sure you modify the type to "feature request" and not "bug". – Philippe Jan 03 '20 at 03:45

0 Answers0