Connecting to Firebase

Connecting to Firebase

Firebase is a backend-as-a-service by Google. It provides a real-time database, authentication, hosting, and more — all without needing to build your own server. Let's connect our Angular app to Firebase.

Step 1: Create a Firebase Project

1. Go to console.firebase.google.com
2. Click "Add Project"
3. Give your project a name (e.g., "my-angular-app")
4. Click "Create Project"

Step 2: Get Your Firebase Config

1. In the Firebase Console, click the gear icon → Project Settings
2. Scroll to "Your apps" → Click the web icon (</>)
3. Register an app and copy the config object

// Your Firebase config will look like this:
const firebaseConfig = {
    apiKey: "AIzaSy...",
    authDomain: "my-app.firebaseapp.com",
    databaseURL: "https://my-app.firebaseio.com",
    projectId: "my-app",
    storageBucket: "my-app.appspot.com",
    messagingSenderId: "123456789",
    appId: "1:123456789:web:abc123"
};

Step 3: Set Up Firebase Realtime Database

1. In the Firebase Console, go to Realtime Database
2. Click "Create Database"
3. Choose "Start in test mode" (for development)

Test mode rules (allows read/write for 30 days — for development only):

{
    "rules": {
        ".read": true,
        ".write": true
    }
}

Step 4: Store Config in Environment

// src/environments/environment.ts
export const environment = {
    production: false,
    firebase: {
        apiKey: "AIzaSy...",
        authDomain: "my-app.firebaseapp.com",
        databaseURL: "https://my-app-default-rtdb.firebaseio.com",
        projectId: "my-app",
        storageBucket: "my-app.appspot.com",
        messagingSenderId: "123456789",
        appId: "1:123456789:web:abc123"
    }
};

Step 5: Configure HttpClient for Firebase

For simple REST access to Firebase's Realtime Database, you can use Angular's HttpClient directly — no extra libraries needed:

// app.module.ts
import { HttpClientModule } from '@angular/common/http';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule,
        AppRoutingModule,
    ],
    // ...
})

Firebase REST API Endpoints

Firebase's Realtime Database exposes a REST API at your databaseURL:

// Base URL format:
https://your-project.firebaseio.com/

// Access a collection:
https://your-project.firebaseio.com/posts.json

// Access a specific item:
https://your-project.firebaseio.com/posts/-NxAbc123.json

The .json extension is required — it tells Firebase to return JSON data.

Testing the Connection

// test in a component
import { HttpClient } from '@angular/common/http';
import { environment } from '../../environments/environment';

export class TestComponent implements OnInit {
    dbUrl = environment.firebase.databaseURL;

    constructor(private http: HttpClient) {}

    ngOnInit(): void {
        // Write test data
        this.http.put(`${this.dbUrl}/test.json`, { message: 'Hello Firebase!' })
            .subscribe(res => console.log('Written:', res));

        // Read it back
        this.http.get(`${this.dbUrl}/test.json`)
            .subscribe(data => console.log('Read:', data));
    }
}

Key Takeaways

• Firebase provides a backend without building a server
• Create a project at console.firebase.google.com
• Store the Firebase config in your environment file
• Use HttpClient to talk to Firebase's REST API
• Add .json to all Firebase REST URLs
• Use test-mode rules during development (switch to secure rules for production)