There are a number of organizations providing free hosting of applications irrespective of their size. Each of them provides different features and functions. One of them is Firebase, which can store your hosting content upto 10GB and can store a 1GB real-time database, and 10GB/month can be downloaded. For more details, you can check out this page.

Table of Contents

Overview

Today, in this tutorial, we will be learning how painless it is to deploy an Angular 12 application on Firebase using its Firebase hosting feature.

Prerequisites

Node and Angular CLI are already installed.

I assume you have already created your angular application. If not, you can create a new project using the following command:

Copy Text
ng new project-name

project-name is variable; the project that I have created is angular12-hosting.

Well, we are ready with the project now. So let’s follow the steps below to host our application.

Steps: Deploy the Angular 12 Application using Firebase Hosting

To begin with, Go to your project directory and open the command prompt/terminal.

Now, we need to create a build for our project. So run the following command:

Copy Text
ng build
Angular 12 Hosting

After successful completion of the build, make sure the dist folder has been created in your project.

The next thing to do is to create a project in the firebase. Go to the Firebase console.

Firebase Console

Click on the create a project button, and it will ask you to insert a project name.

firebase project name is angular12-hosting

My firebase project name is angular12-hosting; you can add yours. Then click Continue.

Create a Project

If you are using Google Analytics, then you can enable Google Analytics. Otherwise, make it disable and click on Create Project.

After successfully creating the project in firebase, again go to the angular project directory in your file explorer, open the command prompt/terminal, and install firebase tools using the following command.

Copy Text
npm i -g firebase-tools
Angular Projects

To host the Angular 12 application on Firebase, we need to log into our firebase account using the following command.

Copy Text
firebase login
Deploy angular 12 hosting

It will ask you to choose your Gmail account and some permissions to use Firebase CLI. Please note that select the account on which you have created the firebase project and allow those permissions.

Angular 12 app with firebase hosting

After successful login, we need to initialize the firebase. To do so, run the following command.

Copy Text
firebase init

The Firebase initialization process consists of questions that we need to answer correctly for successful hosting.

Firebase

1. Are you ready to proceed? Enter Yes

2. Which Firebase features do you want to set up for this directory? Select Hosting: Configure files

(Note that you can select multiple features too, but for now, we need only hosting. Also, make sure you need to press the Space key to select a feature/option, and then press Enter to confirm that.)

Now, they will ask to select the project directory.

3. Please select an option: Select Use an existing project (if you have already created a project in firebase. If not, you can choose Create a new project)

4. Select your project; mine was angular12-hosting. So I have selected that by pressing enter.

After that, make sure what’s your public directory of an angular project. You can check by going to the dist folder.

Angular 12 app

The directory of my project is dist/angular12-hosting.

The next question about firebase initialization will be to add enter our directory. I am adding mine; please enter as per your project.

Firebase hosting

5. What do you want to use as your public directory? Enter dist/angular12-hosting

Angular 12 app using firebase

6. Configure as a single-page app? Enter Yes

7. Setup automatic builds and deploys with Github? Enter No (if you want to set up with github, you can enter Yes)

8. File dist/**/index.html already exists? Overwrite? Enter No

Firebase will create some of the files.

And finally, Firebase initialization completes.

Firebase initialization completes

Now we are ready with setups. Run the following command to deploy our project.

Copy Text
firebase deploy
Deploy angular 12 app

After completing the deploying process, firebase will give you a URL to deploy the Angular 12 application using Firebase hosting feature.

Angular 12 application

Go to the browser and run this Hosting URL.

Angular 12 hosting app running

My application is running successfully!

My application is running on this URL.

Conclusion

So, this was about how to deploy the Angular 12 application using Firebase hosting. I hope the tutorial was helpful and that you tried to host your application as well. If you have any questions, feel free to connect. Are you an enthusiastic learner who likes to explore more about Angular? Then, visit the Angular Tutorials page and get your hands on Angular. We will provide you github repository as well so that you can clone the repository and play around with the code.

If you are looking for skilled, dedicated, and experienced developers for your Angular project, connect with us to hire Angular developer.

Angular JS Tutorials

Connect Now

Build Your Agile Team

Hire Skilled Developer From Us

Subscribe for
weekly updates

newsletter

What Makes Bacancy Stand Out?

  • Technical Subject Matter Experts
  • 2500+ Projects Completed
  • 90% Client Retention Ratio
  • 12+ Years of Experience

Our developers primarily focus on navigating client's requirements with precision. Besides, we develop and innovate to deliver only the best solutions to our clients.

get in touch
[email protected]

Your Success Is Guaranteed !

We accelerate the release of digital product and guaranteed their success

We Use Slack, Jira & GitHub for Accurate Deployment and Effective Communication.

How Can We Help You?