Building a Web App with Angular 4 and Firebase

This is the first in a series of articles in which we’ll use Angular and Firebase to build a simple project management and timekeeping application. In addition to learning more about Angular and Firebase, you’ll have a nice little app that you can modify to suit your needs.

I’m going to assume you’re familiar with the following technologies, but if not, follow the links below and come back when you’re ready.

Note: Even if you’re still a beginner with the above technologies, I’ll try to keep things simple enough that you should be able to follow along.

If you’re already familiar with Angular and Firebase, feel free to skip over the next couple sections.

What is Angular?

AngularAngular, designed by Google, began as a JavaScript framework for creating and maintaining complex applications in JavaScript and was originally called AngularJS. When the second version was released, it was vastly different to the extent that it caused much disagreement in the community. Many improvements had been made for version 2, but the new syntax and conventions required developers to relearn many of the original language constructs. If you’re new to Angular, then this could be considered good news, because it means you didn’t spend time learning older, outdated concepts. But you can imagine that developers who had invested a lot of time and effort in the first version were not all happy.

Today — as of this writing — Angular is currently at version 4. If you’re wondering what happened to Angular 3, it was  skipped due to incompatibilities with the newest version of TypeScript. TypeScript is basically JavaScript with support for strongly typed variables. It was created by Microsoft, and in a rare collaboration of these two tech giants, Google has decided to promote TypeScript’s use with Angular. That’s certainly a compelling reason to use it. Most Angular tutorials will make use of TypeScript — including this one — although it is possible to use plain JavaScript or Google’s own Dart language as well.

What is Firebase?

FirebaseAny decently complex application is going to need some form of persistent data storage. Relational databases such as those provided by MS SQL Server and MySQL are sometimes overkill, and they don’t always work well when speed and performance are of the utmost concern. In these cases, we want something that can be quickly queried and passed around like XML or JSON, but we don’t want to maintain a large number of files or write APIs to read and update them. This is where NoSQL, non-relational databases like Firebase shine.

Firebase, another Google product, is basically a JSON tree that can be accessed through various APIs. Some of these APIs make use of service workers to maintain a consistent connection. That means that when an update is made to the data, your application is immediately updated to reflect the change.

Firebase is free as long as you don’t require a lot of storage space (more than 1 GB) or a lot of bandwidth (more than 10 GB/month). There are paid plans if you require more.

Setting Up a New Angular Project

If you plan on being a serious Angular developer, you’ll want to make sure you have the Angular CLI (Command Line Interface) installed. It’s possible to work without it, but you’ll be spending a lot of time with unnecessary setup and boilerplate code. So, let’s go ahead and install it if you haven’t already.

Install NPM and Angular CLI

Open your preferred command line tool, and enter npm -v. If you get a response that shows a version number, then you’re probably good to go.

If NPM is not installed, close your command line tool and download Node.js and NPM. The LTS version is recommended. Run the installer — default options are fine — then re-open your command line tool and try npm -v again.

Now that NPM is installed, we can install Angular CLI. Just enter the following command:

npm install -g @angular/cli
Note: If you have any problems, try running your shell as Administrator. Also, if you’re using PowerShell, you’ll need to enclose @angular/cli in quotes.

Scaffold Out a New Project

Assuming everything went well, we can finally get started on our project. Let’s create a new directory and enter it. First, change to your home folder or other location where you save projects such as this. Then run the following.

mkdir angular-firebase-tutorial
cd angular-firebase-tutorial

Of course, you can name the directory whatever you like, but we’ll refer to it as angular-firebase-tutorial in these articles.

Next, we’ll use Angular CLI to scaffold out some common starter files. We do this with the ng new command followed by a name for the project. Again, the name is up to you, but we’ll be using project-manager in these articles.

ng new project-manager

Let’s take a look at the files that were created. Open the project-manager directory in a code editor such as Visual Studio Code or Atom.

A Brief Explanation of the Files

Here is a quick description of some of the directories and files that you may be curious about.

