{"id":20591,"date":"2021-09-13T12:52:38","date_gmt":"2021-09-13T12:52:38","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/blog\/?p=20591"},"modified":"2025-03-05T07:07:13","modified_gmt":"2025-03-05T07:07:13","slug":"deploy-angular-12-application-using-firebase-hosting","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/blog\/deploy-angular-12-application-using-firebase-hosting","title":{"rendered":"How to Deploy Angular 12 Application Using Firebase Hosting?"},"content":{"rendered":"

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<\/a>.<\/p>\n

Overview<\/h2>\n

Today, in this tutorial, we will be learning how painless it is to deploy an Angular 12 application<\/b> on Firebase using its Firebase hosting feature. <\/p>\n

Prerequisites<\/h2>\n

Node and Angular CLI are already installed.<\/p>\n

I assume you have already created your angular application. If not, you can create a new project using the following command: <\/p>\n

ng new project-name<\/pre>\n
project-name is variable; the project that I have created is angular12-hosting.<\/p>\n
Well, we are ready with the project now. So let\u2019s follow the steps below to host our application.<\/p>\n
Steps: Deploy the Angular 12 Application using Firebase Hosting<\/h2>\n
To begin with, Go to your project directory and open the command prompt\/terminal.<\/p>\n
Now, we need to create a build for our project. So run the following command: <\/p>\n
ng build<\/pre>\n
\"Angular<\/p>\n
After successful completion of the build, make sure the dist folder has been created in your project.<\/p>\n
The next thing to do is to create a project in the firebase. Go to the Firebase console<\/a>.<\/p>\n
\"Firebase<\/p>\n
Click on the create a project button, and it will ask you to insert a project name.<\/p>\n
\"firebase<\/p>\n
My firebase project name is angular12-hosting<\/b>; you can add yours. Then click Continue.<\/p>\n
\"Create<\/p>\n
If you are using Google Analytics, then you can enable Google Analytics. Otherwise, make it disable and click on Create Project.<\/p>\n
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. <\/p>\n
npm i -g firebase-tools<\/pre>\n
\"Angular<\/p>\n
To host the Angular 12<\/a> application on Firebase, we need to log into our firebase account using the following command. <\/p>\n
firebase login<\/pre>\n
\"Deploy<\/p>\n
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.<\/p>\n
\"Angular<\/p>\n
After successful login, we need to initialize the firebase. To do so, run the following command. <\/p>\n
firebase init<\/pre>\n
The Firebase initialization process consists of questions that we need to answer correctly for successful hosting. <\/p>\n
\"Firebase\"<\/p>\n
1. Are you ready to proceed? Enter Yes<\/p>\n
2. Which Firebase features do you want to set up for this directory? Select Hosting: Configure files <\/p>\n
(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.)<\/strong><\/em><\/p>\n
Now, they will ask to select the project directory.<\/p>\n
3. Please select an option: Select Use an existing project<\/b><\/em> (if you have already created a project in firebase. If not, you can choose Create a new project)
\n4. Select your project; mine was angular12-hosting. So I have selected that by pressing enter.<\/p>\n
After that, make sure what\u2019s your public directory of an angular project. You can check by going to the dist folder.<\/p>\n
\"Angular<\/p>\n
The directory of my project is dist\/angular12-hosting.<\/p>\n
The next question about firebase initialization will be to add enter our directory. I am adding mine; please enter as per your project.<\/p>\n
\"Firebase<\/p>\n
5. What do you want to use as your public directory? Enter dist\/angular12-hosting<\/p>\n
\"Angular<\/p>\n
6. Configure as a single-page app? Enter Yes<\/b><\/p>\n
7. Setup automatic builds and deploys with Github? Enter No<\/b> (if you want to set up with github, you can enter Yes)<\/em><\/p>\n
8. File dist\/**\/index.html already exists? Overwrite? Enter No<\/b><\/p>\n
Firebase will create some of the files.<\/p>\n
And finally, Firebase initialization completes.<\/em><\/p>\n
\"Firebase<\/p>\n
Now we are ready with setups. Run the following command to deploy our project.<\/p>\n
firebase deploy<\/pre>\n
\"Deploy<\/p>\n
After completing the deploying process, firebase will give you a URL to deploy the Angular 12 application using Firebase hosting feature.<\/p>\n
\"Angular<\/p>\n
Go to the browser and run this Hosting URL.<\/p>\n
\"Angular<\/p>\n
My application is running successfully!<\/p>\n
My application is running on this URL<\/a>. <\/p>\n
Quick Read:
\nBest Practices to Organize Your Angular App<\/a><\/p>\n
Conclusion<\/h2>\n
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<\/a> 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. <\/p>\n
If you are looking for skilled, dedicated, and experienced developers for your Angular project, connect with us to hire Angular developer<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":146,"featured_media":20593,"comment_status":"open","ping_status":"open","sticky":false,"template":"blog-new-template.php","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[989],"tags":[],"coauthors":[2427],"class_list":["post-20591","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs"],"acf":[],"modified_by":"Binal Prajapati","_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/20591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=20591"}],"version-history":[{"count":0,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/20591\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media\/20593"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=20591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=20591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=20591"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/coauthors?post=20591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}