Firebase firestore in the forum application #1: Firebase init and cloud backend function

Repository

https://github.com/firebase

What Will I Learn?

• Firebase init ( Reauth, Firestore)
• Cloud backend function

Requirements

• Basic Javascript
• Install Firebase

Resources

• Firebase-https://firebase.google.com/

Difficulty

Basic

Tutorial Content

Hi everyone, in this tutorial we will discuss firebase. maybe from and already know what firebase is, for those of you who don't know it. you can visit the website to see further documentation. In this tutorial, we will create a forum website using firebase. so in that forum, we will use Firebase as the backend and database. we will start this tutorial from the beginning. so for those of you who do not have knowledge in Firebase this is not a problem, For more details, we just start our tutorial this time.

Using Firestore

Make sure you have a basic account and a little knowledge about firebase, so in firebase there are two types of databases that we can use, the first is firestore and the second is the realtime database. Well in this tutorial we will create a forum using Firestore. Before you follow this tutorial you must have a firebase account first. Well, what we will do first is initialize firebase. for more details, we can see below:

• Initialization of firebase

The first thing we will do is initialize firebase, you can create your project folder to initialize. We can initialize our project in this way firebase init.

I will explain the image we saw above, first we will initialize with the command firebase init, Then there will be a confirmation command, you can type Y to continue the process.

Then you will be directed to choose what firebase features you will use on your project. Here I have to use Firestore.

• Reauth firebase

You need to know that when using firebase init you mean allowing your firebase account to be accessed with firebase CLI. Here I will try to use firebase login --reauth. I will try to log in again through the firebase CLI. The login is very easy, then we will be directed to which Gmail account will log in to Firebase. For more details, we can see in the picture below:

We can see in the picture above we managed to log in using the [email protected] account.

Then I will do firebase init again with the [email protected] account. Here I will be told to choose what project I will use in our forum-firebase application.

We can see in the section above in the part that I highlighted when this process we will be asked whether to use firebase.rules, firebase.rules is a file for the rules when using our database.

Well, you can enter to setup default if you have finished installing you can see the command like this:

Firestore

Firebase has a real-time database feature, but besides that, Firebase has a database system called firestore. Firestore was created to focus on covering the real-time database. Database systems that are built focus on improvements to the query side of the database. Firestore stores the data in the document, so later each database has a document. Then in the document, we can have a subdocument or often called collection. well, this is a fundamental difference from Firestore. in Firestore we don't collect in one large JSON data, but we will divide it up like document and collection. There are many queries that we can use at the Firestore as the tutorial progresses we will discuss and study them one by one.

Backend cloud function

We will move to the previous section, in this section we will use the backend cloud function. before we use the cloud function, we can choose when we do firebase init, that we are given the option to use typescript or javascript.

If we can see in the picture above, we have chosen the javascript programming language and here we will also use NPM.

After completing firebase init we will get a folder structure like the following:

From the picture above we can see there are two folders namely functions and public, we will use public folders to store something static and folder functions we usually use to store dynamic data.

• Functions folder

We will also make initial preparations for cloud functions, we can enter function folders and install some tools for us to use late. There are some things that we will install at the backend of the cloud function, we will first install express and handlebar as templates and to merge the two tools we will use consolidate. For more details, we can see in the example below:

We can use NPM to install these tools. to install it we can use this npm install express handlebars consolidate --save.

• Start using the cloud function

We have prepared the cloud function, now our job is how to use it in our forum application, here I will explain to you the parts that we have to make. I will make it in functions / index.js.

functions/index.js

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

const express = require('express');

const cons = require('consolidate');

const app = express();

app.engine('hsb', cons.handlesbar);
app.set('view engine', 'hbs');
app.set('views', './views');

app.get('/forum', function(req, res) {
    res.render('home')
})

exports.app = functions.https.onRequest(app);

• We will use the tools that we installed earlier, we will use express request('express'); and consolidate const cons = require('consolidate');.

• Then we can use the template engine from the handlebars which is 'hbs'. We can define hbs template as the engine template app.engine('hsb', cons.handlesbar);.

• We can set the extension to the .hbs file app.set('view engine', 'hbs'); and then we can set the directory that we will use to save the template in this way app.set('views', './views');. We can see folder views as shown below:

And keep in mind that the extension of the template to be rendered is .hbs, we can see the example in the image below:

• Create Routing and set env

In this section, we will learn how to make routing in the cloud function that we have created. We can see examples like the following

app.get('/forum', function(req, res) {
    res.render('home')
})

• We can use initialization from express in the variable app and to make a routine we can use the get () function at the beginning with the Path name '/forum' then the callback function function(req, res).

• Parameters of the res callback function, we can use to render templates res.render('home').
  
  

• Set rewrites

There are some things that we will manage by using rewrites on our forums application, rewrites are used so that our URL can use pretty URLs. we can set it on firebase.json, For more details, we can see the firebase.json file.

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "public",
    "rewrites": [{ // set rwrites
        "source": "**",
        "function": "app"
    }],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

• On the rewrites there are two keys that we will write the first one is "source" and the second is a "function": "app", this function is filled by a variable that we register as express, namely the app "function": "app".

We are done to make preparations in Firestore and cloud functions. In the next tutorial, we will start making features in the Firebase forum application

Curriculum

• Forum app

django#1, django#2, django#3, django#4, django#5, django#6, django#7, django#8, django#8, django#9, django#10, django#11

Proof of work done

https://github.com/milleaduski/firebase-forum