Introduction

Welcome to the first article in our series on building modern web applications using Angular and Firebase in idx.dev. This series is designed to guide you through creating a real-time, serverless application from scratch while leveraging the seamless integration of Firebase and Angular. By the end of the series, you’ll have a fully functional application hosted in the cloud.

What is Firebase?

Firebase is a comprehensive platform provided by Google that offers a suite of tools to build, scale, and improve your applications. From real-time databases to authentication and cloud storage, Firebase simplifies backend development, enabling you to focus on building great user experiences.

What is idx.dev?

idx.dev is a powerful cloud-based Integrated Development Environment (IDE) tailored for modern web developers. It allows you to build, run, and deploy applications entirely in the cloud, eliminating the need for local installations.

In this article, we will:

Set up a Firebase project.
Create an Angular application in idx.dev.
Integrate Firebase with Angular using AngularFire.
Verify the connection between Firebase and Angular.

To make it even easier to follow along, I’ve created a GitHub repository for this project. You can find the code and updates here: Eventify GitHub Repository. Clone it and follow along as we build this application step by step.

Let’s get started!

Step 1: Setting Up Firebase

Firebase will act as the backend for our application, providing a real-time database and authentication services.

1.1 Create a Firebase Project

Navigate to the Firebase Console.
Click on Create Project.
Enter your project name (e.g., Eventify).
Enable Gemini in Firebase (optional).
Disable Google Analytics for this project (optional) and click Continue.
Select an account (if you have multiple) and click on Create Project.

1.2 Enable Firestore Database

In the Firebase Console, go to Build > Firestore Database and click Create Database.
Choose a location and click the next button.
Select "Start in test mode" (you can secure it later).

1.3 Obtain Firebase Configuration Keys

In the Firebase Console, go to Project Settings (gear icon in the sidebar).
Scroll to Your Apps and click on the icon </> icon to add a web app.
- Enter a nickname (e.g., Eventify Web App) and click Register App.
Copy the Firebase configuration keys shown and save them. You’ll use them in your Angular project.

Step 2: Creating an Angular Project in idx.dev

Now, let’s set up the Angular project where we’ll integrate Firebase.

2.1 Set Up idx.dev

Go to idx.dev and sign in with your credentials.
Create a new workspace.
Click New Project and select Angular.
Name your project (e.g., eventify), choose the latest Angular version, and click Create.

Step 3: Adding Firebase to Angular

To connect your Angular application to Firebase, we’ll use AngularFire, an official Firebase library for Angular.

3.1 Install Firebase and AngularFire

Open the terminal in idx.dev.
Upgrade Angular by running the following commands:

   ng update @angular/cli
   ng update @angular/core

Run the following command to install Firebase and AngularFire:

   npm install firebase @angular/fire

3.2 Configure Firebase in Angular

Create an environments folder and create two files:
- Open src/environments/environment.ts.
- Open src/environments/environment.prod.ts.
Add your Firebase configuration keys to the environment file.

Open src/environments/environment.ts.

Replace its content with the following:

 export const environment = {
   firebase: {
     apiKey: "YOUR_API_KEY",
     authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
     projectId: "YOUR_PROJECT_ID",
     storageBucket: "YOUR_PROJECT_ID.appspot.com",
     messagingSenderId: "YOUR_SENDER_ID",
     appId: "YOUR_APP_ID",
   },
   production: false,
 };

Replace placeholders (YOUR_API_KEY, etc.) with the keys you copied from Firebase.

Open src/environments/environment.prod.ts and copy the same configuration.

3.3 Initialize Firebase in App Component

Open src/app/app.config.ts.
Update the file and provide Firebase:

   import {
     ApplicationConfig,
     provideZoneChangeDetection,
   } from "@angular/core";
   import { provideRouter } from "@angular/router";

   import { routes } from "./app.routes";
   import { provideFirebaseApp } from "@angular/fire/app";
   import { initializeApp } from "firebase/app";
   import { getFirestore, provideFirestore } from "@angular/fire/firestore";
   import { getAuth, provideAuth } from "@angular/fire/auth";

   import { environment } from "../environments/environment";

   export const appConfig: ApplicationConfig = {
     providers: [
       provideZoneChangeDetection({ eventCoalescing: true }),
       provideRouter(routes),
       provideFirebaseApp(() => initializeApp(environment.firebase)),
       provideFirestore(() => getFirestore()),
       provideAuth(() => getAuth()),
     ],
   };

Step 4: Verifying Firebase Connection

Let’s test the connection between Firebase and your Angular application.

4.1 Display Firebase Data in the Application

Open src/app/app.component.ts.
Replace its content with the following:

   import { CommonModule } from "@angular/common";
   import { Component } from "@angular/core";
   import {
     Firestore,
     collection,
     collectionData,
   } from "@angular/fire/firestore";
   import { Observable } from "rxjs";

   @Component({
     selector: "app-root",
     imports: [CommonModule],
     templateUrl: "./app.component.html",
     styleUrl: "./app.component.css",
   })
   export class AppComponent {
     events$: Observable<any[]>;

     constructor(firestore: Firestore) {
       const eventsCollection = collection(firestore, "events");
       this.events$ = collectionData(eventsCollection);
     }
   }

Open the browser and verify the app runs without errors.
To test, add a sample document in Firestore:

Go to the Firestore Database in the Firebase Console.
Click Start Collection and name it events.
Click the Auto-ID link to generate the Document ID.
Add a document with a name field (e.g., { name: 'Sample Event' }) and click the Save button.

You should see "Sample Event" displayed on the page.

Conclusion

In this article, you successfully laid the foundation for your Firebase and Angular application. Here’s what you accomplished:

Set up a Firebase project and enabled Firestore.
Created an Angular project in idx.dev.
Configured Firebase using AngularFire and displayed data from Firestore in your Angular application.

This initial setup prepares you for building advanced features like authentication, real-time updates, and cloud functions in future articles. In the next installment, we’ll dive into implementing Firebase Authentication to handle user login and registration. Stay tuned!

👋 Let's Connect!

If you found this article useful, let's connect:

🔗 Follow me on LinkedIn
💻 Check out my GitHub
☕ Buy me a coffee

Getting Started with Firebase and Angular in idx.dev