Host Static Website with Google Firebase for FREE (2019 Update)

Static sites are fast, secure, flexible, and reliable. You don't need to manage a server. No updates and patches are needed, and thus no need of worrying about malicious code being injected into your static site.

In this blog post, I am going to deploy a static site on Google Firebase, and that too for FREE. The post is a step by step guide, and will be helpful especially for begineers.

Firebase was acquired by Google in 2014. It is built on Google infrastructure, and helps you build high-quality apps quickly, and that too without managing infrastructure. Google Firebase lets you host your static contents for free under its Spark plan. Read more about Firebase hosting.

Google Firebase Logo
Google Firebase Logo

Prerequisites

As I said, this is how-to guide purely for beginners. So, to host your static site, you only need

  1. A Google account
  2.  Familiarity with basic keyboard functions of your laptop or desktop

That's it. Let's get started.

Step 1: Create a Project in Google Firebase

Register your account with Google Firebase. Create a Google account if you don't have. In the Firebase console, click Add project.

Create your first project in firebase console
Create your first project in firebase console

Enter a Project name, Project ID (Optional as Firebase automatically assigns a unique ID to your Firebase project). Use the Default settings for now, and click on Create Project.

Add a project in Firebase console
Add a project in Firebase console

Once the Project is created, click on Continue button, and you will be directed to your Firebase Dashboard. You will find a few details here:

Google Firebase Dashboard or Console
Google Firebase Dashboard or Console
  1. The current project is "thenewspaper-tech-demo". Click on the dropdown to see all your projects, if you have created more than one.
  2. The current project is set to "thenewspaper-tech-demo"
  3. You can configure the settings for the current project by clicking on the project settings icon. For now, leave as it is.
  4. We will use this Hosting tab to deploy our static site.
  5. Your Firebase plan is Spark which is Free. See all the Firebase Plans and Pricing.

Step 2: Set up the Necessary Tools

To host your site, you need to install Firebase command line tools.

  • Download and install Node.js¬†for Mac/Linux/Windows. I am using Windows10 64-bit. Make sure you download the LTS version recommended for most of the users.
  • Open Windows PowerShell. To open, press Windows+X buttons simultaneously¬†using your keyboard and then click ‚ÄúWindows PowerShell Admin‚ÄĚ. Click Yes when prompted by User Account Control.
How to Launch Windows powerShell
How to Launch Windows powerShell
  • Install Firebase command line tools by running the following command in the powershell:

$ npm install -g firebase-tools

This command installs the globally available firebase command. If the above command does not work, then change npm permissions, and run the command again. To make sure you have the latest version of Firebase CLI (command line interface), re-run the above command even if you have installed the command lines tools previously.

Step 3: Deploy your site with Firebase

Now, let's start the deploying process. In the already opened terminal, run the following command to sign in to Google. 

$ firebase login

Running this command will open your default browser window and ask you to give Gmail access to Firebase. Click on Allow button and connect with your email. If you don't have Gmail account, create one. You might get a pop of Windows Firewall to for access. Just Allow or Click on Yes. 

This command connects your local machine to Firebase and grants you access to your Firebase projects. You will see a "succss: logged in as.." message in the shell.
To test that authentication worked (and to list all of your Firebase projects), run the next command. The displayed list should be the same as the Firebase projects listed in the Firebase console.
$ firebase list

To connect your local project to your Firebase project, run the following command from the root of your local project directory.

$ firebase init

Once you run the above command, you will see your project directory. The project directory will be located in a folder at this path "C:\Windows\System32". The name of the working folder will be whatever you will name it. By default, Firebase names it as "public". We will see this in a bit. For now, type Y or Yes and press Enter button to proceed with the steps.

The firebase init command presents with you a series of configuration options. You need to choose Hosting. Go down by pressing Down Arrow Key using your keyboard, and then press Space Bar to select Hosting feature. Press Enter button to continue.

Now you will be presented with Project Setup.

Select your project, which you created earlier in Firebase console. The project name I created was "thenewspaper-tech-demo". You can create a new project from here as well.

Moving ahead, you will be presented with Hosting Setup. You will need to choose your project directory. Specify a directory to use as your public root directory. To specify, type public and press Enter. Note that you can enter a different name (such as "my_first_project') instead of "public". At this point, specify your public root directory, but you can also specify it later by editing your firebase.json config file.

 To set up more Firebase products, you can run firebase init later. The default for the public root directory is called public which is located here "C:\Windows\System32\public". Firebase does a couple of smart things automatically:

  • It creates a¬†public¬†directory if you don't create it
  • It creates an¬†index.html¬†file and¬†404.html¬†file in¬†the directory
    Location of Firebase Public Folder
    Location of Firebase Public Folder

Next, you will need to choose a configuration for your site.

If you select to make a one-page app, then Firebase automatically adds rewrite configurations for you. Since I don't want to re-write urls, I choose N, and Enter. 

This will complete the Firebase initialization. Finally, the firebse initcommand adds a couple of files to the root of local site directory:

 Start the local server for development. Run the following command from the root of your local app directory: 

$ firebase serve

This command will serve hosting files from the public directory, and will start a local server.

locally deployed files
locally deployed files

Open your browser and type: http://localhost:5000

open firebase deployed site locally
open firebase deployed site locally

So, you have built your site locally, that contains the content as you see in the above screenshot.

Now, let's change the content of the site and re-built the site to view the updated contents. First, go to Windows PowerShell pop-up that is already opened. Shut down the local server first. To do this, click anywhere in the pop up, and press CNTRL+C button. It will shut down.

Shut down local server
Shut down local server

As I had shown earlier, the html files are located here "C:\Windows\System32\public". Go to the folder, copy the index html file and paste the file at your desktop. Now, right click and open the index html file with any Text Editor. I am using Visual Studio Code. By default, you will see Notepad in your right click pop up. If you don't see notepad,  select Choose another app option, and scroll down at the end, and select More apps. From there, select Notepad.

How to use a text editor in Windows
How to use a text editor in Windows

Once the html index file is opened, change the word "Welcome" to "Hello World." Save the File. Simply press CNTRL+S to save.

Edit index files
Edit index files
Edit index files
Edit index files

Now, copy the modified index file, and paste in the public folder. To do this, you need to be the Admin of the computer. Give the permission to paste. Run the following command to start the local server

$ firebase serve

This command will serve hosting files from the public directory, and will start a local server. Open your browser and type: http://localhost:5000 . You will see your changes.

Hellow World
Hello World

Now we will deploy this project. But first shut down the local server. To deploy to our Firebase project "thenewspaper-tech-demo", run the following command from your project directory:

$ firebase deploy

This firebase deploycommand deploys a release to your Firebase project's default Hosting sites:

project-id.web.app

project-id.firebaseapp.com

So, you will view your sites that will look like similar to these URLs:

https://thenewspaper-tech-demo.web.app

https://thenewspaper-tech-demo.firebaseapp.com

Deployed site in firebase
View deployed site in firebase
View deployed site in firebase
View deployed site in firebase

You can also see these URLs when you go to Hosting section of your Firebase Console.

Hosting section of your Firebase Console
Hosting section of Firebase Console

Congrats ūüéČūüéČ! You have deployed your first static site with firebase, and that too for free.


Credits: 
Windows and Linux logos taken from SimpleIcons. 
Emojis taken from Emojipedia. 
Cover image built with BlogCover

Comments