Search icon
Cart icon
Close icon
You have no products in your basket yet
Save more on your purchases!
Savings automatically calculated. No voucher code required
Arrow left icon
All Products
Best Sellers
New Releases
Learning Hub
Free Learning
Arrow right icon
Over 7,000 tech titles at $9.99 each with AI-powered learning assistants on new releases
Firebase Cookbook
Firebase Cookbook

Firebase Cookbook: Over 70 recipes to help you create real-time web and mobile applications with Firebase

By Houssem Yahiaoui
$35.99 $9.99
Book Nov 2017 288 pages 1st Edition
$35.99 $9.99
$15.99 Monthly
$35.99 $9.99
$15.99 Monthly

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now
Table of content icon View table of contents Preview book icon Preview Book

Firebase Cookbook

Firebase - Getting Started

In this chapter, we will cover the following recipes:

  • Creating your first Firebase app
  • Adding Firebase to an existing frontend project
  • Integrating Firebase in the backend
  • Integrating Firebase in Android applications
  • Integrating Firebase in iOS applications


With the changing web and mobile scene, finding a suitable solution and technology that suits these climbing, fast needs is a must. From web development to mobile, the way we treat APIs, data, and security, and how we make users feel as engaged as we possibly can, is an urgent matter.

Going from a traditional setup to the cloud leads to many new patterns and architectures. Backend-as-a-service (BaaS), saves us from tons of useless setup and configuration and makes us think of nothing but our application logic.

Here we are introducing Firebase, a feature-heavy BaaS that will make creating your next awesome project a breeze. It will eliminate many tedious tasks and even manpower and will create your server-side code and give you a more secure, well-built platform that will completely change your thoughts about simplicity and scalability.

So, hold on tight and let's start our journey together by creating our first ever Firebase application.

Creating your first Firebase application

The process of creating a Firebase application is straightforward and mainly visual. This recipe will demonstrate the process of creating a Firebase application from scratch.

How to do it...

  1. As mentioned previously, we will use nothing but our clicking superpower and our favorite browser. First, head directly to the Firebase official website: A screenshot of the website page is as follows (Figure 1):
Figure 1: Firebase main screen
  1. Now, go to the top navigation bar and click on the SIGN IN button. This will lead to another page where you will be introduced to the Google authentication page showcased in the following figure, where you can select the most suitable account for your development work (Figure 2):
Figure 2: Firebase - Google authentication
  1. Now, after you select the most suitable Google account, you will find yourself redirected to this link: You will find all of your Firebase projects here, and you can introduce new projects as well (Figure 3):
Figure 3: Firebase console

Now, we do have two options: whether to import a Google project or simply start a fresh one. Let us learn how to start a new project.

  1. After clicking on the Add project plus button, you will be introduced to a model where you can add the Project name and Country/region. Keep in mind that the Project name and Country are variables, so you can change their values to the values that suit you best. You can see the page for creating the project in the following screenshot (Figure 4):
Figure 4: Firebase project creation
  1. After finishing the previous step, you will be redirected to your Firebase dashboard (Figure 5):
Figure 5: Firebase project dashboard

Congratulations! You've successfully created your first Firebase project. You have seen that the steps are really simple and are applicable to any Firebase project that you may create now or in the future.

Adding Firebase to an existing frontend project

Since Firebase is indeed a backend platform which typically acts as a service, it's not strange to see today's developer ditch the idea of creating a backend in general. They just focus on their frontend, which is actually the main idea behind serverless architecture nowadays.

How to do it...

In order to fully integrate Firebase into our frontend project, which is typically composed of nothing but .html, .css, and .js files, we will need to follow the given steps:

  1. Open your favorite code editor and write down the following:
// Initialize Firebase
// TODO: Replace with your project's customized
code snippet
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>",
databaseURL: "https://<DATABASE_NAME>",
storageBucket: "<BUCKET>",
messagingSenderId: "<SENDER_ID>",

