Firebase | How to host angular project on firebase for free

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

I. Create account in firebase or login with google account and Create Project.

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

Sign in to Google, type following command.

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”.

III. Create Dist Folder

Type following command, in order to create dist

Copy index.html file from project folder and paste it in dist folder. Now you are ready to deploy your project.

IV. Deploy Your Firebase Hosting

base Hosting

When you’re ready, deploy your web app

firebase deploy

once your deployment success, you can see your project here hosting-demo-4702f.web.app

So, now your website is live, with google’s security.

Thank you for reading and stay tune, stay connected and stay safe. Please support us by sharing the blog.

Read our other blogs on ITbulls.in

Previous Post
Next Post

Comments

Top 7 platforms for free web hosting for small businesses - IT Bulls

[…] also provides a platform to host your static websites absolutely free. You may read our blog on Firebase | How to host angular project on firebase for free […]

Mishan Goti

Thank you for your support, Sir. Your comment mean something for us, It of course motivate writing more on very unique and helpful topics. Thank you again.

Leave a Reply

Your email address will not be published. Required fields are marked *