How to Deploy Angular 13 App to Firebase Cloud Hosting

Last Updated on by in Firebase
In this Angular Firebase tutorial, we will find out how to deploy an Angular app to Firebase cloud hosting in less than 5 minutes.Deploying an Angular app to Firebase is very easy, and it doesn’t take too much time. Firebase offers a free plan to host your basic app to their server, and the best thing is that it doesn’t require any card.

Before you deploy to Firebase, check out below what firebase free plan offers to you.

Feature Description
Offline data support Offline data support
Push notification Push notifications support
Reactive programming Supports reactive programming and observable pattern.
Cloud functions Offers serverless cloud functions
Real-time syncronizaiton Data synchronization in real-time
NGRX compatible Offers action based APIs support with ngrx
Binary Data Upload, Delete, and Download binary files e.g. images, videos, and other blobs
Authentication Authentication support for multiple platforms like Google, Facebook, GitHub, etc

Click here to know more about Firebase real-time cloud database.

Step 1: Installing Node JS and Angular CLI

Our first task is to set up Node js and Angular CLI in our system to deploy Angular app to firebase cloud hosting. Following tutorial will help you to install Node JS on your system.

Next step is to install Angular CLI with the help of NPM. If you’ve already installed Angular CLI, then jump to the next step.

npm install @angular/cli -g

For detailed explanation on Angular 8/9 CLI update, following tutorial might help you: Update Angular CLI To Latest Version.

Step 2: Installing Angular App

In order to deploy Angular 8/9 app to Firebase hosting using AngularFire2 library we need to have a basic Angular app. If you already have project thats fine you can jump in to the next step. Run command to install Angular project.

ng new angular-firebase-app

Answer some Angular CLI questions:

# ? Would you like to add Angular routing? = Yes

# ? Which stylesheet format would you like to use? = CSS

Go inside the project folder.

cd angular-firebase-app

Step 3: Install & Configure Firebase (AngularFire2) Library

You must have a Firebase account to make the connection between Angular 8/9 and Firebase real-time cloud database. To know more about how to create account at Firebase, follow this tutorial to create Firebase account.

To install Firebase (AngularFirebase2) library in Angular project. Run command to install Firebase.

npm install firebase @angular/fire --save

Go inside environments > and include your Firebase credentials same as given below:

export const environment = {
  production: true,
  firebase: {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

Step 4: Installing Firebase CLI

Deploying Angular 8/9 app is impossible without Firebase CLI, you can manage your Firebase application directly from the Firebase CLI. Run command to install Firebase command line interface globally in your system.

npm install -g firebase-tools

Step 5: Initialize Firebase Project using Firebase CLI Tools

Now, we are initialising the Firebase project using the Firebase CLI tools. Run command to login into the Firebase project.

firebase login

Firebase Login

Once you are logged into your Firebase account, then run the command in Firebase CLI to initialize Firebase project.

firebase init

Following information will be displayed on Firebase CLI.

Firebase CLI

Firebase CLI Feature Details
Database Deploy Firebase Real-time Database Rule
Firestore Deploy rules and create indexes for Firestore
Functions Configure and deploy Cloud Functions
Hosting Configure and deploy Firebase Hosting sites
Storage Deploy Cloud Storage security rules

Select the Firebase CLI feature Database and Hosting, then press enter.

Answer Firebase CLI questions.

  • Which Firebase CLI features do you want to set up for this folder?
    Press space to select required feature then enters to confirm your choices.
  • Select a default Firebase project for this directory:
    Select whichever app you have created.
  • What file should be used for Database Rules?
    Press enter to continue with database.rules.json
  • What do you want to use as your public directory? (public) dist/your-project-name
    After code compilation Angular app’s code goes here.

    Get Angular Project Name

  • Configure as a single-page app (rewrite all URLs to /index.html)? (y/N) y

Step 6: The Angular 8/9 Ahead of Time Compilation

In this step, we will make the production build of our Angular app. We’ll be using Ahead of Time compilation, which is commonly used for creating production build.

ng build --prod --aot

Once the build is successfully created, you will see the compiled project in dist folder same as given below.

Build Folder

Step 7: Deploy Angular 13 App to Firebase Cloud Server

Finally, let us deploy the Angular app to Firebase cloud server using Firebase CLI.

firebase deploy

Deploy Firebase Hosting

Once the app is deployed, you will see Firebase hosting URL in the Firebase CLI. Paste your app’s url in the browser and check how is it working.

Final Thought

Finally, we have deployed the Angular app to Firebase cloud server using Firebase CLI. Firebase is an excellent tool for building web and mobile apps quickly.

The wide array of Firebase developer-centric tools makes every developer’s life easy. Deploying the Angular app to the server is also very easy we can use Firebase CLI tool to push the app to the server.

I hope this tutorial will surely help you, and it would be great if you share this tutorial with others.

Digamber - Author

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.