Deploying Angular App to Firebase Hosting

Deploying Angular App to Firebase Hosting

Firebase is a mobile and web application development platform developed by Firebase, it offers so many great features for development.

In this tutorial, we will learn how to deploy our angular application to firebase hosting with step by step guide.

so, let’s get started…

Also read,

How to deploy Angular app to firebase hosting step by step Guide

Step 1. Login to Firebase Console

Go to Firebase Console and create a new account if you don’t have or continue if you already have.

Step 2. Create Project in Firebase console

Now  go to Firebase Console and you will be able to see your recently added project if you have any or create a new project for your angular app by click on “Add Project“.

Getting-started-with-firebase
Getting-started-with-firebase

Now Give your Project name and after that click on the “Create Project” button.

Add-Firebase-Project
Add-Firebase-Project

Once the project created successfully you will see a welcome page.

Step 3. Generate API Key

Click on code icon as shown below to generate the API key for our APP, which will be used for our Application deployment.

Firebase-welcome-page
Firebase-welcome-page

You will see a popup box with API Key, ProjectID, Auth Domain and other details as below screenshot

Step 4. Install Firebase

Now go to the Terminal of your angular application and type below command to install angular fire and Firebase package into it.

npm install firebase @angular/fire --save

After package added successfully we need to configure it to our app, so go to environment.ts and environment.prod.ts add firebase configuration same as shown below screenshot:

environment

Step 5. Import Firebase Module

Go to app.module.ts file in the project and import firebase module and environment configuration as shown below screenshot:

app module

Step 6. Install Firebase Command line tools using NPM

Now go back to firebase console and click on Hosting section and then click on Get Started button.

Firebase-hosting-section
Firebase-hosting-section

You will see popup message box as below and then copy command given in popup box to install firebase tools

Firebase-install-tools
Firebase-install-tools

 

Type below command on your terminal to install Firebase Tools globally on your system using NPM.

npm install -g firebase-tools

Step 7. Login to Firebase using CLI

Now type the following command in Terminal to authorize your application, it will ask your login credentials to authorize the app.

firebase login

Make sure to login with same login credential which you have used for creating project before

After successful login you will get success message on terminal as well as on browser as below screenshot:

Firebase-login-success
Firebase-login-success

Step 8. Initialize Project

In your Terminal type below command to initialize the project

firebase init

Here you will be asked some questions for initialization process same as below:

  1. Are you ready to proceed? Yes
  2. Which Firebase CLI features? Hosting
  3. Select a default Firebase project? Angular Host Demo (Select your created project)
  4. What do you want to use as your public directory? dist/myapp (here myapp is our angular project name)
  5. Configure as a single-page app? Yes

After that, you will get a message that you project initialization complete.

Step 9. Create Build for your Angular Application

Go to your project directory using CMD and Type following command to create production version of your application:

ng build --prod

It will generate dist folder in your Application root directory, which will be used for deploy our Angular Application

Step 10.  Deploy to Firebase Hosting

Now our build for production is ready, we need to deploy build using below command

firebase deploy

After deployment completed you will see hosting URL of your application in terminal, By clicking on it you will be able to see latest uploaded application live on the firebase.

So, Finally, we have deployed our angular application to firebase hosting.

Conclusion:

Thanks for reading.

Do let me know If you face any difficulties please feel free to comment below we love to help you. if you have any feedback suggestion then please inform us by commenting.

Don’t forget to share this tutorial with your friends on facebooktwitter.