How to add firebase to web app

FirebaseHow-ToBeginner · 3 min read

How to Add Firebase to Your Web App Quickly and Easily

To add Firebase to your web app, first create a Firebase project in the Firebase console, then add your app to get the configuration object. Next, include the Firebase SDK in your HTML and initialize Firebase with the config using initializeApp().

📐

Syntax

Here is the basic syntax to add Firebase to a web app:

import { initializeApp } from 'firebase/app'; - imports the Firebase core function.
const firebaseConfig = { ... }; - your app's Firebase configuration object.
const app = initializeApp(firebaseConfig); - initializes Firebase with your config.

javascript

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);

💻

Example

This example shows how to add Firebase to a simple web page. It includes the Firebase SDK via CDN, sets up the config, and initializes Firebase.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Firebase Web App</title>
  <script type="module">
    import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.4.0/firebase-app.js';

    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_PROJECT_ID.appspot.com",
      messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
      appId: "YOUR_APP_ID"
    };

    const app = initializeApp(firebaseConfig);
    console.log('Firebase initialized:', app.name);
  </script>
</head>
<body>
  <h1>Firebase Initialized</h1>
  <p>Check the browser console for confirmation.</p>
</body>
</html>

Output

Firebase initialized: [DEFAULT]

⚠️

Common Pitfalls

Common mistakes when adding Firebase to a web app include:

Using incorrect or missing Firebase config values from the console.
Not importing the Firebase SDK correctly or using an outdated version.
Forgetting to initialize Firebase before using its services.
Mixing older Firebase SDK syntax with the new modular SDK.

javascript

/* Wrong: Using older Firebase syntax with new SDK */
import firebase from 'firebase/app';
firebase.initializeApp(firebaseConfig); // This is legacy and may cause errors

/* Right: Use modular SDK syntax */
import { initializeApp } from 'firebase/app';
const app = initializeApp(firebaseConfig);

📊

Quick Reference

Steps to add Firebase to your web app:

Create a Firebase project at Firebase Console.
Add a web app to the project and copy the config object.
Include Firebase SDK via CDN or npm.
Initialize Firebase with initializeApp(firebaseConfig).

✅

Key Takeaways

Create a Firebase project and get your web app config from the Firebase console.

Include the Firebase JavaScript SDK and initialize Firebase with your config.

Use the new modular SDK syntax with initializeApp for best practice.

Check your config values carefully to avoid initialization errors.

Always verify Firebase is initialized by checking the browser console.