So, what we've just done is simply imported the Firebase core library from its CDN and initialized it with a configuration object that Firebase gave us out of the box.

  1. Now, let's grab our pre-filled configuration form our Firebase project dashboard. The steps are actually easy--login to your Firebase project. (Figure 6):
Figure 6: Firebase Application Overview/Management section.
  1. Now, simply click on the magenta-colored button--Add Firebase to your web app--and a new model will appear holding all the required metadata (Figure 7):
Figure 7: Firebase project credentials
  1. Now simply copy and paste the code snippet on the screen into your index.html page and you're good to go.

Congratulations, you've successfully integrated Firebase within your Firebase project. Do keep in mind that Firebase services are very modular, so you won't have that heavyweight large dependency that you could simply exploit one--or at most four--resources from.

For the next module, we will see how we can integrate Firebase with our backend application.

How it works...

In the previous steps, we integrated the Firebase JavaScript client over our web page, and we also created the basic backbone configuration. Following the documentation guidelines, we copied/pasted the configuration script that would hold all the required tokens and API keys that Firebase was going to need in order to support our functionalities.

Integrating Firebase into the backend

Firebase is already a complete solution that can simply replace our backend, but sometimes, due to some requirements, you will find yourself integrating Firebase into the already present backend.

In this integration process, we will integrate Firebase services in a NodeJS backend application.

How to do it...

Since we're using NodeJS, integrating Firebase is one module setup away:

  1. Head directly to your terminal (cmd on Windows) and write down the following command:
     ~ cd project-directory
~/project-directory ~> npm install firebase --save

Now, the preceding command will go and download Firebase locally so you can access it directly using your normal commonJS workflow.

  1. Now, you will need to grab yourself a copy of your Firebase project configuration. This step is relatively easy as you can find the required configuration metadata by following the steps mentioned in the previous section, Adding Firebase to an existing frontend project, where we introduced how we can add Firebase to a frontend project.
  2. Head directly to your favorite code editor and write down the following:
      // [*] 1: requiring/importing Firebase in our 
const firebase = require('firebase');

// [*] 2:Initialising our application with our
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>",
storageBucket: "<BUCKET>",

Congratulations, you've successfully integrated Firebase within your backend workflow. I also want to point out that we can extend the workflow we have now using something called Firebase Admin SDK. We will cover how we integrate it and work with it in Chapter 7, Firebase Admin SDK.

How it works...

Similar to the frontend integration, in our backend we are doing the following:

  1. Using a node package manager or npm to install the Firebase commonJS library, where we will find all the necessary APIs.
  2. We're requiring/importing Firebase to be part our application, passing it to the configuration object that will hold all our API keys, links, and more.
  3. Lastly, we're initializing our application with the configuration object we just created.

Integrating Firebase in Android applications

With Android Studio 2.0 and up, the Android Studio IDE becomes more Firebase friendly and the process of integrating Firebase's different components is nothing but a pleasing experience.

Getting ready 

In order to create a Firebase Android-ready application, you need to make sure that Android Studio is present on your development machine. You can download the suitable version that suits your development machine operating system at

How to do it...

After successfully downloading the Android Studio, launch it and you will be greeted with the following screen (Figure 8):

Figure 8: Android Studio welcome screen

Now, let's create a new application. The process is straightforward, and is as follows:

  1. When you fill in the application name, application type, and suitable used SDK, your Android application development workflow will look something like this (Figure 9):
Figure 9: Android Studio after application launch
  1. Now the fun can begin. Head directly to the Android Studio menu bar. Click on the Tools menu option and you will see a menu item that includes many options including Firebase (Figure 10):
Figure 10: Integrating Firebase in our Android application
  1. After clicking on it, go to the right side, to the Assistant section. There you will find the Firebase section, with all the goods that it can offer (Figure 11):
Figure 11: Android Firebase integration - part one

