Why framework integration matters in Firebase - See It in Action

Why framework integration matters

📖 Scenario: You are building a simple web app that uses Firebase to store user messages. To make your app work smoothly, you need to connect Firebase with your web framework properly.

🎯 Goal: Learn how to set up Firebase in a web project step-by-step, showing why integrating Firebase with your framework matters for easy data handling and app behavior.

📋 What You'll Learn

Create a Firebase configuration object with exact keys and values

Add a variable to hold the Firebase app initialization

Write code to add a message to Firebase Firestore

Complete the Firebase setup with proper export or usage

💡 Why This Matters

🌍 Real World

Connecting Firebase to your web framework allows your app to store and retrieve data easily, making your app interactive and dynamic.

💼 Career

Understanding Firebase integration is essential for frontend and full-stack developers working on modern web applications that require real-time data and cloud services.

1

Create Firebase configuration object

Create a constant called firebaseConfig with these exact key-value pairs: apiKey: "AIzaSyA-1234567890abcdef", authDomain: "myapp.firebaseapp.com", projectId: "myapp", storageBucket: "myapp.appspot.com", messagingSenderId: "1234567890", appId: "1:1234567890:web:abcdef123456".

Firebase

# Create the firebaseConfig object with the required keys and values
# Your code here

Need a hint?

Use const firebaseConfig = { ... } with the exact keys and values.

2

Initialize Firebase app

Import initializeApp from firebase/app and create a constant called app by calling initializeApp(firebaseConfig).

Firebase

const firebaseConfig = {
  apiKey: "AIzaSyA-1234567890abcdef",
  authDomain: "myapp.firebaseapp.com",
  projectId: "myapp",
  storageBucket: "myapp.appspot.com",
  messagingSenderId: "1234567890",
  appId: "1:1234567890:web:abcdef123456"
};

// Import initializeApp and initialize Firebase app
# Your code here

Need a hint?

Use import { initializeApp } from "firebase/app"; and then const app = initializeApp(firebaseConfig);

3

Add a message to Firestore

Import getFirestore and collection, addDoc from firebase/firestore. Create a constant db by calling getFirestore(app). Then write an async function called addMessage that adds a document with { text: "Hello Firebase!" } to the collection messages using addDoc.

Firebase

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "AIzaSyA-1234567890abcdef",
  authDomain: "myapp.firebaseapp.com",
  projectId: "myapp",
  storageBucket: "myapp.appspot.com",
  messagingSenderId: "1234567890",
  appId: "1:1234567890:web:abcdef123456"
};

const app = initializeApp(firebaseConfig);

// Import Firestore functions and create addMessage function
# Your code here

Need a hint?

Import Firestore functions, create db, then write async function addMessage() that uses addDoc to add the message.

4

Export addMessage function

Add the line export { addMessage }; at the end of the file to make the addMessage function available for use in your app.

Firebase

import { initializeApp } from "firebase/app";
import { getFirestore, collection, addDoc } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "AIzaSyA-1234567890abcdef",
  authDomain: "myapp.firebaseapp.com",
  projectId: "myapp",
  storageBucket: "myapp.appspot.com",
  messagingSenderId: "1234567890",
  appId: "1:1234567890:web:abcdef123456"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

async function addMessage() {
  await addDoc(collection(db, "messages"), { text: "Hello Firebase!" });
}

// Export addMessage function
# Your code here

Need a hint?

Use export { addMessage }; to make the function usable elsewhere.