How to Deploy an App to Firebase With Angular CLI

Angular CLI is a command-line interface for Angular and one of the easiest ways to get your app started. The beauty of using Angular CLI is that it lets you focus on your code, without having to worry about the structure of your application, since all the necessary files are generated for you.

It is very easy to create production-ready applications with Angular CLI. On the other hand, Firebase makes it fast to host applications. In addition, Firebase has a lot of features and a free plan that lets you experiment with the platform without being tied to a paid plan.

The free plan has the following features:

• A/B testing


• analytics


• app indexing


• authentication


• cloud messaging


• crash analytics


• invites


• performance monitoring


• predictions
  
  

Prerequisites

In order to run Angular CLI, you must have Node.js 6.9 and NPM 3 or higher installed on your system. If you don't have Node.js installed, please visit the Node.js website to find instructions on how to install Node.js on your operating system.

You should also have a basic understanding of the following:

• object-oriented programming 
  
  


• JavaScript or TypeScript
  
  

Installing Angular CLI

Installing Angular CLI is as easy as:

npm install -g @angular/cli

The above command installs the latest version of Angular. To validate the successful installation of Angular CLI, simply issue the following command:

ng --version


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 6.0.8
Node: 10.7.0
OS: linux x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.6.8
@angular-devkit/core         0.6.8
@angular-devkit/schematics   0.6.8
@schematics/angular          0.6.8
@schematics/update           0.6.8
rxjs                         6.2.2
typescript                   2.7.2
    

Creating an Angular Application

Now that you have Angular CLI installed, we can start developing our application. In this tutorial, we will not dive into the components that make up an Angular CLI project since this post is mostly about deploying to Firebase.

To create a new application, simply run ng new [name_of_project], where you replace name_of_project with the name of your application.

ng new bucketlist

This will create all the files needed to get started. As you can see, Angular CLI has created a lot of files that you would otherwise create yourself in earlier versions, i.e. Angular v1.

Running Your Application

To view your application in the browser, navigate to the project folder and run ng -serve. This command is used to serve an application locally.

cd bucketlist
ng -serve

Now navigate to http://localhost:4200/ to see your application in action. Any changes you make to your application are reloaded in your browser, so you don't have to keep running the application.

Deployment

Now that we've created our app, it's time to deploy it. We're going to follow the following steps:

• create a Firebase Project


• install Firebase tools


• build for production


• deploy to Firebase
  
  

Creating a Firebase Application

To start, you will need to have a Firebase account. If you don't have one, go sign up for a free account now.

On the Firebase dashboard, create a new project as shown below. You can simply give it the same name as your Angular app. This will make it easy, especially if you have a lot of projects on the Firebase dashboard.

Install Firebase Command Tools

Firebase makes it easy to set up hosting as it provides you with all the steps to follow along. To install the Firebase command tools, simply run:

npm install -g firebase-tools

Note: You should be in your project directory when you issue this command so that the tools will be installed in your project.

Authenticate Firebase

Log in to Firebase.

firebase login

Answer Yes to the interactive prompt.

? Allow Firebase to collect anonymous CLI usage and error reporting information?
 Yes

Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd47bqnekij5i8b5pr03ho849e6.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloudplatformprojects.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ffirebase%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&state=486130067&redirect_uri=http%3A%2F%2Flocalhost%3A9005

Waiting for authentication…

Next, the Firebase CLI tool will open a browser where you will be asked to allow Firebase to authenticate via Google Mail.

If the authentication is successful, you will get the following interface in your browser at http://localhost:9005/.

Initialize the Project

The next step is to initialize your Firebase project. This will link your local Angular app to the Firebase application you just created. To do this, simply run:

firebase init

Choose Hosting as the feature you want to set up for the project since we are only interested in Firebase hosting.

######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /home/vaatiesther/Desktop/bucketlist

? Which Firebase CLI features do you want to setup for this folder? Press Space 
to select features, then Enter to confirm your choices. Database: Deploy Firebas
e Realtime Database Rules, Hosting: Configure and deploy Firebase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Select a default Firebase project for this directory: Bucketlist (bucketlist-7
2e57)

=== Database Setup

Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.

? What file should be used for Database Rules? database.rules.json
✔  Database Rules for bucketlist-72e57 have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

This command will create two files:

• 
  .firebaserc
  


• 
  .firebase.json
  
  

These two files contain the Firebase configurations and some important information about your app.

The JSON file should look like this:

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Building for Production

Angular CLI provides the ng build --prod command, which initiates a production build. This command creates a dist folder which contains all the files for serving the app. This process is important in order to make your app lighter and faster in the loading of web pages. To do this, simply issue:

ng build --prod

Deploy the App!

If you've followed all the steps until now, our local Angular app is now linked to Firebase, and you can easily push your files the way you do with Git. Simply execute the firebase deploy command to deploy your app. 

firebase deploy


=== Deploying to 'bucketlist-72e57'...

i  deploying database, hosting
i  database: checking rules syntax...
✔  database: rules syntax for database bucketlist-72e57 is valid
i  hosting: preparing public directory for upload...
✔  hosting: 1 files uploaded successfully
i  database: releasing rules...
✔  database: rules for database bucketlist-72e57 released successfully

✔  Deploy complete!

Your app is now deployed, and you can view it by issuing the following command.

firebase open hosting:site

Conclusion

As you have seen, it's very easy to get started with Firebase as there is very little setup needed to get your app hosted. And it takes much less time than setting up traditional hosting! Angular is a great framework for app development—it has really evolved over the years and each update comes with more advanced features and bug fixes. 

For more information, visit the Official Angular site and Firebase and explore the possibilities of using these two technologies together.