Cloud-Powered Apps with Angular & Firebase: Part I

Getting started: Setup & Configuration

If you’ve built Angular apps or are going to build some, you will realize that your application needs more than just your client-side code. There are other aspects of the development process such as:

hosting, APIs, authentication, and deployments.

These aspects of the application and software development needs are usually delegated to back-end developers or DevOps engineers. Firebase by Google empowers front-end developers to quickly tackle these problems. Modern Web applications require more than just your client-side code; the ability to build applications fast, without managing infrastructure is important.

Firebase allows you to do exactly that. It’s backed by Google Cloud Platform and used by some of the largest apps today. Firebase is a suite of tools to help build and scale your Web application.

So, this is part I of a series of tutorials that will fully demonstrate, step by step how to built a cloud-powered angular web application with Angular and Firebase. In these series we’ll explore and demo the following:

• briefly take a look at the Firebase console, and see how we can manage different Firebase projects.
• Use Firebase Authentication to add authentication to our application.
• As we build out features, we’ll need to store data using Firebase Cloud Firestore along the way. we’ll use Firebase Cloud Storage to store files like images.
• We’ll learn and demo how to create our own serverless functions using Firebase Cloud Functions and deploy our angular web app using Firebase Hosting.

1. Dev Environment Setup

Assumptions

In this tutorial series, I will assume:

A basic understanding of Angular and Angular CLI assumes.

That you have Node, npm, and Git installed on your system. We will be using Node to install packages, and it’s needed for the Angular CLI.

I recommend using VSCode IDE

Generating Angular Application

I’m also going to use MDBootstrap Angular Free version for styling and theme. So follow these steps for installation and starting a new project:

Step 1: Create a new angular project using Angular CLI command:

ng new your-angular-project --routing --style=scss

Step 2: cd your-angular-project

Step 3: install the MDBoostrap angular package

npm i angular-bootstrap-md --save

• MDB Angular now requires @angular/cdk package:

npm install @angular/cdk

Step 4: to app.module.ts add

import { NgModule } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';@NgModule({
    imports: [
        MDBBootstrapModule.forRoot()
    ]
});

Step 5: install external libs

npm install -–save chart.js@2.5.0 @types/chart.js @types/chart.js @fortawesome/fontawesome-free hammerjs animate.css

Step 6: add below lines to angular.json:

"styles": [
    "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
    "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
    "node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
    "node_modules/animate.css/animate.css",
    "src/styles.scss"
],
"scripts": [
  "node_modules/chart.js/dist/Chart.js",
  "node_modules/hammerjs/hammer.min.js"
],

Step 9: Run server

ng serve --open

2. Firebase Console Overview

Let's configure a Firebase demo project to work with for this tutorial:

From the Firebase homepage, log into the Firebase console by clicking on the Go to Console link and log in with your Google account.

After logged in, you will be taken to the Firebase dashboard. Go ahead and create a new demo project.

You can name it whatever you like. If the name is not unique, Firebase will suggest a unique name for you. I named mine “ng-vanilla”. We won’t be using Google Analytics so unchecked or don’t select this option while you create the project.

On the Develop tab, you can see the different Firebase features that we will be using:

• Authentication to manage both the adamant and the registered users for our app.
• Cloud Firestore, as a database to store data and leverage its real-time capabilities.
• Firebase Storage, to store files.
• Firebase Hosting to easily deploy our app to the cloud.
• Firebase Functions to dive into the serverless world.

my Firebase Console

Now, let’s install the Firebase CLI since we will be working with Firebase. On your terminal, run the following command:

npm install -g firebase-tools

Then sign in to Firebase using your Google account by typing:

firebase login

The firebase login command connects your local machine to Firebase and grants you access to your Firebase projects. To test that authentication worked and to list all of your Firebase projects, run the following command:

firebase projects:list

3. Web Application Config

Now that we have created a Firebase project, and install the Firebase CLI tools. The next step is configuring our web application with firebase through the firebase console.

AngularFire is the official library for firebase in Angular. AngularFire will make it much easier for us to integrate firebase into our Angular application allowing us to easily use authentication, manage data, use realtime bindings and upload files. It’s observable based, so it uses the power of RxJs for maximum efficiency.

In your terminal, run the following command to install both AngularFire in the firebase,

npm install firebase @angular/fire

While that is installing, let’s go to add Firebase configuration to the environments variable of our angular application.

Open up our application using Visual Studio Code, go to /src/environments/environment.ts and add your Firebase configuration.

You can find your project Firebase configuration in the Firebase Console.

From the project overview page, click Project Settings. Scroll down to the area labeled Your apps.

Click on the web icon, I will add “your demo project name” as the app nickname.

You don’t have to set up hosting just yet and click on Register App. It would then suggest for you to copy and paste these scripts. But since we are using Angular firebase, we don’t need to do that. However, we would need these values.

Grab the necessary values and place them in the placeholder values in your environment file. Let’s grab the apiKey, authDomain, databaseURL, the projectID, storageBucket, messagingSenderId, And ppId. Paste these value on /src/environments/environment.ts

environment.ts file screenshot

Environment file

Let’s talk a little bit about this environment file. By default, the Angular CLI creates an src/environments folder with two environment files in it: environment.ts and environment.prod.ts

This tells ng build and ng serve “to replace the contents of the environment. ts file with the contents of the environment, depending on what environment your app is being stripped on. For instance, when developing locally or in a staging environment versus in a production environment.

Next: Setup @NgModule for the AngularFireModule

Open /src/app/app.module.ts, inject the Firebase providers, and specify your Firebase configuration.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase)
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

In your application, you always want to import the environment file, not the one that has the environment such as prod. And then let’s say we need to build a production configuration, all you need to do is to specify the environment when running your build like this:

ng build --configuration=prod

At this point, we should be all set. So, let’s test our app by running:

npm start

Let’s go on the browser, open up the developer tools, and verify that you don’t get any compilation errors or any console errors on your browser.

visit the page http://localhost:4200 to make sure everything works fine

Now that we have set up our angular web application with Firebase by adding configuration values, we first need to add authentication through the Firebase console.

If you want to can scroll without seeing the scroll bar. here is some CSS Style you can add to your style.scss to make scrollbar transparent:

style.scss — make scrollbar transparent

At this point, if you have issues running your app and would live to review mine. Check my demo full code on my GitHub repo.

Next:

Setup Firebase Authentication on Angular App