The Complete Guide to Hosting Your Static Website to Firebase

Your friend will be glad just as you’re with Facebook.

Favouragbejule

Published in

Geek Culture

5 min readApr 19, 2021

How does it feel accessing Facebook from any where you want without any stress?

Great right!

Every website out there emerges from a production space or a local host before it's brought to life online.

So, in this tutorial, we’ll be hosting your static website to firebase, for easy access whenever and wherever you want.

We’ll be using :

NodeJS
VScode
Terminal or Command line, and
Firebase

So without further ado, let’s get started!

Table of content· 1. Website Config on Firebase
  ∘ Creating your website on Firebase
  ∘ Registering your website on the web
· 2. Configuring your Firebase Setup Locally
·  
  ∘ Setting up the Firebase environment
  ∘ Logging in to Firebase
· 3.  The Initialization Process
  ∘ The questionnaire
  ∘ Constructing the public folder
  ∘ Back to Questionnaire
· 4. Deployment
· 5. Updating Deployment
  ∘ If changes is not seen
· 
· In Conclusion

1. Website Config on Firebase

Now let's dive in! So, go to https://firebase.goggle.com then click go to console.

Now, You will be expected to log in to your Google account. Once you are logged in, move to the next step.

Creating your website on Firebase

To set up the website on Firebase, follow these guidelines:

* Click on "add project"

Firebase: Add project — Screenshot by Author

Give your project a name

Firebase : Project name — Screenshot by Author

You can enable your Google analytics. If you don't want to, there is no problem. But in this case, we will just enable it.

Firebase: Google analytics — Screenshot by Author

Then click continue

The picture below indicates your project has been created successfully, so you can click continue.

Firebase : Project Created — Screenshot by Author

Registering your website on the web

Now let's register our website on the web! On the created website's dashboard:

Click on the web icon </>

Firebase : Registering your website to web — Screenshot by Author

Now, click continue to console

2. Configuring your Firebase Setup Locally

During this process, we need to resolve two important things before we can use Firebase on our local computer.

Setting up the Firebase environment

Now, we need to install its tools. So let's get started!

On the side bar menu, click hosting then click the get started button.

You will be directed to the page below.

Now, go on your command line if you use windows or terminal if you use Mac then run this command.

npm install -g firebase-tools

If you did everything correct, you will see no errors meaning it has been installed.

Logging in to Firebase

To get started with the next process on the list, you need to log in to Firebase. So, run firebase login

Firebase : firebase login — Screenshot by Author

If it returns logged in as "the email you used", you are good to go.

3. The Initialization Process

Now, we get into the meat and potatoes of this tutorial.

To get started, you have to cd to the directory of your project.

If you don’t know where it is, go to where you saved the folder on your file explorer on your PC. Then, click on the bar on top of that folder, copy the path and cd to that path on your terminal.

The highlighted text is the path.

Next, run firebase init

Once the command has run successfully, you will have to deal with a questionnaire.

The questionnaire

Here are the rules: y is for yes, n is for no.

Let's dive in!

# Are you ready to proceed? Type y

# Navigate to 'hosting' using the arrow keys, select using the space bar once you've reached ‘hosting’ then confirm by pressing the enter key

# Select "use an existing project"

# Select the project you just registered

Constructing the public folder

Now, you will be asked for a public directory which you most likely don’t have right now.

So, go to the project's folder on your file explorer on your PC, then create a folder named public.

After that, copy all the files you used to create the website and paste it in the public folder.

Now, go back to the terminal or command line to complete the questionnaire!

Back to Questionnaire

# For your public directory, type in public.

This means Firebase will be getting all the code for the website in your public folder.

# Allow to rewrite all URLs to index.html

# Say no to overwriting

Then, your init process will be complete.

4. Deployment

Once every step is completed successfully, run firebase deploy

Once it's deployed, you will get the URL to access your website any where you want.

Congratulations, you just deployed your very own website to Firebase!

5. Updating Deployment

If you update your code and redeployed the app again without updating your public , the redeployed site will remain the same as before since it's getting its code from the public folder which was not updated.

To update the public folder, copy the files you updated and paste them in public folder and delete the previous version of the updated files.

Or better yet, delete everything in the public folder then copy all the files again and paste it in the public folder in case you forgot which files you updated.

If changes is not seen

Now, if your website fails to show the required changes, you can execute a hard refresh on it by pressing ctrl + shift + r on windows or command + shift + r on Mac

In Conclusion

We hosted your very own static website on Firebase where we learnt how to set up the website on Firebase, configure the Firebase environment, initialize the website and deploy it.

So has this been fun? Has it been helpful?

Thanks for your time!