In this section, you will see all that Firebase has to offer--there are different sections and areas as we talked about previously. Firebase is a set of services, which means that each part is a service in itself. This also means that you're free to select whatever service you want to include. For the sake of this chapter, we're taking the Realtime Database as the option to finalize the integration process.

The integration process used in this example is applicable to all sorts of Firebase services in the exact same way.
  1. After clicking on the Realtime Database option you will get a submenu with a simple explanation or description as to what the service actually does (Figure 12):
Figure 12: Android Firebase integration - part two
  1. Now, simply click on the Save and retrieve data link option and you will start a new process that will combine both authenticating as well as download and install the Firebase component in your application (Figure 13):
Figure 13: Firebase project integration - part three

You will need to configure your project by following the previous instructions. Next, you will need to authenticate and use the Gmail account related to your Firebase project.

  1. Once you have clicked on the link, you will need to select the Google account linked to your project. In doing so, you will need to authorize Android Studio to use your Google account. Then, whenever you approve those authorization rules, you will be redirected to the following page (Figure 14):
Figure 14: Firebase project integration - part four

Congratulations! Android Studio is now fully connected to your Google account. By now, you will see a new model popping up in your Android Studio. As mentioned previously, you will need to either select or create a new Firebase project. In our case, we have already created our awesome project, so we will only need to select it and hit the Connect to Firebase button (Figure 15).

Figure 15: Firebase project integration - part five

Now, Android Studio will take some seconds to connect to your project and configure your awesome application. Then you will get the following lovely green button from heaven, indicating that everything went smoothly (Figure 16).

Figure 16: Firebase project integration - part six

Congratulations! Your application is now fully connected and well prepared to host your Firebase logic; all you need to do next is to integrate the service you want the most and simply work with it. We will see all that and more starting from Chapter 11, Integrating Firebase with Android/iOS Natively.

Integrating Firebase in iOS applications

Integrating Firebase our iOS application involves adding the Firebase package similar to any other package you have probably worked with in the past.

Getting ready 

In order to create and integrate Firebase within your application, you will need to have a MacBook Pro or one of Apple's computer variants so that you can follow the upcoming steps; you will also need to install Xcode.

How to do it...

In order to create an iOS application, open Xcode and follow the given steps:

  1. Create a new project or open your already created project (Figure 17):
Figure 17: Xcode project opening/creation
  1. In our case, we're about to start a new project called firebasecookbook. It's going to be based on the Xcode single-view application project template.
In our application--or when it comes to an example provided in this book regarding Firebase and iOS--we will work with Swift instead. It's just a personal preference, but you can use the one that suits you best.
Figure 18: Xcode project creation

Don't forget to copy that Bundle Identifier, because we will need it in the next step. In this case, our Bundle Identifier is hcodex.firebasecookbook.

  1. Go to your Firebase dashboard and click on the Add Firebase to your iOS app button. After clicking on it, you will get a configuration model with some steps that will guide you in your Firebase iOS integration (Figure 19).
Figure 19: Xcode project creation
  1. Remember that bundle id or Bundle Identifier? Copy and paste that ID in its designated place and add a nickname for your application if you wish. Click on the REGISTER APP button.
  2. Next, we will need to download a special plist file called the GoogleService-info.plist file. This file will have all the necessary metadata that will be included in your project (Figure 20).
Figure 20: Firebase GoogleService-info.plist download
  1. Now simply copy and paste that file into your project (Figure 21):
Figure 21: Firebase GoogleService-info.plist in our application.
  1. After we have finished the file download and file integration, let's just install some dependencies. In this process, we will use CocoaPods as our package manager. Head directly to your project using your terminal:
      ~ cd project-directory
~/project-directory ~> pod init
To download and install CocoaPods on your macOS development machine, please follow the steps mentioned on the official website:

After you initialize your project with CocoaPods, you will find a newly created file named Podfile.

