How to Host Your Website in Firebase

Firebase Hosting

Hosting a website for anyone to see is not as easy as you think, especially for beginners. I myself can attest to that. In this post, I will share how I host my website on firebase hosting for free.

Nowadays, there are a lot of hosting providers you can choose from. The real hassle is finding the right hosting provider for your next web app especially if you are on a low budget and do not want to invest that much on a website. Here, I will show you step by step on how to host your static website on Firebase hosting.

Firebase hosting is free. You can check out its free plan which is too much for personal use websites.

When used correctly, firebase hosting paired with firebase functions is a combo. In this post let’s focus only on hosting static files on firebase.

Requirements:

Before we begin, please make sure you have the following installed on your computer.

1. NodeJS If you haven't installed it yet head to node js installation guide. This will be used to install the Firebase CLI below.

2. Firebase project Please set-up first your firebase project on firebase console.

3. Firebase CLI If you haven’t installed it yet, open your terminal and run the command.

1   npm install -g firebase-tools

Installation may take a while. After the installation, you are now ready to start the first part of this tutorial which is setting-up your project directory.

Step 1: Initializing your Firebase Project

Start your project by creating a folder, cd into it and open your terminal then initialize your firebase app by running the following command

1   firebase init

This will asks the following prompts:

1. Are you ready to proceed? (Y/n)

[Type Y and hit Enter]

2. Which firebase features do you want to set up for this directory? Press Space to select feature then press Enter to proceed.

[Please select Hosting: Configure files for Firebase Hosting and (optionally) set up Github Action deploys by using the arrow down button and space to select and hit Enter]

3. For Project Setup, please select an option:

[Choose > Use an existing project by using arrow up or down and hit Enter]

Step 2: Setting up Firebase Hosting

4. What do you want to use as your public directory? (public)

[Press Enter]

5. Configure as a single-page app (rewrite all urls to /index.html)?

[Type N and press Enter]

6. Set-up automatic builds and deploys with Github?

[Type N and press Enter]

After the firebase hosting initialization you are now one command away to deploy your site on firebase. When you check your project's folder, the following files and folders are created.

1   public/
2       404.html
3       index.html
4   .firebaserc
5   .gitignore
6   firebase.json
7   firebase-debug.log

The index.html file is the default page that will be rendered when navigating to your website. This will be your website's homepage so make sure it has the html mark up of your page.

Step 3: Final Step

Run the deploy command below

1   firebase deploy

It will now upload your local directory to firebase. After a successfull upload, your website’s address will be displayed on the terminal ending in web.app or firebaseapp.com domain. You can then copy this address and share to your friends.