How to Deploy an Angular app to Firebase

In this article, we are going to discuss a few things about Firebase and the deployment of Angular applications.

Agenda

• Overview of Firebase
• Features of Firebase
• Register an Application on Firebase
• Create an Angular Demo Application
• Deployment of Angular Application on Firebase

Prerequisites

• Firebase Account
• Angular CLI
• Node JS
• Visual Studio

Overview of Firebase

Firebase is a mobile and web development platform that provides a wide range of tools and services to help developers build high-quality applications. It was originally developed by Firebase Inc., a startup founded in 2011, and was later acquired by Google in 2014.

Features of Firebase

• Real-time Database: Firebase provides a cloud-hosted NoSQL database that allows developers to store and sync data in real-time across multiple clients. It uses a JSON-based data model and provides powerful querying capabilities.
• Authentication: Firebase offers authentication services, enabling developers to easily add user authentication to their applications using email and password, social media logins (such as Google, Facebook, and Twitter), and other identity providers.
• Cloud Functions: Firebase allows developers to write and deploy serverless functions that run in response to events triggered by Firebase services or HTTP requests. This feature enables developers to extend the functionality of their applications without managing servers.
• Cloud Storage: Firebase provides secure and scalable cloud storage for developers to store and serve user-generated content like images, videos, and other files. It offers simple APIs for uploading, downloading, and managing files.
• Hosting: Firebase Hosting allows developers to deploy and host their web applications quickly and securely. It provides a global content delivery network (CDN) to deliver static assets and dynamic content to users with low latency.
• Analytics: Firebase Analytics provides detailed insights into user behavior and app usage. It helps developers track key metrics, understand user engagement, and make data-driven decisions to optimize their applications.
• Performance Monitoring: Firebase Performance Monitoring helps developers gain insights into the performance of their applications. It provides real-time monitoring, tracks network requests, and identifies performance bottlenecks.

Register an Application on Firebase

Step 1

Open the following Firebase URL:

https://console.firebase.google.com/u/0/

Step 2

Add a new project.

Step 3

Configure the project name and Google Analytics with some default settings.

Step 4

Register your application after clicking on the web symbol and copying the project ID that we need for deployment.

Create an Angular Demo Application

Step 1

Create a new angular application.

ng new angular-firebase-deployment

Step 2

Build and run the application.

ng serve

Step 3

Install the Firebase tool.

npm install -g firebase-tools

Step 4

Login to the Firebase.

firebase login

Step 5

Initialize the firebase in your current application.

firebase init

Firebase CLI will ask you a few questions.

Which Firebase CLI features do you want to set up for this folder?

Press space to select the required feature, then enter to confirm your choices.

Select a default Firebase project for this directory: angular-demo-5658b

Here I selected angular-demo-5658b, which I created earlier.

What do you want to use as your public directory? (public) dist/angular-firebase-deployment

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

The File dist/angular-firebase-deployment/index.html already exists. Overwrite? Yes

If you select Configure files for Firebase Hosting and (optionally) set up the GitHub Action Deploy option from the list at the initial level, then you need to have a repository on GitHub, and then only you can set up and configure workflow after giving access to that particular repository.

Create a production build using the following command:

ng build –aot

It will create one dist folder in your project solution. dist/angular-firebase-deployment

Step 7

Execute the following command to deploy your Angular application on Firebase:

Firebase deploy

Step 8

Finally, open the browser and open the hosting URL.

Conclusion

In this article, we understand the basics of Firebase and its features. Also, Configure the project on the Firebase cloud, and after that, deploy it on Firebase.