Create Your Own Web API Service Using Firebase Functions and NodeJS!

Thunkable does a lot of great things, processing large datasets is not one of them. I was inspired by @eddie.rebehy to try to figure out how to create my own Web API endpoint that I could use to transform large JSON trees (1,000+ nodes) quickly. I thought I would share how you can create a simple Web API using Firebase and NodeJS.

Disclaimer: This is not a beginner topic and I don’t know the NodeJS language.

Setup
it is important to note that the Spark (ie 100% free) firebase account, as of March 2021, will no longer support functions. You will need to upgrade to the Blaze pay as you go account. But that doesn’t cost you anything. Here is why, until you exceed the utilization of the Spark level, you won’t be charged, so unless your current utilization is bumping up against the limits, you won’t be charged. But just in case, you can add a charge alert of $1USD that will send you a message when your charges exceed $0.50USD. For me, I am willing to risk $0.50USD to gain server side processing.

You should already have a Firebase account.

I followed the Get started: write, test, and deploy your first functions instructions. They were a little vague in places, but they were 95% of what I needed. Follow these instructions and you should be able to get both the server and development (local) environments set up.

A few additional notes on setup on Windows 10:

  • I installed Visual Studie Code as my NodeJS integrated development environment (IDE). I’m very please so far.
  • Although everything recommends using NVM (or the windows equivalent nvm-windows, I was able to get it set up without nvm-windows.
  • The Java Developers Kit (JDK) does nothing to help you set up. After downloading the zip file, extract it somewhere, such as C:\Program Files\Java\JDK. Then go to Environment Setting and change the path to include the JDK bin directory, like C:\Program Files\Java\JDK\jdk-15.0.1\bin. Be sure the path include the “bin” directory. ( we are still paying the price for DOS).
  • Installing NodeJS takes a while, get a cup of coffee.

Calling your service from Thunkable Web API
The Getting Started article include instructions to set up your first service and it works great. That is, it works great until you try to run it in Thunkable as either a preview or Web Live Test. This is because of a Cross-Origin-Resource-Sharing (CORS) issue. @jane wrote a great article explaining the issue. Luckily, NodeJS has a way to enable CORS. I would suggest you watch this video for an explanation. The result is that my NodeJS project looks like this:
image
Note: this function doesn’t do anything but return a message. That is all I wanted for this demonstration

After deploying the function, you are ready to set up the Thunkable Web API call.

The results on the web Live Test
image

Here is a remix of the sample project

Testing note: if you are using the web Live Test, you can use the emulated firestore source to test your app’s interactions with the function.

Happy Thunking!

p.s. Thanks to all of the great Thunkers who have helped me in 2020 to get as far as I have in Thunkable. There are too many to name without my missing someone!

5 Likes

Ted, this is dope. Do you have your api making external data calls yet?!? This is cool.

I just learned to make authenticated Firebase calls using JavaScript today (with bubble so I make a nice webapp to go with my mobile app) and could see this being useful for Firebase data filtering purposes.

2 Likes

this is amazing well how did you made the url can you tell me

1 Like