angular

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“.


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

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

Step 3. Generate API Key

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

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:

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:

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.

  

You will see the popup message box as below and then copy the command given in the popup box to install firebase 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 a success message on the terminal as well as on the browser as below screenshot: 

Step 8. Initialize Project

In your Terminal type the below command to initialize the project

firebase init

Here you will be asked some questions for the 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 your project initialization complete.

Step 9. Create Build for your Angular Application

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

ng build --prod

It will generate a 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 the build using the below command

firebase deploy

After deployment completed you will see the hosting URL of your application in the terminal, By clicking on it you will be able to see the 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.

If You Appreciate What We Do Here On TutsCoder, You Should Consider:

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Support Us

We are thankful for your never ending support.

Leave a Comment