The Podfile is a specification that describes the dependencies of the targets of one or more Xcode projects.

  1. Now, you will need to edit the Podfile using your favorite code or text editor and add the following line:
      pod 'Firebase/Core'
  1. Now, save the file, go back to your terminal, and write down the following command:
       ~/project-directory ~> pod install 

This command will download and install all the required libraries and modules that Firebase needs to fire up within your application.

  1. Now, instead of your regular project, open another special project extension, as the following command shows:
       ~/project-directory ~> open project-name.xcworkspace
  1. We're one step behind. Now, in your application, go directly to your AppDelegate and simply import Firebase using the following code snippet:
      import Firebase
  1. Now, in the didFinishLaunchingWithOptions method, add the following code:

Congratulations! You've successfully integrated Firebase with your iOS application.

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • A Solution based approach that would help you create high-quality apps for your businesses
  • Harness the power of real-time database to create apps that work on multiple platforms
  • Build a customized solution for your app development challenges with Firebase


Do you feel tired just thinking or even hearing about backend technologies, authentication or the tedious task of deployment? Firebase is here to change the way you develop and make your app a first-class citizen of the cloud. This books takes a solution based approach by providing you recipes that would help you understand the features of Firebase and implement them in your existing web or mobile applications. We start-off by creating our first Firebase application and integrating its services into different platforms and environments for mobile as well as web applications. Then we deep dive into Real-time Database and Firebase Storage that allows your users to access data across various devices with realtive ease. With each chapter you will gradually create the building blocks of your application from securing your data with Firebase Rules to authenticating your users with O-Auth. Moving along we would explore modern application development techniques such as creating serverless applications with Firebase Cloud Functions or turning your traditional applications into progressive apps with Service workers. Finally you will learn how to create cross-platform mobile apps, integrate Firebase in native platforms, and learn how to monetize your mobile applications using Admob for Android and iOS.

What you will learn

Use Firebase Diverse Authentication systems Integrate easy, secure File Hosting using Firebase Storage services Make your application serverless using Firebase Cloud Functions Use the powerful Firebase Admin SDK for privilege management Use Firebase within NativeScript apps for cross-platform applications Modify, structure, save and serve data in and from Realtime Database Get acquainted with the newly introduce Cloud Firestore, a scalable database for your web and mobile applications

Product Details

Country selected

Publication date : Nov 29, 2017
Length 288 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781788296335
Vendor :
Category :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now

Product Details

Publication date : Nov 29, 2017
Length 288 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781788296335
Vendor :
Category :

Table of Contents

15 Chapters
Preface Chevron down icon Chevron up icon
1. Firebase - Getting Started Chevron down icon Chevron up icon
2. Firebase Real-Time Database Chevron down icon Chevron up icon
3. File Management with Firebase Storage Chevron down icon Chevron up icon
4. Firebase Authentication Chevron down icon Chevron up icon
5. Securing Application Flow with Firebase Rules Chevron down icon Chevron up icon
6. Progressive Applications Powered by Firebase Chevron down icon Chevron up icon
7. Firebase Admin SDK Chevron down icon Chevron up icon
8. Extend Firebase with Cloud Functions Chevron down icon Chevron up icon
9. We’re Done, Let’s Deploy Chevron down icon Chevron up icon
10. Integrating Firebase with NativeScript Chevron down icon Chevron up icon
11. Integrating Firebase with Android/iOS Natively Chevron down icon Chevron up icon
12. Hack Application's Growth Chevron down icon Chevron up icon
13. Adding Analytics and Maximizing Earnings Chevron down icon Chevron up icon
14. Firebase Cloud FireStore Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Empty star icon Empty star icon Empty star icon Empty star icon Empty star icon 0
(0 Ratings)
5 star 0%
4 star 0%
3 star 0%
2 star 0%
1 star 0%
Filter icon Filter
Top Reviews

Filter reviews by

No reviews found
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial


How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to
  • To contact us directly if a problem is not resolved, use
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.