🔧 Firebase Project Setup

Introduction

Firebase Project Setup is the foundation for building scalable, serverless applications. It involves creating a Firebase project, configuring services, and setting up authentication and databases.

Key Learning Outcomes

By the end of this lesson, you'll understand:

• Creating and configuring Firebase projects

• Installing Firebase CLI and SDKs

• Initializing Firestore, Realtime Database, Storage, and Functions

• Setting up authentication providers

• Configuring project permissions and API access

• Managing development, staging, and production environments

What is Firebase?

Firebase is Google's comprehensive platform for building web and mobile applications with:

• **Real-time Database**: NoSQL database with real-time synchronization

• **Cloud Firestore**: Modern, scalable NoSQL database

• **Authentication**: Built-in user authentication with multiple providers

• **Cloud Storage**: File storage with security rules

• **Cloud Functions**: Serverless backend functions

• **Hosting**: Global CDN for web content

• **Analytics**: App analytics and performance monitoring

Step 1: Create a Firebase Project

Using Firebase Console

# Login to Firebase
firebase login

# Create new project (interactive)
firebase init

Firebase Console Setup

// 1. Go to https://console.firebase.google.com
// 2. Click "Create Project"
// 3. Enter project name: "my-app"
// 4. Enable Google Analytics (optional)
// 5. Create Firebase web app

Step 2: Install Firebase SDK

# Install Firebase CLI globally
npm install -g firebase-tools

# Install Firebase SDK in your project
npm install firebase

# Verify installation
firebase --version

Step 3: Initialize Firebase in Your Project

# Navigate to your project directory
cd my-app

# Initialize Firebase
firebase init

# Select features:
# ✓ Firestore
# ✓ Functions
# ✓ Hosting
# ✓ Storage
# ✓ Emulators

Step 4: Configure Firebase SDK

Web Application Setup

// firebase-config.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";

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

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Initialize services
export const auth = getAuth(app);
export const db = getFirestore(app);
export const storage = getStorage(app);

Step 5: Initialize Services

Initialize Firestore

firebase init firestore

firestore.rules:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Initialize Storage

firebase init storage

storage.rules:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Step 6: Set Up Authentication

Enable Authentication Methods

// Enable in Firebase Console → Authentication → Sign-in method
// - Email/Password
// - Google
// - GitHub
// - Facebook
// - Phone

// Using Email/Password Auth
import { createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";

async function signUp(email, password) {
  try {
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    return userCredential.user;
  } catch (error) {
    console.error("Sign up error:", error);
  }
}

async function signIn(email, password) {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password);
    return userCredential.user;
  } catch (error) {
    console.error("Sign in error:", error);
  }
}

Step 7: Initialize Cloud Functions

firebase init functions

# Select language: JavaScript or TypeScript
# Select npm or yarn

functions/index.js:

const functions = require('firebase-functions');
const admin = require('firebase-admin');

admin.initializeApp();

exports.helloWorld = functions.https.onRequest((request, response) => {
  response.json({ message: "Hello from Firebase!" });
});

// Firestore trigger
exports.onUserCreate = functions.auth.user().onCreate((user) => {
  console.log("New user created:", user.uid);
  return admin.firestore().collection('users').doc(user.uid).set({
    email: user.email,
    createdAt: admin.firestore.FieldValue.serverTimestamp(),
  });
});

Firebase Configuration File

firebase.json

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

Deploy Your Project

# Deploy all services
firebase deploy

# Deploy only Firestore rules
firebase deploy --only firestore:rules

# Deploy only Cloud Functions
firebase deploy --only functions

# Deploy only hosting
firebase deploy --only hosting

Emulator Setup

Start Emulators Locally

# Initialize emulators
firebase init emulators

# Start emulators
firebase emulators:start

Connect to Emulators (Development)

import { connectAuthEmulator, getAuth } from "firebase/auth";
import { connectFirestoreEmulator, getFirestore } from "firebase/firestore";

const auth = getAuth();
const db = getFirestore();

if (process.env.NODE_ENV === 'development') {
  connectAuthEmulator(auth, 'http://localhost:9099');
  connectFirestoreEmulator(db, 'localhost', 8080);
}

Best Practices

1. Environment Configuration

// .env.local
REACT_APP_FIREBASE_API_KEY=...
REACT_APP_FIREBASE_AUTH_DOMAIN=...
REACT_APP_FIREBASE_PROJECT_ID=...

// In your app
const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
};

2. Separate Admin SDK

// admin-sdk.js (Backend only)
import admin from 'firebase-admin';

const serviceAccount = require('./serviceAccountKey.json');

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  projectId: 'your-app'
});

export const adminDb = admin.firestore();
export const adminAuth = admin.auth();

3. Multiple Environments

.firebaserc:

{
  "projects": {
    "default": "my-app-prod",
    "staging": "my-app-staging",
    "development": "my-app-dev"
  }
}

firebase deploy --project=staging
firebase deploy --project=development

Key Takeaways

• **Firebase Projects** provide integrated backend services for web and mobile apps

• **Firebase Console** is used for project management and configuration

• **Firebase SDK** needs proper initialization in your application code

• **Security Rules** protect your databases and storage

• **Firebase CLI** enables local development and deployment

• **Emulators** allow testing without live resources

• **Multiple environments** support development, staging, and production workflows

• **Service Account Keys** enable secure backend access

Next Steps

Explore Firebase Authentication for user management, or Firestore for real-time data storage.