Firebase | How to host angular project on firebase for free

A web hosting service is a type of Internet hosting service that allows individuals and organizations to make their website accessible via the World Wide Web. Web hosts are companies that provide space on a server owned or leased for use by clients, as well as providing Internet connectivity, typically in a data center. And today I will discuss on one of the free web hosting service offered by google, known as Firebase.

Note: Please make sure you have Node and NPM installed in your system.

So, let’s began.

Step – 1 : Project set up in Firebase

First of all you need to create account in google, which I think every one have. Now just open this link
https://firebase.google.com/

Than Click on “Create a project” button.

Type your project name, and check terms and condition, as shown in screen short bellow, than click “continue“

Then click “continue” again in step 2, and in the last step select Analytics Location, and check all the term and condition.

once you click on “Create Project“ you will redirected to console page of your that particular project.

Step – 2 : Setup Firebase in your Angular Project

Once your are redirected to console page, than select hosting section from left side bar, than click on “Get Started” button.

Now, you will see few steps, and I will explain all of them in very easy manner.

I. Install Firebase CLI

To host your site with Firebase Hosting, you need the Firebase CLI (a command line tool).

Now navigate to the project you want to host in Firebase, than Run the following npm command to install the CLI or update to the latest CLI version.

npm install -g firebase-tools

II. Initialize Your Project

firebase login

Once you enter this command, it will ask you to login with external link, type ‘Y’, than it will redirect to your default browser and ask for which credentials to use to login, than it will ask permission, click ALLOW.

Initiate your project, type following command.

firebase init

Once you enter this command you will see, this

than type ‘Y‘, and it will ask, Which Firebase CLI features do you want to set up for this project?

Select only Hosting for now, However you can select any according to your needs. Than, it will ask on which firebase project you want to setup the project.

Select Use an existing project, as we have already create Hosting-demo from firebase website.

As you can see, it will show all existing projects available on that google account. Select appropriate project, Here I have selected hosting-demo-4702f project. Once you select the project it will ask for Which file you want to use as public directory?

Just write “dist”, as Angular CLI will compile our project and create dist folder.

Than it will ask for config as a single-page app, type “Yes”

And lastly it will ask Set up automatic builds and deploys with GitHub, type “No”, it I depend on you if you want to use this feature you can type “Yes”.