In this post we will cover one small, but very much hyped, part of serverless; cloud functions. One of the solutions available is firebase's "Firebase Cloud Functions".
We are going to:
- Create and set up a Firebase project
- Setup a Firebase cloud function
- Deploy our first function
- Setup a local dev environment
Requirements
I assume that you have node and npm installed on your machine.
Starter project
Before we start, let us set up a basic project to work with. I created some files and boilerplate code in this repo in the 001-create-a-firebase-function-start folder.
Check the readme file on how to get started with the code.
1. Create and set up a Firebase project
Create a Firebase project
To create a firebase project:
- Go to the Firebase Console
- Log in or create your account
- Once on the home page, click the big "Add project" button
- Enter a name for your project
- Click "Continue" and follow the steps
And voila, we have a Firebase project.
Setup our firebase project locally
First, we have to install the Firebase CLI tools:
Then, we login to Firebase from the terminal:
This will open a browser tab for us to authenticate to Firebase console. Once authenticated successfully, we should have our terminal prompt back.
Next is to initialize a Firebase project locally:
The command will guide us through the setup. It will ask about 3 things: the Firebase project (which we already created), Cloud Functions language (I chose JavaScript, you can also choose TypeScript), and whether or not to use ESLint (which I replied with a "yes, please" to).
If all goes well, we should see these files created.
In addition to some other files you see, these are the important ones:
.firebaserc: stores your project aliases.firebase.json: lists your project configuration.functions/package.jsonnode dependencies for our Firebase cloud function.
The file that we should take a look at now is functions/index.js. This is where we write our code for the cloud function.
Let us use this "helloWorld" example. Notice that I disabled the CORS header since we are in development.
3. Deploy our first cloud function
Test the Firebase function locally
Before we deploy, we want to test the function locally. To do so, let us cd into the Functions directory:
And start a local emulator (this is provided by the firebase-cli tools):
After this runs, the function will be watched for changes, and the local URL should be logged in the console. Look for something like this:
In the link above, YOUR_PROJECT_ID and us-central1 are the project id and the data center region for your Firebase project respectively. And helloWorld is the function name.
If we visit the URL and all goes well, we see this message:
Deploy the Firebase cloud function
Now, let us deploy our function. While still being in the functions directory, execute this command:
The result of the command should have a public URL to trigger our function. It looks something like this:
Trigger the cloud function
Next, let us use the function in our project. To do that, we add a div in the index.html file to show a message:
And in the index.js file:
After we made these changes, let us check the result. Run the dev server:
If everything went well, we should see in our browser a message like this:
4. A better local development setup
When we are in development, we don't want to constantly deploy our function to see the result. So, we will leverage the local emulator provided by the Firebase CLI tools to have a better local development setup.
We know how to start the function emulator:
We know how to start our dev server:
Now, we need a way to start both of them with one command. Here is the easiest way I could find:
And to keep this setup, we're gonna edit the scripts in our package.json file:
And now we can use one command to start them both:
For the url variable, we should modify it to accomodate for the environment (development vs production):
And now that we use the local url of the function, we can remove the CORS header in the function:
And then deploy the function:
Summary
Until this point, we created a Firebase project using the Firebase console. In our local machine, we initialized our project a Firebase function and deployed it. We also configured a better setup for local development.
There is still much we can do here. We will explore other things in the next posts. But, if you are in a hurry, you can check the the Firebase Functions docs.