Web Development

How to Host and Deploy an Angular App on Firebase

Get a handle on Firebase console

image by author

Whether you are working on an open-source project, you would like to use it as a reference, or you’re looking for a hosting service for free, it’s worth considering Firebase as a solution to achieve your goal.

I personally have a bunch of open-source mini-projects on my GitHub account, but most of them don’t have a link for a live demo, which would be very helpful for other developers to visually understand what’s the project is about. In the past, I’ve used Heroku to host and deploy some of my apps, but this time I wanted to try Firebase.

In this post, I’m going to share with you how I’ve recently deployed a web app of mine — that was implemented here — on Firebase along with some tips that you might need in case you face similar problems to the ones I’ve faced in this process.

Without further ado, let’s get started.

Step 1: Create New Firebase Project

First, you need to sign in on the Firebase console web page and create a new project by clicking on the “Add project” button, then fill the form and click on “Continue” button.

Step 2: Choose Hosting

Now, you need to choose “Hosting” on the menu on the left and click on “Get Started”:

image by author

You will get a screen that tells you to install the Firebase tools, which is the CLI that is used to initialize and deploy your app. But before that, make sure you have Node.js installed.

Then run the following command using npm to install the Firebase CLI globally on your machine:

npm install -g firebase-tools

Install the Firebase CLI globally on your machine (image by author)

Step 3: Authentication

Once you have Firebase, you need to sign in by running the following command, which…