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

Laravel Logging Guzzle Requests in File

In this article, we will discuss “Laravel Logging Guzzle Requests in File”. In the multiple scenarios, we have to use third-party API’s in our project and test those API using postman or any other tool. But also required to maintain a log for each request, such as what we send (request)? and what we receive (response)? Today, […] Read out the full post at here
Post a Comment
Read more

How to Use SSH with AWS EC2 Instance?

In this article, we will discuss "How to Use SSH with AWS EC2 Instance?" . As I already explain the setup of EC2 Instance and the use of an Elastic IP in my previous article. Today, we will learn how to connect an EC2 instance using SSH. If still, you have not read my previous articles then I recommend checking them once for a better understanding. Prerequisites A running EC2 Instance . Elastic IP (Optional for this article) ".pem" file, which is downloaded when setup the EC2 Instance. If not having the ".pem" file, then you have to create new key/value pairs. Connect via Terminal or WSL(Window Subsystem for Linux) Open your terminal and go to the directory where you downloaded your ".pem" file. Use the following command to connect with the server. ssh -i "****.pem" username@<publicDNS> or <IP Address> The same terminal command can be used in the windows Linux terminal. I'm using ubuntu on my windows machine...
Post a Comment
Read more

How to Setup and Install Next.js App?

In this article, we will discuss "How to Setup and Install Next.js App" from scratch. What is React.js and Next.js? "React.js" is a JavaScript library for building user interfaces (elements that users see and interacting on-screen). Basically, React provide us some helpful functions to build UI, and leaves it on us where to use those functions in the application. "Next.js" is a React framework. It is maintained by "Vercel" . Next.js features to solve common application requirements such as routing, data fetching, integrations - all while improving the developer and end-user experience. Why we use Next.js ? Next.js comes with the some additional features to solve come application requirements such as: We can build SSG (Static Site Generation), SSR (Server-Side Rendering) and SPA (Single Page Application) apps. Hot code Reloading: Reload the page when it detects any change saved. Routing: No need to configure any route. Files put in the pages fol...
Post a Comment
Read more