Path Description
.editorconfig A configuration file that tells compatible code editors to indent with spaces or tabs, whether to remove trailing whitespace characters, and of other code styling rules.
package.json A file with information about the project. It’s used by NPM to determine which packages/dependencies to install.
tsconfig.json A configuration file with TypeScript settings.
e2e/ A directory for files related to end-to-end testing. Since this tutorial is primarily concerned with Angular, we won’t be going into much detail about testing, but if you have the time, you should learn more about Karma, Jasmine, and Protractor, as they are very important to building maintainable, bug-free apps.
node_modules/ The directory where NPM installs dependencies.
src/ This is the directory where our app’s source code lives and where most of your changes will be made.
src/index.html This is the main HTML file. Single-page apps will only have this one file, and all other HTML will be loaded into it.
src/main.ts The main TypeScript file is used to bootstrap the application and set up some initial configuration.
src/styles.css The main style sheet used by the app. Style resets and other global CSS should be added here.
src/app/ Your Angular components, directives, services, models, and just about anything else your app needs to do will be placed here.
src/app/app.component.ts This is a component to get you started. It includes references to an HTML template (app.component.html) and a style sheet (app.component.css).
src/app/app.module.ts The AppModule class is defined here and acts as an entry point for all the other app classes.
src/assets/ Assets such as images and fonts are placed here.
src/environments/ Configuration related to environments (production or dev) is added here. By default, a dev environment will be created, but when it comes time to deploy your app, you may want to revisit these files.

Start the App

To see what your app looks like, change to the project-manager directory (cd project-manager), then enter ng serve -o from the command line. This will start a development server and open the app in your default web browser. While the server is running, you can make changes to your files, and the browser will automatically refresh to show the latest updates.

To stop the server, press ctrl+c.

Setting Up Firebase

Before we start digging into the code for our project management app, we need to make sure that our Firebase database is set up and accessible. If you have a Google account, then you already have access to Firebase. Visit and log in to be taken to a page where you can manage your Firebase projects.

Click the Add Project button and pick a project name. That’s it! You now have a Firebase database ready to go. However, we do need to change a couple settings first.

Out of the box, your Firebase database is locked down to prevent just anyone from getting at your data. For our project management app, we want to allow users to log in with their Google account. To enable this, you need to go to the Authentication section of your Firebase project, and then to the Sign-in Method area. You’ll see that all the providers are disabled by default. Select the Google provider, enable it, and save your changes.

Firebase providers

Leave the Firebase console open for now. We’ll be coming back to it soon.

Adding AngularFire

OK, I know we’ve gone through a lot of setup, but there’s still one more thing we need to add. AngularFire is the official code library for Angular with Firebase, and it makes communication between Angular and Firebase much simpler.

To add it to our project, make sure you are in the project-manager directory in your command line tool and enter the following.

npm install firebase angularfire2 --save

You won’t notice any changes to your app yet, but now we have some additional APIs available to us that we’ll discuss later.

Hook Up the Angular Project to the Firebase Project

For Angular to know about our Firebase project, we need to add some details to the /src/app/app.module.ts file. Before the @NgModule declaration and after the imports, add the following.

const firebaseConfig = {
  apiKey: 'Your API Key',
  authDomain: '',
  databaseURL: '',
  projectId: 'your-project-id',
  storageBucket: '',
  messagingSenderId: 'Your Sender ID'

The areas in bold need to be replaced with your specific Firebase app details. You can find this information on the Overview page in your Firebase console by clicking the Add Firebase to your web app button.

There are three modules from AngularFire that we need to import into this file as well. If you look at the top of app.module.ts, you’ll see a list of imports. Add the following after the NgModule import.

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
Note: The order of the imports isn’t necessarily important, but it’s common practice to place third-party imports before your own custom class imports. AppComponent would be considered a custom class in this case.

In the @NgModule declaration, you’ll see an array called imports that currently contains a BrowserModule and nothing else. Update it so that it looks as follows.

 declarations: [
 imports: [
 providers: [],
 bootstrap: [AppComponent]

Save your changes. We’re finally done with the setup. Congratulations!

Next, we’ll build a project listing page to show a list of projects pulled from the database.

Continue to Part 2

Leave a Reply

Your email address will not be published. Required fields are marked *