Angular 7: Deploying App To Firebase Hosting
Introduction
Today, We learn 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.
Prerequisite
- Visual studio code
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".
After that, you need to type your project name and click on the "Create project" button.
After creating the project successfully, you will enter a new page, as mentioned below.
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.
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.
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.
Add the same Firebase config to environments.ts.
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.
import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
imports: [
BrowserModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase)
],
Now, go to your hosting section of Firebase Console and click on "Get Started".
Then, you will get a popup message prompting to host your site. Here, you need to install the Firebase Command Line Tool using npm.
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.
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.
After successful login, you will get a message in your terminal as in the below image.
You will also get a successful message in your browser about successful Firebase CLI login.
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 **
*
You will get a message asking which Firebase CLI features you want to set up. So, you can select as per the below snapshot.
Now, you should select your default Firebase project. In my case, it is Satyaprakash-Samantaray.
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.
You will get a message telling you that the Firebase Initialization is completed.
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 **
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.
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.
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, We can check how to check the usage of Angular 7 application in Firebase Hosting.
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