Firebase Tutorials

How to Deploy Angular 13 App to Firebase Cloud Hosting

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

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.

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

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

React Router DOM 6 Fetch Current URL / Pathname Tutorial

If you want to learn how to get the current route's name, component pathname or…

2 days ago

React Js Hide & Show with React Bootstrap Collapse Tutorial

React show and hide example. In this tutorial, we will show you how to step…

5 days ago

How to Integrate Tabs in React Js with React Bootstrap

Tabs are one of the best UI elements for displaying multiple contents in a single…

1 week ago

How to Build Toast Component in React Js with Bootstrap

In this tutorial, we will learn how to create a toast notification component in the…

2 weeks ago

React Js Bootstrap Modal Popup Component Tutorial

Bootstrap offers tons of custom UI solutions. On top of that, it is easy to…

2 weeks ago

React Build Counter using useReducer Hook Tutorial

React js counter using the useReducer hook example. In this post, we will learn how…

2 weeks ago