How to Deploy an App to Firebase With Angular CLI

How to Deploy an App to Firebase With Angular CLI

How to Deploy an App to Firebase With Angular CLI

How to Deploy an App to Firebase With Angular CLI

How to Deploy an App to Firebase With Angular CLI
How to Deploy an App to Firebase With Angular CLI
How to Deploy an App to Firebase With Angular CLI How to Deploy an App to Firebase With Angular CLI How to Deploy an App to Firebase With Angular CLI How to Deploy an App to Firebase With Angular CLI How to Deploy an App to Firebase With Angular CLI

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:

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

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.

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.

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

Firebase website screenshot

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.

Add a project in Firebase

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:

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.

Answer Yes to the interactive prompt.

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

Firebase CLI message about accessing your Google account

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

Firebase CLI Login Successful page

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:

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

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:

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:

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. 

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

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.