How to Add Firebase to Your Javascript Project

A guide to using and implementing the Firebase Javascript SDK in your web applications.

As I delve deeper into creating my own web applications and projects, Firebase has come up many times as one of the best backend services to use. It provides developers with a variety of tools and services to help them develop quality apps, grow their user base, and earn profit. Firebase is built on Google’s infrastructure and is categorized as a NoSQL database program, which stores data in JSON-like documents.

Prerequisites

1. Make sure you have your preferred code editor or IDE installed.
2. Sign into Firebase using your Google account

If you don’t already have a JavaScript project, but still want to try out a Firebase product, you’re in luck. Firebase makes it easy for you to test out their product and you can download one of their quickstart samples!

1. Create a Firebase Project

Before adding Firebase to your JavaScript app, you need to create a Firebase project to connect to your app.

1. In the Firebase console, click Add project, then select or enter a Project name.
2. If you are creating a new project, you can edit the Project ID. Firebase automatically assigns a unique ID to your Firebase project. After Firebase provisions resources for your Firebase project, you cannot change your project ID.
3. Click Continue.
4. (Optional) You can set up Google Analytics for your project using any of the following Firebase products:

• Firebase Crashlytics
• Firebase Predictions
• Firebase Cloud Messaging
• Firebase In-App Messaging
• Firebase Remote Config
• Firebase A/B Testing

When prompted, select to use an existing Google Analytics account or to create a new account. If you choose to create a new account, select your Analytics reporting location, then accept the data sharing settings and Google Analytics terms for your project.

You can always set up Google Analytics later in the Integrations tab of your settings Project settings.

5. Click Create project and Firebase will automatically provision resources for your Firebase project. When the process completes, you’ll be taken to the overview page for your Firebase project in the Firebase console.

2. Register Your Application With Firebase

After you have a Firebase project, you can add your web app to it.

1. In the center of the Firebase console’s project overview page, click the Web icon (</>) to launch the setup.
2. Enter your app’s name. This name is an internal identifier and is only visible to you in the Firebase console.
3. (Optional) Set up Firebase Hosting for your web app. You can set this up later if you prefer to do that. You can also link your Firebase Web App to a Hosting site at any time in your Project settings. Firebase Hosting is not required for you to use Firebase products with your web app.
4. Click Register app.

3. Add Firebase SDKs and Initialize Firebase

Firebase provides JavaScript libraries for most Firebase products, including Remote Config, FCM, and more. You can add any of the available libraries to your app.

How you add Firebase SDKs to your Web app depends on whether you’re using Firebase Hosting for your app or not, what tooling you’re using with your app (like a module bundler), or if you’re configuring a Node.js app. For more help choosing between these alternatives, see Ways to add the Web SDKs to your app.

For the purpose of this blog, I will be delving into how add Firebase with npm:

1. Install the Firebase JavaScript SDK:

• If you don’t already have a package.json file, create one by running the following command from the root of your JavaScript project:

npm init

• Install the firebase npm package and save it to your package.json file by running:

npm install --save firebase

2. To include only specific Firebase products (like Authentication and Cloud Firestore), import Firebase modules:

// Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";
// If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
// import * as firebase from "firebase/app"

// If you enabled Analytics in your project, add the Firebase SDK for Analytics
import "firebase/analytics";

// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";

3. Initialize Firebase in your app:

// TODO: Replace the following with your app's Firebase project configuration
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Configuring your Firebase app can be a little confusing if you have not done it before.

To initialize Firebase in your app, you need to provide your app’s Firebase project configuration. You can obtain your Firebase config object at any time.

Here’s the format of a config object with all of the necessary services enabled:

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

Here’s a config object with example values:

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
  authDomain: "myapp-project-123.firebaseapp.com",
  databaseURL: "https://myapp-project-123.firebaseio.com",
  projectId: "myapp-project-123",
  storageBucket: "myapp-project-123.appspot.com",
  messagingSenderId: "65211879809",
  appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
  measurementId: "G-8GSGZQ44ST"
};

5. Learn More Before Getting Started

If you want to learn more about Firebase below are some helpful links:

• Explore sample Firebase apps.
• Get hands-on experience with the Firebase Web Codelab.
• Explore the open source code in GitHub.
• Review the supported environments for the Firebase JavaScript SDK.
• Speed up your development with additional Firebase-maintained open source libraries, like AngularFire, RxFire, and FirebaseUI for web.
• Prepare to launch your app:

Set up budget alerts for your project in the Google Cloud Console.

Monitor the Usage and billing dashboard in the Firebase console to get an overall picture of your project’s usage across multiple Firebase services.

Review the Firebase launch checklist.

6. Adding Firebase To An App that Already Exists

If you want to add the Firebase service to your app that already exists here are some helpful links:

• Host your app with Firebase Hosting.
• Set up a user authentication flow with Authentication.
• Store data, like user information, with Cloud Firestore or Realtime Database.
• Store files, like photos and videos, with Cloud Storage.
• Gain insight into your app’s performance issues with Performance Monitoring.
• Trigger backend code that runs in a secure environment with Cloud Functions.
• Send notifications with Cloud Messaging.

I hope you found this blog helpful if you are trying to implement and use Firebase in your projects. If you are looking for more information or you are stuck, Google has amazing and detailed documentation on Firebase here: https://firebase.google.com/docs