Deploy an Angular App to Firebase

Introduction

 
In this article, we will learn how to deploy Angular in firebase.
 

What is Firebase?

 
It allows us to create web development applications without server-side programming, and its supports web, iOS, and Android platforms.
 

Firebase Deployment

 
We can follow the instructions for Firebase deployment, shown below:
  • Create a Firebase Project
  • Install Firebase tools
  • Build for production
  • Deploy to Firebase

Installing AngularCLI

 
Let’s get started by installing Angular CLI, which is the official tool for creating and working with Angular projects. Open a new terminal and run the below command.
 
npm install --g @angular/cli@next
 
Steps to follow:
 
Step 1
 
Create an Angular project setup using the below command, or however you want to create it.
 
ng new projectname
 
Example:
 
ng new angular-firebase
 
Angular App Deploy To Firebase 
 
Step 2
 
Now, we must install Firebase in our Angular app. Open a new terminal and run the below command.
 
npm install firebase @angular/fire –save
 
Angular App Deploy To Firebase 
 
Step 3 - Install Firebase Command Tools
 
Without Firebase tools, we will not be able to deploy Angular applications. Now, we will install firebase tools in our run command.
 
npm install -g firebase-tools
 
Angular App Deploy To Firebase 
 
Step 4 - Log in to Firebase
 
Now, we must log in to the Firebase project.
 
Angular App Deploy To Firebase 
 
Step 5 - Env setup
 
Set up env, and include your Firebase credentials in the same manner as below:
  1. export const environment = {  
  2.     production: true,  
  3.     firebase: {  
  4.         apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",  
  5.         authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",  
  6.         databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",  
  7.         projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",  
  8.         storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",  
  9.         messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"  
  10.     }  
  11. };   
Step 6
 
Once you've logged into the firebase account, then run the command to initialize the Firebase.
 
firebase init
 
Angular App Deploy To Firebase 
 
In firebasecli, the features are:
  • Database
  • Functions
  • Storage
  • Hosting
  • Firestore
Select the feature for database and Hosting.
 
Angular App Deploy To Firebase 
 
Step 7
 
Now, Run the application
 
ng build --prod –aot
 
Angular App Deploy To Firebase 
 
Now, we will see following the Folder structure in our project
 
Angular App Deploy To Firebase 
 
Step 8 - Firebase Deployment
 
Finally, we will deploy our cloud server using firebase
 
firebase deploy
 
Angular App Deploy To Firebase
 
Step 9
 
On successful execution of the above command, we will see the hosting URL:
 
https://createfire-3674a.firebaseapp.com/
 
Angular App Deploy To Firebase