Book Image

Firebase Cookbook

By : Houssem Yahiaoui
Book Image

Firebase Cookbook

By: Houssem Yahiaoui

Overview of this book

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.
Table of Contents (15 chapters)
14
Firebase Cloud FireStore

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:
      <script 
src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js>
</script>
<script>
// Initialize Firebase
// TODO: Replace with your project's customized
code snippet
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};
firebase.initializeApp(config);
</script>

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.