Cory Rylan

My name is , Google Developer Expert, Speaker, Software Developer. Building Design Systems and Web Components.

Follow @coryrylan

Deploy Angular CLI Apps to Firebase

Cory Rylan

- 4 minutes


This article has been updated to the latest version Angular 17 and tested with Angular 16. The content is likely still applicable for all Angular 2 + versions.

In this post we re going to cover how to get a Angular application up and running and then deploy it to Firebase. First lets cover how to use the Angular CLI to help bootstrap our application's build process.

Angular CLI

The Angular CLI is an officially supported project by the Angular team. You can find more information at First we will install the Angular CLI tool. To install we install via NPM running the following command: npm install angular-cli -g. This will install the CLI globally to our machine to help us create new Angular projects.

Once installed we can create a new Angular app by running the following command: ng new my-cool-app. Next open your app in your favorite editor and you should see something similar to this:

New Angular CLI project Structure

Starting the CLI

Now running a command prompt at the root of our project we can run the following command: ng serve. This command will build our project and start a live reload server for development. So if we browse to localhost:4200 we should see the following:

Running Angular CLI app

Build for Production

I wont cover all the CLI commands in this post. I recommend checking out the CLI Docs. We will just start with running ng build --prod. This command runs a build for our project but with additional production optimizations such as bundling and minification. Now your project should have adist/ directory. This is where all of our compiled ready to deploy code is located every time we run a build.

Firebase CLI

So now that we have learned how to use the Angular CLI to package up our app for deployment we will use the Firebase CLI to create a live hosting project to deploy to.

First you will want to log into Firebase and go to Once in the console select "Create New Project". For our project we will name it "my-cool-app".

Creating a Firebase Project

Now that we have a project created lets go back to the command line. Next we next install the Firebase CLI via NPM. In your console run the following command: npm install -g firebase-tools. Once installed run firebase login to login to your Firebase account.

Deployment Setup

Now that Firebase CLI is installed, at the root of your Angular CLI project run firebase init. This will walk through the steps of setting up your app to be deployable to Firebase Hosting.

Creating a Firebase Hosting Project

Select the Hosting option in the command line. Next select our project my-cool-app that we created earlier. Next it will ask what file to use for the Firebase real time database rules. For now you can just use the default.

The next step is important! The cli will ask what folder to use as the public directory. For our project we want to use the dist/ directory instead of Firebase's default public/ directory. So type in the command line dist.

Next it will ask if this is a single page app and if it should rewrite all urls to index.html. For our app select yes. If it asks to over write the index.html file select no. Now your app is ready for deployment! In the root of your app you should have a new file firebase.json file that helps the Firebase CLI know how to deploy our application. Now run firebase deploy. Firebase will provide domain that you can configure to a custom domain in the console. Now if we open our browser we will see something similar to the following:

Live Angular Firebase project

Now that we have created an Angular project and deployed it to Firebase I recommend digging into more of the Angular CLI and the Firebase Features.

Twitter Facebook LinkedIn Email

No spam. Short occasional updates on Web Development articles, videos, and new courses in your inbox.

Related Posts


Fast and Secure Blogs with Firebase

Learn how to create your own fast and secure blog using the static site generator Jekyll and Firebase.

Read Article

Creating Dynamic Tables in Angular

Learn how to easily create HTML tables in Angular from dynamic data sources.

Read Article
Web Components

Reusable Component Patterns - Default Slots

Learn about how to use default slots in Web Components for a more flexible API design.

Read Article