Hosting your website on web for free - Firebase Basics Series - Part 6
Tags: firebase, tutorial, beginners, showdev
Published: 2021-06-16 14:57:36

<a href="https://www.buymeacoffee.com/areeburrub" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>

Whenever we make a project you can't just keep it to your computer and ask everyone to use it on your device, we need a website which will run our project so we have firebase hosting for that.

### Is Firebase hosting free
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8avkswt843b1efra6bi9.png) 
Yeah it's free at basic level but if your website scale and consume more than 10GB of storage and exceed 360mb/day data transfer limit then it can cost some price.

### How to get started
In Firebase console go to Hosting Section and click on get started.

Now, it will ask you to install `firebase-tools` using `npm` this will give you access to Firebase CLI, run the give npm install on your terminal and it will install it.

>If you are not familiar with `NPM`(originally short for Node Package Manager), then it's just a package manager which is used to manage javascript packages.
To use NPM on your system you should install node JS, it simple to do just goto [nodejs.org/en/download](https://nodejs.org/en/download/current/) and download it for your system.
Node JS will include the NPM with it, you can check weather it is installed or not, using Terminal
![npm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/npx0rylg42bagllozb58.gif)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2qpz2h3fuq25xfwoiwco.png)

After installing the CLI login the CLI with your google account run `firebase login` it will open a login page in browser if don't copy the link and open it.
![firebase login](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1y7eubkspt1rivor3lqs.gif)
After you login make sure you are in the project folder and then run `firebase init`

### Initializing your website as firebase project
![firebase init](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f11h0b2ozv9nb3ezpj9b.gif)
`firebase init` will ask you to configure your project folder you can manage almost all basic firebase thing from firebase CLI also but we will only use Hosting so select hosting and then continue select the project you are configuring here and then press enter.

Then, it will ask you about the public directory the place where where you will store your website we will create the public folder but for now press enter and continue with default values for every other option.

After it's complete you will see firebase files is now in your project directory.

Move the project to public folder, in our case we have `index.html`, `app.js` and `style.css`.

### Deploying the Website
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20ouo44jykjpfgcpl61v.png)
Now, we are ready to deploy our website, to do this simply run `firebase deploy` in your terminal.
![firebase deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xp8jvojz0nebapfw7qfx.gif)
It will give your website link, which will be like `your-project-id.web.app` 

you can choose your project id while creating your project
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2qcpqv12t5d54fyhire5.png)

### Custom Domain
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/br7hcxtmhz20mskt3vkf.png) 
This is a hosting service and gives a URL also but you can add your custom domain to it, if you click `Add custom domain` then it will ask you to verify and after verification your custom domain will also give this website.

### Try it yourself
The website is now available on internet and can be accessed on [post-here-on.web.app](https://post-here-on.web.app/)

>## Follow me for more
{% user areeburrub %}
<a href="https://www.buymeacoffee.com/areeburrub" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>