First Firebase integration - Commands & Configuration

Introduction

Firebase helps you add backend features like databases and user login to your app without managing servers. This guide shows how to start using Firebase in a simple app.

When you want to add user login to your mobile or web app quickly.

When you need a real-time database that updates instantly for all users.

When you want to store files like images or videos in the cloud easily.

When you want to track app usage and errors without setting up your own tools.

When you want to host a simple website with backend features included.

Config File - firebase.json

firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

This file configures Firebase Hosting for your app.

• public: folder with your website files.
• ignore: files Firebase should skip when deploying.
• rewrites: sends all requests to index.html for single-page apps.

Commands

Installs the Firebase command line tool globally so you can use Firebase commands anywhere.

Terminal

npm install -g firebase-tools

Expected Output

/usr/local/bin/firebase -> /usr/local/lib/node_modules/firebase-tools/bin/firebase

+ firebase-tools@latest

added 123 packages from 45 contributors in 12.3s

Logs you into your Google account to allow Firebase commands to access your projects.

Terminal

firebase login

Expected Output

✔  Success! Logged in as [e-mail]

Starts setup for your Firebase project. You choose features like Hosting or Firestore and link your project.

Terminal

firebase init

Expected Output

You're about to initialize a Firebase project in this directory.



? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm.

 ◯ Firestore: Configure security rules and indexes files for Firestore

 ◯ Functions: Configure and deploy Cloud Functions

 ◯ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys

 ◯ Storage: Configure a security rules file for Cloud Storage

 ◯ Emulators: Set up local emulators for Firebase features



? Please select an option: Hosting



? Select a default Firebase project for this directory:

  example-project



? What do you want to use as your public directory? public



? Configure as a single-page app (rewrite all urls to /index.html)? Yes



? Set up automatic builds and deploys with GitHub? No



Firebase initialization complete!

Uploads your app files and configuration to Firebase so your app is live on the internet.

Terminal

firebase deploy

Expected Output

=== Deploying to 'example-project'...



i  deploying hosting

i  hosting: preparing public directory for upload...

✔  hosting: public directory prepared.

✔  hosting: 3 files uploaded successfully



✔  Deploy complete!



Project Console: https://console.firebase.google.com/project/example-project/overview

Opens your deployed website in the default web browser so you can see your live app.

Terminal

firebase open hosting:site

Expected Output

No output (command runs silently)

Key Concept

If you remember nothing else from this pattern, remember: Firebase CLI lets you set up and deploy backend features quickly without managing servers.

Common Mistakes

Not running 'firebase login' before 'firebase init' or 'firebase deploy'

Firebase commands need your Google account access to link and deploy projects; without login, commands fail.

Always run 'firebase login' first to authenticate your account.

Choosing the wrong public directory during 'firebase init'

If the public directory does not contain your app files, deployment will upload empty or wrong files.

Set the public directory to the folder where your website files (like index.html) are located, usually 'public'.

Skipping the single-page app rewrite option when using frameworks like React or Angular

Without rewrite, routing inside your app breaks because Firebase tries to find files for each URL.

Choose 'Yes' to rewrite all URLs to index.html during 'firebase init' for single-page apps.

Summary

Install Firebase CLI to run Firebase commands from your terminal.

Log in to your Google account with 'firebase login' to access your projects.

Initialize your project with 'firebase init' to set up hosting and link your Firebase project.

Deploy your app to Firebase Hosting using 'firebase deploy' to make it live.

Open your live app in a browser with 'firebase open hosting:site'.

Practice

1. What is the first step to use Firebase services in your app?

easy

A. Initialize Firebase with your project configuration

B. Write data to the database

C. Create a user account

D. Deploy your app to the web

Solution

1. Step 1: Understand Firebase setup process

   Firebase services require initialization with your project details before use. Initializing Firebase with your config is the essential first step to enable services.

2. Final Answer:

   Initialize Firebase with your project configuration -> Option A

3. Quick Check:

   Firebase setup starts with initialization [OK]

Hint: Always start by initializing Firebase with your config [OK]

Common Mistakes:

• Trying to use services before initialization
• Skipping config setup
• Assuming Firebase works without project details

2. Which of the following is the correct way to initialize Firebase in JavaScript?

easy

A. firebase.configApp(config);

B. firebase.startApp(config);

C. firebase.initializeApp(config);

D. firebase.launchApp(config);

Solution

1. Step 1: Recall Firebase initialization syntax

   The official method to start Firebase is initializeApp with the config object. Only initializeApp is the correct Firebase method; others are invalid.

2. Final Answer:

   firebase.initializeApp(config); -> Option C

3. Quick Check:

   Use initializeApp to start Firebase [OK]

Hint: Remember: initializeApp starts Firebase, not startApp or others [OK]

Common Mistakes:

• Using incorrect method names
• Forgetting parentheses after method
• Passing wrong argument types

3. Given this code snippet:

const config = { apiKey: "abc123", authDomain: "myapp.firebaseapp.com" };
firebase.initializeApp(config);
console.log(firebase.apps.length);

What will be printed to the console?

medium

A. 0

B. Error

C. undefined

D. 1

Solution

1. Step 1: Understand firebase.apps array

   After initialization, firebase.apps contains all initialized app instances. Since initializeApp was called once, firebase.apps.length is 1.

2. Final Answer:

   1 -> Option D

3. Quick Check:

   One initialized app means length is 1 [OK]

Hint: firebase.apps.length shows how many apps are initialized [OK]

Common Mistakes:

• Assuming length is 0 before usage
• Expecting undefined instead of number
• Confusing apps array with config object

4. You wrote this code but get an error:

firebase.initializeApp();

What is the likely cause?

medium

A. Missing configuration object in initializeApp call

B. firebase library not imported

C. Calling initializeApp twice

D. Using wrong method name

Solution

1. Step 1: Check initializeApp requirements

   initializeApp requires a config object with project details. Calling initializeApp without config causes an error due to missing parameters.

2. Final Answer:

   Missing configuration object in initializeApp call -> Option A

3. Quick Check:

   initializeApp needs config object [OK]

Hint: Always pass config object to initializeApp [OK]

Common Mistakes:

• Forgetting to pass config
• Assuming default config is used
• Ignoring error messages about missing params

5. You want to integrate Firebase Authentication and Firestore in your app. Which is the correct sequence after importing Firebase?

hard

A. Initialize Firebase with config, then deploy app before using services

B. Initialize Firebase with config, then get Auth and Firestore instances

C. Get Auth and Firestore instances, then initialize Firebase

D. Deploy app first, then initialize Firebase and get services

Solution

1. Step 1: Initialization before service usage

   Firebase must be initialized with config before accessing any services like Auth or Firestore. After initialization, you can get instances of Auth and Firestore to use them in your app.

2. Final Answer:

   Initialize Firebase with config, then get Auth and Firestore instances -> Option B

3. Quick Check:

   Initialize first, then get services [OK]

Hint: Always initialize Firebase before accessing services [OK]

Common Mistakes:

• Trying to get services before initialization
• Deploying app before setup
• Confusing order of operations