Skip to main content

How to Deploy Angular App on Firebase

In this article, we will discuss "How to deploy Angular App on Firebase". Today, you learn deployment an angular app on firebase is simple and easy. You can deploy your application directly from your terminal using simple commands. In case you are not familiar with firebase, it helps us to build and run web/mobile applications. For more details click here.

Create an Angular Test App


I have created a test application "firebase-test-app". You can create a new project using the following command:
ng new <project-name>

You can learn more about Angular CLI (All You Need To Know About Angular CLI).

Create Firebase App


Go to the Firebase Console, and create a project.



Add project name then click continue.



I'm disabling the Google Analytics option because this is a test project. You can enable this in your project as per your requirements.

Click to "Create project", after the processing is complete you are redirected and get the confirmation. Click to continue, and you are redirected to the project dashboard.


Setup Firebase in Angular App


You have to use the following command to install Firebase globally.
npm i -g firebase-tools

Looks like the given screenshot.



After successful installation, time to authenticate the firebase account. You the following command in the terminal.
firebase login

If you are not logged in to your Gmail account then it will ask you to authenticate with Gmail. Also, some permissions are required to use Firebase CLI. Use the same account which you have used for the firebase project.

I'm already logged in the Gmail so the result looks like the given screenshot for me.



Time to initialize the firebase. Run the following command.
firebase init

Firebase's initialization process needs some answers. You have to answer correctly for successful hosting.



  • Are you ready to proceed? [Yes]

  • Which firebase features do you want to set up for this directory? Press space to select features, then Enter to confirm your choices. [Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys]

    • Note that you can select multiple features too, but for now, we need only hosting.



  • Please select an option. [Use an existing project]

  • Select a default Firebase project for this directory. [Select the project from the given list as per your firebase account]

  • What do you want to use as your public directory? [dist/firebase-test-app]

  • Configure as a single-page app (rewrite all URLs to /index.html)? [Yes]

  • Set up automatic builds and deploys with GitHub? [No]

  • File dist/firebase-test-app/index.html already exists. Overwrite? [No]


Here, I link the dist folder to the firebase. You have to create the build of your angular application. Otherwise, that folder does not exist in your application.

Deploy Application


All's done, time to deploy the application. Use the following command in the terminal.
firebase deploy

After completing the deploying process, firebase will give you a URL of your deployed application.



Let's check our test app here (https://fir-test-app-3d971.web.app).


Conclusion


In this article, we are discussing "How to deploy Angular App on Firebase". I hope you like this article and learn a lot. We will discuss more on Firebase and Angular in the future. Feel free to add your comments for any query or suggestion.

Keep learning & stay safe :)

Comments

Post a Comment

Popular posts from this blog

Basic Use of Model Factories in Laravel

In this article, we will discuss the basic use of Model Factories in Laravel. Laravel comes with the feature called model factories that are offered to made fake models quickly. It’s used in the database testing and database seeding. Let’s start the discussion on this feature by... Read out the full post at here
Post a Comment
Read more

How to Manage Elastic IP in AWS?

In this article, we will discuss "How to Manage Elastic IP in AWS?" . Here, you will learn the use of Elastic IP addresses and how to assign it to your EC2 Instance. If you are new with EC2 Instance then check out my previous article, "How to setup an EC2 Instance on AWS" . EC2 (Amazon Elastic Compute Cloud) provide us an ability to create, start, stop and terminate the instance at any time. This will creates a challenge with IP addresses, because restarting an instance or replacing a terminated instance with newly created instance, will result in a new IP address. Now the question is "How to reference a machine when the IP is constantly change?" . We can handle this situation with the use of Elastic IP address. We can associate a single Elastic IP address to different Ec2 Instances. You can immediately associate a new Ec2 Instance with the Elastic IP address if the EC2 instance is stopped or terminated. After the back-end EC2 instance changes, our exist...
Post a Comment
Read more

How to use trackBy in Angular with Example

In this article, we will discuss "How to use trackBy in Angular" . Basically, " trackBy " is used to improve the performance of an angular application. Today, I will try to explain the use of trackBy with an example. Why do we need trackBy in Angular? By default, no need to use trackBy in Angular. But with large collections of data, angular ngFor directive may perform poorly. For example, a small change of data such as adding a new record, editing, or deleting a record from the collection. The angular framework will remove all the DOM elements that are associated with the data and will create them again in the DOM tree even if the same data is coming. Here, a lot of DOM manipulation will happen in the background if a large amount of data comes from the API then the application performance will suffer. Angular trackBy example Angular provides us function trackBy which helps us to track the items which have been added or deleted. The trackBy function takes two argum...
Post a Comment
Read more