FireBase: Things you must know to avoid wasting time as a Beginner

Firebase is like a free food for our hungry node projects.

Before Firebase, I used to host my projects in my home server to use it. But the problem is I cannot access it from the internet. There are many hosting services available but all come with trial period.

Initially, Firebase can only be used as a static web server, iOS and Android backend.

But later on they added the nodejs server feature. That means it can be used to built web apps and serve dynamic content to websites.

There are some things as a beginner I didn’t know and wasted lot of time debugging or trying to find the solution.

I just want to share them to avoid wasting time of many beginners.

So, lets get started!

Custom Domain

You have bought a new domain and now you want to use it for Firebase hosting.

Setting up custom domain can be tricky based on your domain registerer.

Custom domain can be used to host your website. And also to send custom authentication emails to the registered users.

Hosting Website

Head over to your Firebase project. Select Hosting from sidebar and clink on connect domain.

Enter your domain.

Click on continue.

Firebase gives some values that you need to update in your domain account.

The underlined part is very important to remember while adding records in your domain account.

Some DNS providers use full domain name and others just use @ like Godaddy.

If your DNS provider uses full domain name instead of @, then you can add the records given by Firebase as it is.

If your DNS provider uses @ instead of full domain name, then follow this:

If you want to connect your root domain for example: example.com, then instead of adding example.com as Firebase said, use @ in the name/host field.

If you want to connect to sub domain for example: sub.example.com, then instead of adding sub.example.com as Firebase said, use sub in the name/host field.

Now open your DNS provider and add the above records to your settings.

Now head back to your Firebase project click on Finish.

Wait for specified time to get your domain live!

For Authentication Emails:

Click on Authentication -> Templates -> Click on Edit icon.

Click on customize domain.

Enter the domain you want to use.

Update the Firebase records in your DNS.

Remember about the domain and sub domain that I have said in Hosting Website?

Follow same here:

1. test.skreweverything.com → In your DNS(for example in Godaddy), use test
2. firebase1._domainkey.test.skreweverything.com → In your DNS, use firebase1._domainkey.test
3. firebase2._domainkey.test.skreweverything.com → In your DNS, use firebase2._domainkey.test

So, just remember that you should not provide your root domain while entering records.

Cookies

Setting and getting cookies while using Firebase as a backend got me a headache.

If you observe, you can set cookies in your browser. But when you try to read the cookies in your node backend, you get empty cookies object.

So, how to set cookies in Firebase?

Solution:

The problem is: You cannot set any name for your cookies in firebase. Firebase only keeps the cookie with the name __session . All the cookies are discarded before hitting your custom node backend code.

So, if you want to set a cookie, name it as __session and store inside it.

firebase cloud function won't store cookie named other than "__session"

Dynamic Pages/Firebase rewrite path to function not working

If you are using express as your node backend, sometimes you want to send html based on the request instead of navigating through links.

For example, if you want to show login or home based on whether user logged-in or not on your root domain just like Facebook, you must be probably using app.get("*", (req, res) => {}); to catch all the url requests.

According to the user status, you either send Login html or Home html to the user.

But you may encounter a situation where you visit your firebase domain and you are not seeing the html you are sending through express . Instead you see the html present in your hosting public directory.

Solution:

If you have a static index.html in your public directory, just delete it.

Firebase uses index.html if there is any in your public directory and ignores your function in the respective path/url.

For example,

In your hosting directory

In every directory, there is a different index.html based on the page.

So, if you visit your app like:

https://<project name>.firebaseapp.com/LoginPage

Your app.get("*", (req, res) => {}); or app.get("/LoginPage", (req, res) => {}); won’t be called because the directory LoginPage already has a index.html file.

So, just copy all the index.html into another folder and name it appropriately. Later read that html and send it to the user.

This is how I structure my public directory.

Now, if the user visits

https://<project name>.firebaseapp.com/LoginPage . 

Your app.get("*", (req, res) => {}); or app.get("/LoginPage", (req, res) => {}); will be executed. Read the appropriatehtml using fs and send it to user.

When you deploy, you get this warning:

Don’t worry.

To invoke the function, the directory must not contain index.html!

Firebase rewrite path to function not working

Relative paths while using cloud functions

When you run firebase init functions , firebase creates a folder functions in your project directory. And for your hosting, you can select a directory.

Now, you want to link to a image or a javascript file in your html. The immediate question you ask yourself is:

Where should I put my static files and what is the path to it?

This took me trial and error method to find out.

The path starts from the public root directory.

For example, you need to include appropriate index.js in the appropriate html files.

In your HomePage.html:

<script type="text/javascript" src="/HomePage/index.js"></script>

Error while deploying functions locally

When you try firebase serve sometimes you might get error like

I still don’t know why functions: Failed to emulate error occurs.

But when you deploy it to the server like firebase deploy it works fine!

If anyone knows how to solve this error, comment it below.

[UPDATE — 12-OCT-2020] — I have written a complete step-by-step article on installing and using emulators of both Firebase and Google Cloud Platform.

[Firebase] Everything you need to know to setup Firebase and GCP emulators — Part 1

[GCP] Everything you need to know to setup Firebase and GCP emulators — Part 2

Cloud Functions as Webhook [error]

You can write functions and export it to use as a webhooks in cloud functions.

For example,

import express from 'express';
import * as functions from 'firebase-functions';

const app = express();
app.get('**', (req, res) => {
//To serve dynamic pages
});
export let main = functions.https.onRequest(app);
export let test = functions.https.onRequest((req, res) => {
    res.send("Test endpoint")
});
export let checkUser = functions.https.onRequest((req, res) => {
    res.send("Check User endpoint")
});

And in firebase.json

{
    "database": {
        "rules": "database.rules.json"
    },
    "hosting": {
        "public": "/dev",
        "ignore": [
            "firebase.json",
            "**/.*",
            "**/node_modules/**"
        ],
        "rewrites":[{
            "source": "**",
            "function": "main"
        }]
    }
}

In the above json , I wrote rewrites to invoke main function when ever someone reaches the website.

In my functions dashboard:

You can see the endpoints(url) of my functions.

We can directly visit the above urls to invoke the functions and get the output in your browser for testing.

But you get error when you try to visit the main endpoint. That is because I have wrote rewrites to my main function/endpoint and it is no longer treated as an endpoint.

So, if you try to visit your rewrites mentioned functions directly, the functions won’t get executed and also you get error.

Got any doubts/questions/suggestions? Comment down below.

Liked it? Then just hold the clap👏🏻 button for 10sec straight and share it!