Getting Started with Google Firebase (Part-2)

Shine Santhosh — Fri, 24 Apr 2020 16:07:51 +0000

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

 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.

Getting Started with Google Firebase (Part-1)

Shine Santhosh — Fri, 24 Apr 2020 15:48:45 +0000

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)

Firebase is a mobile and web application development platform that helps developers to focus on their front-end rather than solving the puzzles and issues in the back-end. If you’re among those who wanted to dive deep into cloud-computing and got discouraged as you weren’t willing to rip your pockets off, there’s happy news for you. You can get started with Firebase for free (Not even credit card details are needed).

You can find more details about cloud computing in our article.

You can create and deploy your APIs on the cloud for free (The basic account has some restrictions though).

Let's have a look at what Firebase offers:

Prerequisites:

A decent knowledge of JavaScript
Prior experince with ExpressJS will be awesome Don't worry if you don't know any of those. Have look at our other posts:

Basic Coding or Online-Learning

Create a Firebase account

As mentioned before, it’s free and simple. All you need to do is to authenticate with your existing Google account.
Head over to firebase.google.com and click get started and authenticate with your existing Google account.

Create a new project

The Firebase console is where you do most of the work.

Go to console.firebase.google.com and explore your console.

You can create a new project, or explore some demo project.
Click on create project, You’ll be prompted to give a name for your project
Just below the name, you’ll see an id. This is important. You can edit the id as you like or keep it as it is, but you can’t change it after you create a project.
Accept the terms and continue.
It will ask if you need Google analytics in your project. (It’s up to you as we won’t cover that).
Create your project.
Done!

Back to the console

Go to the Firebase console again (You’ll be redirected after creating the project).

Click on your project and you’ll see details about your project, the current plan, etc.
On the left navigator, you’ll see the option called Develop. This window shows what we can do with firebase. Let’s explore some of them:
- Authentication: Options for integrating Google authentication into your app
- Database: Handling of Databases.
- Hosting: To host your website on GCP
- Functions: Cloud functions to create and deploy your APIs

There’s a lot more to explore. Visit the official Firebase Docs or Firebase Youtube Channel for tutorials and Help.

As this post is getting large, We’ll continue exploring firebase in the next Post. Keep exploring...

DEV Community: Shine Santhosh