# 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:

 1 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:

 1 ng --version  2 3 4  _ _ ____ _ ___  5  / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|  6  / △ \ | '_ \ / _ | | | | |/ _ | '__| | | | | | |  7  / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |  8  /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|  9  |___/  10   11 12 Angular CLI: 6.0.8  13 Node: 10.7.0  14 OS: linux x64  15 Angular:  16 ...  17 18 Package Version  19 ------------------------------------------------------  20 @angular-devkit/architect 0.6.8  21 @angular-devkit/core 0.6.8  22 @angular-devkit/schematics 0.6.8  23 @schematics/angular 0.6.8  24 @schematics/update 0.6.8  25 rxjs 6.2.2  26 typescript 2.7.2  27  

### 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.

 1 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.

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.

 1 cd bucketlist  2 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:

 1 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

 1 firebase login 

Answer Yes to the interactive prompt.

 1 ? Allow Firebase to collect anonymous CLI usage and error reporting information?  2  Yes  3 4 Visit this URL on any device to log in:  5 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  6 7 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:

 1 firebase init 

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

 1 ######## #### ######## ######## ######## ### ###### ########  2  ## ## ## ## ## ## ## ## ## ## ##  3  ###### ## ######## ###### ######## ######### ###### ######  4  ## ## ## ## ## ## ## ## ## ## ##  5  ## #### ## ## ######## ######## ## ## ###### ########  6 7 You're about to initialize a Firebase project in this directory:  8   9  /home/vaatiesther/Desktop/bucketlist  10   11 ? Which Firebase CLI features do you want to setup for this folder? Press Space  12 to select features, then Enter to confirm your choices. Database: Deploy Firebas  13 e Realtime Database Rules, Hosting: Configure and deploy Firebase Hosting sites  14   15 === Project Setup  16   17 First, let's associate this project directory with a Firebase project.  18 You can create multiple project aliases by running firebase use --add,  19 but for now we'll just set up a default project.  20   21 ? Select a default Firebase project for this directory: Bucketlist (bucketlist-7  22 2e57)  23   24 === Database Setup  25   26 Firebase Realtime Database Rules allow you to define how your data should be  27 structured and when your data can be read from and written to.  28   29 ? What file should be used for Database Rules? database.rules.json  30 ✔ Database Rules for bucketlist-72e57 have been downloaded to database.rules.json.  31 Future modifications to database.rules.json will update Database Rules when you run  32 firebase deploy.  33   34 === Hosting Setup  35   36 Your public directory is the folder (relative to your project directory) that  37 will contain Hosting assets to be uploaded with firebase deploy. If you  38 have a build process for your assets, use your build's output directory.  39 40 ? What do you want to use as your public directory? public  41 ? Configure as a single-page app (rewrite all urls to /index.html)? Yes  42 ✔ Wrote public/index.html  43 44 i Writing configuration info to firebase.json...  45 i Writing project information to .firebaserc...  46 47 ✔ 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:

 1 {  2  "hosting": {  3  "public": "public",  4  "ignore": [  5  "firebase.json",  6  "**/.*",  7  "**/node_modules/**"  8  ],  9  "rewrites": [  10  {  11  "source": "**",  12  "destination": "/index.html"  13  }  14  ]  15  }  16 } 

### 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:

 1 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.

 1 firebase deploy  2 3 4 === Deploying to 'bucketlist-72e57'...  5 6 i deploying database, hosting  7 i database: checking rules syntax...  8 ✔ database: rules syntax for database bucketlist-72e57 is valid  9 i hosting: preparing public directory for upload...  10 ✔ hosting: 1 files uploaded successfully  11 i database: releasing rules...  12 ✔ database: rules for database bucketlist-72e57 released successfully  13 14 ✔ Deploy complete! 

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

 1 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.