Modular SDK (v9+) tree-shaking in Firebase - Mini Project: Build & Apply

Modular SDK (v9+) Tree-Shaking with Firebase

📖 Scenario: You are building a simple web app that uses Firebase for authentication and Firestore database. To keep your app fast and small, you want to use Firebase's Modular SDK (v9+) which supports tree-shaking. This means you only import the parts of Firebase you actually use.

🎯 Goal: Create a Firebase app setup using the Modular SDK (v9+) with tree-shaking. You will initialize Firebase, configure authentication, and set up Firestore with minimal imports to keep the bundle size small.

📋 What You'll Learn

Use Modular SDK imports from 'firebase/app', 'firebase/auth', and 'firebase/firestore'

Initialize Firebase app with given config object

Create an auth instance using getAuth

Create a db instance using getFirestore

Avoid importing entire Firebase namespaces to enable tree-shaking

💡 Why This Matters

🌍 Real World

Using Firebase Modular SDK with tree-shaking is essential for building fast, efficient web apps that only load the code they need.

💼 Career

Many companies use Firebase for backend services. Knowing how to use the Modular SDK properly is a valuable skill for frontend and full-stack developers to optimize app performance.

1

Create Firebase configuration object

Create a constant called firebaseConfig with the exact keys and values: apiKey: 'AIzaSyA-1234567890abcdef', authDomain: 'myapp.firebaseapp.com', projectId: 'myapp', storageBucket: 'myapp.appspot.com', messagingSenderId: '1234567890', appId: '1:1234567890:web:abcdef123456'.

Firebase

# Your code here

Need a hint?

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

2

Import and initialize Firebase app

Import initializeApp from 'firebase/app'. Then 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

Set up Firebase Authentication and Firestore

Import getAuth from 'firebase/auth' and getFirestore from 'firebase/firestore'. Create constants auth and db by calling getAuth(app) and getFirestore(app) respectively.

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 getAuth and getFirestore and create auth and db
// Your code here

Need a hint?

Import getAuth and getFirestore and create auth and db using the app instance.

4

Export Firebase instances for use in app

Add export statements to export the constants app, auth, and db so they can be used in other parts of your app.

Firebase

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } 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 auth = getAuth(app);
const db = getFirestore(app);

// Export app, auth, and db
// Your code here

Need a hint?

Use export { app, auth, db } to make these available outside this module.