DEV Community

loading...
Cover image for Hosting your website on web for free - Firebase Basics Series - Part 6

Hosting your website on web for free - Firebase Basics Series - Part 6

Areeb ur Rub
18 | coding since 2016 | Arduino | Python | JavaScript | HTML/CSS | Love learn making things
・3 min read

Buy Me A Coffee

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

image

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
After you login make sure you are in the project folder and then run firebase init

Initializing your website as firebase project

firebase init
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
Now, we are ready to deploy our website, to do this simply run firebase deploy in your terminal.
firebase deploy
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

Custom Domain

image
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

Follow me for more

areeburrub image

Buy Me A Coffee

Discussion (0)