How to Deploy Angular 13 App to Firebase Cloud Hosting

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.

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 > environment.prod.ts 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

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.

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.

  

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

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

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.