DEV Community

loading...

Getting Started with Google Firebase (Part-2)

shinesanthosh profile image Shine Santhosh Updated on ・3 min read

Let's continue to explore firebase


Make sure to read Part-1 before you begin


During the time I wrote this post Cloud Functions was free to use (with some restrictions). But later Google updated the policy making it accessible only if you are on the blaze plan(A pay-as-you-go plan)


In the previous session, we created an account and started a new firebase project. And today we'll make our hands dirty. This part requires some coding. We'll be using nodeJS, so make sure you know a little bit of that and ExpressJs.

Prerequisites

  • Install nodeJS
  • An IDE. You can use your favorite one. But we recommend using VSCode

Introduction

In the previous part of this series, we created a new firebase project. And today we'll explore CLOUD FUNCTIONS.

Cloud Functions??

Cloud Functions for Firebase is a serverless framework that lets you automatically run backend code in response to events triggered by Firebase features and HTTPS requests. Your JavaScript or TypeScript code is stored in Google's cloud and runs in a managed environment. There's no need to manage and scale your own servers.

Setting Up the environment

To start coding a cloud function. We must set up an environment with emulators and stuff so that we can test our code on our machine itself before deploying it to the GCP.

  • To install the Firebase CLI

After you install NodeJS you can install firebase CLI using npm by using this command:

npm install firebase-tools -g

This will install firebase CLI globally on your system.

  • Initiating the project on your system

Login to your Google account using the command:

 firebase login

After you do that you'll get a link. Open that link in your browser and log in with your account.


Now to initiate the project use command prompt or terminal to navigate into the directory where you want to set as the workspace. Then:

firebase init functions

When you are asked to select a project option. Select the use existing project option and select your project from the list. And for the languages option use JavaScript as we'll be using that. We may not need the ESLint. But you can go with it if you need it. Make sure to install all the dependencies from npm

And there you go the initialization is complete.

First Piece of code

Take a look at your workspace. The directory should have some new files by now along with a new folder called functions.

And in that folder, you'll see an index.js file. That's the file where you should write the code. Open that. You'll see some commented lines. You've to uncomment some lines to make it as follows:

const functions = require('firebase-functions');

exports.helloWorld = functions.https.onRequest((request, response) => {
 response.send("Hello from Firebase!");
});

If you've ever used expressJs, You'll feel at home now because firebase uses express.
And this will be the first piece of code we gonna deploy.

const functions = require('firebase-functions'); 

This code imports firebase functions into your code.

exports.helloWorld = functions.https.onRequest((request,response)=>{
    response.send("Hello World from firebase");
});

This is our HTTP request triggered cloud function with the name helloWorld.
Once it gets an HTTP trigger, the function is initiated and it sends a response.


Testing locally with the emulator

So now to test our function:

firebase serve

This should start a server and you'll get a link on the localhost. Open that link and you'll be able to see your code in action.

We made the stupidest app ever. But yeah it's the Hello world app. You can make changes as you like if you know express.

Deploying it

We've seen our code running smoothly without any issues(As there's nothing to cause an issue because it's such a silly code). It is running on our local machine. Now to put it into the cloud, use:

firebase deploy

You'll get the link of your deployed code under function URL. Open it:

Woohoo. That stupid thing is on the cloud. Now head over to your firebase console and open the functions from the navigation panel on left(or whatever you call it).

You can see the statistics of your function there.

Winding-up

So We have our first code on firebase. Now it's useless and dumb and does nothing at all. We'll try to create an API with the help of firestore in the next part of this series.

Thank you. We'll continue to explore more in the coming sessions. Keep exploring.

Discussion (0)

pic
Editor guide