How to Upload a Static Website to Firebase Hosting (Tutorial)

I know your girlfriend is cool, but Firebase Hosting is cooler since you can use it for free. 😂

Don’t have a girlfriend? Go to any nearest black hole to find one. 👭 😂

And you can host your static website on the ultra-high-speed hosting developed by Google.

Mainly, Firebase is used in Android development for various means, but we’ll utilize the service for hosting our static website. Creative? Maybe.

But, first, let’s talk about Firebase Hosting (skip if you already know).

Quick Jumps

What is Firebase Hosting and What Makes It Unique?

Firebase hosting service is a dynamic and static web hosting service that is fast, secure and reliable. The big G calls it production-grade web content hosting for developers.

Moreover, files are deployed on SSDs and CDN edge servers around the globe. It supports hosting files like (javascript, HTML, CSS, etc), also supported through Cloud Functions.

Curious to know what other 19 services provided by Firebase?

How to Upload a Static Website to Firebase Hosting (Step by Step)

Bear in mind you need to take some steps that you haven’t taken in your life.

It may seem scary 😱, but in the end, once you deploy your static website successfully, you’ll be the happiest person. 😃

Step 1 – Sign Up To Firebase

The first thing you need to do is signup for a free account at https://firebase.google.com/ which is obvious.

How can you eat pizza without putting it inside of your mouth?

Once done, click Go to Console, for that you need a Google account.

Don’t have a Google account? Then sorry, you’re a baby who accidentally came across the article. 👶

Step 2 – Create a New Project.

Creating a project is critical since you can save your data. Follow the tiny baby steps. 👣

Click Add project.

Enter your Project Name and click Continue.

Add Google Analytics for your Firebase Project and click Continue. Wait, but what is Google Analytics? In simple words, it’s a free tool that can help you how many visitors your website gets in a period of time that can last from one day to a decade.

Select Analytics Location & Accept Terms checkboxes and click on Create Project.

This will take a few seconds, during this period call your cat and tell her to sing a song for you (imagine even if you don’t have one). 😺

After that, a message appears your project is ready and hit Continue.

Step 3 – Set Up Firebase Hosting

Click Hosting that comes under the Develop section on the left side of the screen as shown in the screenshot.

Once you reach there, hit Get Started.

(i) Install Firebase CLI

Now you can see in the image you need FirebaseTools installed on your computer. This is a Firebase CLI.

But what is Firebase CLI? The Firebase CLI is a utility used to administer Firebase projects and perform tasks such as Realtime Database management tasks from the command-line of a terminal.

Now to do that you use NPM (Node package manager).

In simple words, you need NodeJS and NPM that should be installed on your computer.

(a) Install NodeJs on your Computer

So the first thing is to go to nodejs.org and download if you don’t already have it.

Don’t be afraid. You don’t need to learn anything except downloading and installing.

(b) Verify NodeJs installed or not:

And if you’re not sure whether you have Node installed or not you can check in the cmd prompt. Just type ”node -v” in cmd and that will give you the version number as shown in the image below.

(c) Install Firebase Tools

So once you’ve installed Node on your computer.

Afterward, you need another tool to install Firebase Tools using NPM because when you install Node, NPM comes along with the ride.

You can use it to install different packages since “firebase-tools” is a package that you need to install on your computer locally so then you can use these tools to deploy your website to the backend.

So you can say that ”npm install -g” meaning you are installing NPM globally on your computer then “firebase-tools” which is the package name. Now go to the cmd prompt and enter the below code.

Now, this is going to install the package on your computer for you.

(d) Check Version Number

Once the package is installed just to make sure everything is done perfectly. Just copy and paste below code and hit enter in cmd.

It’ll give you the Version Number.

Now you’ve Firebase Tools installed locally on your computer which you can use later in your application in the backend.

Now go back to the Firebase Console window and click on Next.

(ii) Initialize your project:

(a) SignIn To Google:

In the next step, you have to log in. So copy code.

And paste in the terminal window Then Enter y as shown in the image.

Then a window appears in the browser. You have to log in here.

After login, you can see, you’ve logged in in the browser also in the cmd prompt.

(b) Tip: Install Visual Studio Editor

I am using VisualStudio Editor for the initialization and deployment of the website. If you don’t have any Editor you can download from code.visualstudio.com and Install. It has become a favorite tool for many developers who need a modern editor.

After installing the Visual Studio Editor darg the website folder on the Editor, so it looks like this.

(c) Initiate your project:

Click on View -> Terminal from the top menu bar.

Then a terminal window appears. Make sure you are in the website folder.

Run this command from your app’s root directory:

If you get the same error as shown in the image above then you can type the following cmd. This is a temporary error and you can resolve this.

With the help of below cmd, you can bypass the ExecutionPolicy. Copy the below code and paste in the terminal window and hit Enter.

Then copy and paste below cmd and hit Enter.

And you can see a nice looking FIREBASE in the terminal window.

Afterward, it’ll ask you a confirmation “Are you ready to proceed (y/n)?” Enter y

Then you can see a lot of different services but you are just using hosting for this tutorial. Use the arrow key to go down then press the spacebar. A little (*) appears then press Enter.

Then use the arrow key to go down and select “Use an Existing project” and hit Enter.

Then you can see in the image below the same firebase project is showing in the terminal window. Select your project and hit Enter.

Then “? What do you want to use as your public directory? (public) ” press Enter

Then “? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) “Enter N

Why?

Because this is going to be used for a single page rewrite only maybe you can create something with react.

Then you can see Firebase initialization completed and three files (“.firebasesrc“ & “firebase.json” & “.gitIgnore”) are automatically added by Firebase.

Now you can see there is a public folder in the top left corner and inside the public folder, there are two files

404.html: This is used when your website is down for some reason. you can manually change in the coding section if you want.
index.html: This is a default index webpage. you don’t need to delete this.

Then move all your files inside a public folder using drag and drop just like in the below image.

Because that is the folder that is going to get deployed.

Now when you deploy, it’s going to take that public folder and push into the firebase server then you can see it online.

But before you are going to deploy on Firebase servers, it is always a good idea to do that locally on your computer.

(iii) Check Project on Localhost

Firebase development tools come with a local development server that you can use to test this locally in the browser. To do that hit the following cmd in the terminal window of VisualStudio Editor.

And it’ll give you a local server link and if you ctrl+click on the link your website is open in the browser just like the below images.

And the website is open locally in your browser. I know it’s a very bad website but this is just a demo.

(iv) Deploy Project To Firebase Server

Now you have initialized and tested your website locally and it’s time to deploy your website on the Firebase server.

Now click Terminal -> New Terminal from the top menu it will open a new window in Powershell.

Then copy below cmd and paste in the editor terminal window and hit Enter. This will deploy your website.

Now your website deployed successfully.

Open hosting Url by using ctrl+click you can see the website deployed successfully with a secure connection.

Now open the project console URL and you can manage your website with the console itself. Now click on the deployed section.

Then it’ll redirect you to the hosting dashboard. Here you can add Custom Domain Name, you can see your current files, you can add another site, also you can check usage history as well.

And if you want to update something on the website then you can update and copy the below code and paste in the terminal window. And hit Enter.

For example, I changed the text in index.html and again deployed the code.

Then you can see a new version is deployed with a new Id.

Note: If you want to update something on the server. It will take time to actually change on the server. it will not update instantly.