Host website for Free on Firebase

4 min readAug 29, 2021

--

Firebase Hosting gives you a fast, secure, and reliable way to host your app’s static assets (HTML, CSS, JavaScript, media files, etc.) as well as to serve dynamic content and host microservices.

And, the best part: It is FREE! (most part of it is).

As an added plus:

Hosting serves your content over SSL (by default).
You can use your own custom domain or use
Free subdomains on web.app and firebaseapp.com.

How to host your website on Firebase?

So, how can you host your HTML, CSS & JavaScript website on it?

First, setup up a Firebase project.

Go to https://console.firebase.google.com/
Click on ‘Add Project’.
Give your Project a name!

Remember: The unique Project ID or identifier that you’ll specify here would become the default URL for the free domain (web.app and firebaseapp.com).

You can change it by clicking on the little pencil icon and specifying one of choice. It has to be available. Once you’re satisfied, hit Save!

The new project should take some time to create.

Till then let's look at our website files.

I have my index.html, styles.css and index.js in a folder called public.

The files are linked and on localhost display a simple:

We’ll host this on the project created.

Using the side navigation of your created Firebase project, go down to Hosting under Build.

Now, follow the steps as mentioned.

You’ll have to first, Install the Firebase CLI

Open the terminal and run: npm install -g firebase-tools

Next, you’ll need to sign in to your Google account.

Type in: firebase login (and, it’ll display a url that you need to click on and authenticate with).

Now, initiate your project

Run this command: firebase init

When you’ll run this command, the terminal would ask you:

Are you ready to proceed? Type ‘Y’.
Next, you’ll have to select a feature. Use arrows to navigate to hosting and hit space then enter.

Now, you’ll have to select the project that you had created again using arrows. Once done, hit enter.
It’ll ask you: What do you want to use as your public directory? Type in ‘public’ and enter.
Configure as a single-page app? Depending on how your website is, hit yes or no. I’ll type ‘y’ because my website is a single page.
Set up automatic builds and deploys with GitHub? Do ’N’, since we won’t set up the build using GitHub.
File public/index.html already exists. Overwrite? Do ’N’ as we have code written in our index.html.

And, that is it! You’ll get a message saying: Firebase initialization complete!