Introduction

This is the opening piece in a series focused on crafting contemporary web applications with Angular and Firebase inside idx.dev. The series walks through building a real-time, serverless app from the ground up, highlighting how smoothly Firebase and Angular work together. When you finish the series, you'll have a working application deployed to the cloud.

Understanding Firebase

Firebase is Google's all-in-one platform that provides a collection of services for building, scaling, and refining your applications. Whether it's a real-time database, user authentication, or cloud storage, Firebase takes care of much of the backend work so you can concentrate on creating a great user interface.

Understanding idx.dev

idx.dev is a cloud-native Integrated Development Environment (IDE) designed for the modern web developer. It enables you to develop, execute, and deploy your projects entirely online, so there’s no need for anything installed locally.

The following tasks are covered in this article:

  • Establishing a new Firebase project.
  • Building an Angular app inside idx.dev.
  • Connecting Firebase to Angular through AngularFire.
  • Confirming that the Firebase connection works.

To make it simpler to follow along, I've prepared a GitHub repository for this project. You can find the code and any updates here: Eventify GitHub Repository. Feel free to clone it and follow along as we construct this application step by step.

Let's begin.

Step 1: Setting Up Firebase

Firebase serves as the backend for our application, offering a real-time database and authentication capabilities.

1.1 Create a Firebase Project

  1. Go to the Firebase Console.
  2. Select Create Project.
  3. Give your project a name (such as Eventify).
  4. It's optional to enable Gemini in Firebase.
  5. Analytics for Google can be turned off for this project (also optional), then click Continue.
  6. Pick your account if you have multiple, then click Create Project.

1.2 Enable Firestore Database

  1. Within the Firebase Console, navigate to Build > Firestore Database and press Create Database.
  2. Select a location and hit the next button.
  3. Choose "Start in test mode" (you can implement security rules later).

1.3 Obtain Firebase Configuration Keys

  1. In the Firebase Console, navigate to Project Settings (using the gear icon on the sidebar).
  2. Go down to Your Apps and click the </> icon to add a web application.
    • Provide a nickname (like Eventify Web App) and click Register App.
  3. Copy the Firebase configuration keys that appear and keep them safe. They will be required for your Angular project.

Step 2: Creating an Angular Project in idx.dev

Next, we'll prepare the Angular project where Firebase will be integrated.

2.1 Set Up idx.dev

  1. Visit idx.dev and log in using your credentials.
  2. Create a new workspace.
  3. Hit New Project and pick Angular.
  4. Give your project a name (e.g., eventify), select the most recent Angular version, and click Create.

Step 3: Adding Firebase to Angular

To link your Angular app with Firebase, we'll use AngularFire, which is the official Firebase library designed for Angular.

3.1 Install Firebase and AngularFire

  1. Open the terminal within idx.dev.
  2. Run the following commands to upgrade Angular: 
   ng update @angular/cli
   ng update @angular/core
Enter fullscreen mode Exit fullscreen mode
  1. Use the following command to install both Firebase and AngularFire: 
   npm install firebase @angular/fire
Enter fullscreen mode Exit fullscreen mode

3.2 Configure Firebase in Angular

  1. Make an environments directory and within it, create two files:
    • src/environments/environment.ts
    • src/environments/environment.prod.ts
  2. Place your Firebase configuration keys into the environment file.
  • Open src/environments/environment.ts.

  • Substitute its current content with the code shown below:

     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,
 };

  • Swap out the placeholders (YOUR_API_KEY, etc.) for the actual keys you copied from Firebase.

  1. Then, open src/environments/environment.prod.ts and paste the same configuration there.

3.3 Initialize Firebase in App Component

  1. Open the file src/app/app.config.ts.
  2. Modify it to 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()),
     ],
   };
Enter fullscreen mode Exit fullscreen mode

Step 4: Verifying Firebase Connection

Let's check that Firebase and your Angular application are properly connected.

4.1 Display Firebase Data in the Application

  1. Open src/app/app.component.ts.

  2. Replace its content with the following code:

   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);
     }
   }
Enter fullscreen mode Exit fullscreen mode

  1. Open the browser to check that the app runs without any issues.

  2. To verify the connection, create a sample document in Firestore:

  • In the Firebase Console, navigate to the Firestore Database.
  • Press Start Collection and call it events.
  • Use the Auto-ID link to generate the Document ID.
  • Add a field named name (like { name: 'Sample Event' }), then hit the Save button.

The text "Sample Event" should now be visible on your page.

Conclusion

With this article, you've successfully built the foundational structure for your Firebase and Angular application. Here's a summary of what you achieved:

  1. Created a Firebase project and activated Firestore.
  2. Constructed an Angular project within idx.dev.
  3. Set up Firebase using AngularFire and presented data from Firestore in your Angular application.

This groundwork readies you for adding sophisticated features like authentication, real-time data sync, and cloud functions in the upcoming articles. In the next part, we'll explore implementing Firebase Authentication for user login and registration processes. Stay tuned!

👋 Let's Connect!

If this article was helpful to you, let's keep in touch:

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