Deploying Angular 7 App To Firebase Hosting (With Extra Tips)

Today, I will show you the steps to publish an Angular 7 application to Firebase Hosting. Firebase is a mobile and web application development platform developed by Firebase, that was acquired by Google in 2014.

Introduction
 
Today, I will show you the steps to publish an Angular 7 application to Firebase Hosting. Firebase is a mobile and web application development platform developed by Firebase, that was acquired by Google in 2014.
 
Description
 
In this session, we will see the following.
  • How to register to Google Firebase.
  • How to set-up the project inside Google Firebase.
  • How to make a connection with Google Firebase by using Visual Studio Code.
  • The project file structure in Visual Studio Code after a successful deployment to Firebase.
  • How to check the status of your uploaded project in Firebase.
  • Generating the Live URL after deployment of the Angular 7 application.
Note 
Before going through this session, please visit my below-mentioned sessions related to Angular 7 app.
Steps to be followed.
 
Step 1
 
Let's visit Google Firebase first.
You should have a Google account to use Firebase Console.
 
Step 2
 
After successful login to the Firebase Console, you can see your recently added projects. If you don't have any, then click on "Add Project".
 
Deploy Angular 7 App to Firebase Hosting With Extra Tips 
 
After that, you need to type your project name and click on the "Create project" button.
 
Deploy Angular 7 App to Firebase Hosting With Extra Tips 
 
After creating the project successfully, you will enter a new page, as mentioned below.
 
Deploy Angular 7 App to Firebase Hosting With Extra Tips 
 
Step 3
 
Now, let us generate the API Key to be used for the deployment of our Angular 7 app to Firebase Hosting. Click on the Code icon (marked by a red arrow), as mentioned in the screenshot below.
 
Deploy Angular 7 App to Firebase Hosting With Extra Tips 
 
You can see a popup box where you will get the API Key and the live URL of your Angular 7 app, i.e., authDomain with other optional details.
 
Deploy Angular 7 App to Firebase Hosting With Extra Tips 
 
Step 4
 
Now, we need to install the AngularFire package into our Angular 7 application. For installing AngularFire and Firebase, type the below command in the terminal of your Angular 7 application.
 
npm install firebase @angular/fire --save 
 
Now, we are able to use AngularFire in our Angular 7 app. Then, add Firebase config to the environments variable. Open /src/environments/environments.ts and /src/environments/environments.prod.ts  and add your Firebase configuration there. You can find out the project configuration through Firebase Console.
 
Deploy Angular 7 App to Firebase Hosting With Extra Tips 
 
Add the same Firebase config to environments.ts.
 
Deploy Angular 7 App to Firebase Hosting With Extra Tips 
 
Step 5
 
Set up @NgModule for the AngularFireModule. Open /src/app/app.module.ts, inject the Firebase providers, and specify your Firebase configuration for Firebase Hosting.
  1. import { AngularFireModule } from '@angular/fire';  
  2. import { environment } from '../environments/environment';  
  1. imports: [  
  2.     BrowserModule,  
  3.     AppRoutingModule,  
  4.     AngularFireModule.initializeApp(environment.firebase)  
  5.   ],  
Deploy Angular 7 App to Firebase Hosting With Extra Tips 
 
Now, go to your hosting section of Firebase Console and click on "Get Started".
 
Deploy Angular 7 App to Firebase Hosting With Extra Tips 
 
Then, you will get a popup message prompting to host your site. Here, you need to install the Firebase Command Line Tool using npm.
 
Deploy Angular 7 App to Firebase Hosting With Extra Tips 
 
Type the below command in your project terminal for installing the Firebase tools globally on your machine.
 
npm install -g firebase-tools 
 
Step 6
 
After successful installation of Firebase tools, log into Firebase.
 
Deploy Angular 7 App to Firebase Hosting With Extra Tips 
 
Type the below command for logging into Firebase.
 
firebase login 
 
It will generate a URL to visit on any device. Remember, you should use the same email id of yours that you used in the previous steps of this session.
 
Deploy Angular 7 App to Firebase Hosting With Extra Tips 
 
After successful login, you will get a message in your terminal as in the below image. 
 
Deploy Angular 7 App to Firebase Hosting With Extra Tips 
 
You will also get a successful message in your browser about successful Firebase CLI login.
 
Deploy Angular 7 App to Firebase Hosting With Extra Tips 
 
If you want to logout, then type the below command.
 
firebase logout
 
Step 7
 
The next step is to initialize our project by typing the below command in the terminal.
 
firebase init 
 
Deploy Angular 7 App to Firebase Hosting With Extra Tips 
 
You will get a message asking which Firebase CLI features you want to set up. So, you can select as per the below snapshot.
 
Deploy Angular 7 App to Firebase Hosting With Extra Tips 
 
Now, you should select your default Firebase project. In my case, it is Satyaprakash-Samantaray.
 
Deploy Angular 7 App to Firebase Hosting With Extra Tips 
 
The next step is to set a public directory to deploy our Angular 7 application. You should type the following command and set 'Yes' to configure a single page app.
 
dist/Angular7app -- Here, Angular7app is our project name. 
 
Deploy Angular 7 App to Firebase Hosting With Extra Tips 
 
You will get a message telling you that the Firebase Initialization is completed.
 
Deploy Angular 7 App to Firebase Hosting With Extra Tips 
 
Next, we should build our application. To do so, type the below command to get into the dist folder with all compiled projects as in the below snap.
 
ng build 
 
Deploy Angular 7 App to Firebase Hosting With Extra Tips 
 
Step 8
 
In this step, we will deploy our application by using the below command.
 
firebase deploy
 
After successful deployment, finally, our Angular 7 application is live. You can get the Hosting URL of your deployed application as in the below snap. 
 
Deploy Angular 7 App to Firebase Hosting With Extra Tips 
 
Upon clicking on this Hosting URL, you will see the Angular 7 application which was made live recently. You will get the URL with 'firebaseapp.com' domain as it is deployed in Firebase Hosting.
 
Output
 
My Angular 7 Application is live now. Click on the below URL to see the real-time implementation.
Deploy Angular 7 App to Firebase Hosting With Extra Tips
 
You can check this Live URL with your smartphone as well. Well, it is fully responsive.
 
Deploy Angular 7 App to Firebase Hosting With Extra Tips 
 
Step 9
 
If any enhancement or modification has happened inside the existing project, then you need to run the below three commands to get all the updated features in the deployed project. Just run the below commands in your terminal in the same series or sequence.
  • firebase login
  • firebase init
  • ng build --prod
  • firebase deploy
After running these above commands, you will get your live application updated with the new enhancements.
 
Step 10
 
In this step, I will show you how to check the usage of Angular 7 application in Firebase Hosting.
 
Deploy Angular 7 App to Firebase Hosting With Extra Tips 
 
Summary

In this write-up, we have learned how to,
  • Register to Firebase Console
  • How to set-up the project inside Google Firebase
  • Make a connection with Google Firebase by using Visual Studio Code
  • What will be the Project file structure in Visual studio code after a successful deployment to Firebase
  • Check the status of your uploaded project in Firebase
  • Generate the Live Url after deployment of the Angular 7 application