Firebase hosting is a service offered by Google which hosts static and dynamic websites in a secure way. It is the finest free service for developers. You can show a site design, a pre-production version of a site to the client by deploying it on Firebase hosting.
A user can use the free plan of Firebase for hosting a website. The free plan includes support for custom domain and SSL, 1GB storage. The 1GB storage is sufficient for smaller websites. To get a list of all features included in free and premium plans, check out their pricing page.
Though Firebase hosting provides support to run Node.js/JavaScript code, in this article we focus only on deploying the static website. For deploying a dynamic website on Firebase I will write another article in the future.
Getting Started
In order to get started, you must have Node.js installed on your system. You can get the Node.js package for installation on their official website.
Once you have Node.js installed on your system, head over to the Firebase console and create a project by clicking on the ‘Add project’ box. Fill up all information as prompted.
Upon creating the Firebase project, you will then redirect to the project dashboard. Click on ‘Hosting’ from the left sidebar and then on ‘Get started’. It will open a page where you will find instructions for deployment. We will go through this in the next part of the tutorial.
Deploy Static Website on Firebase Hosting
After creating a project on Firebase, with the help of a few commands, we can deploy a static website on Firebase hosting. It requires you first install Firebase CLI and then configure it locally.
Install Firebase CLI
For deployment, the first thing you need to do is the installation of Firebase CLI. You have installed Node.js so use npm to install CLI. Open the terminal and install Firebase CLI using npm as follows:
npm install -g firebase-tools
Notice we are installing the Firebase tools globally using -g. Doing so, you can run Firebase commands from any directory on your machine. Now from the terminal run the next command:
firebase login
It may redirect you to the Google account login page. Just follow the steps as suggested. It’s just an authorization process with Firebase so the project will deploy on your account only.
Initialize and Deploying
After authorizing your Google account with Firebase CLI, you need to initialize Firebase in the project root directory. For this, run the below command in your project root directory.
firebase init
Upon running the above command, CLI asks for a different option to choose. You should select the ‘Hosting’ option by navigating an arrow and then pressing the space key. Hit Enter after selecting the ‘Hosting’ option.
Next, select the project you have created in the Firebase console. Hit the Enter key. The next question would be What do you want to use as your public directory? (public). No need to do anything here. Just hit the Enter key.
For the next question Configure as a single-page app (rewrite all URLs to /index.html)? (y/N), press N and hit Enter as we are not deploying a single-page application.
After this command, you will see a couple of files created in your root directory along with the public folder. This public directory will serve as a root for deployment. In this public directory you need to keep your project files.
Now, let’s create static HTML pages. As this tutorial is just for demo purposes I am creating basic HTML pages.
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is Index Page</h1>
<a href="index.html">Home</a> | <a href="about.html">About</a>
</body>
</html>public/about.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is About Page</h1>
<a href="index.html">Home</a> | <a href="about.html">About</a>
</body>
</html>public/style.css
h1 {
color: blueviolet;
}These are our static pages which we are going to deploy on Firebase hosting.
If you want to test the project locally before deployment run the serve command as follows:
firebase serve
It will start your local server at http://localhost:5000. Test your project and if everything is good then deploy it using the command:
firebase deploy
Upon completion of deployment, you should see the Hosting URL in the console.
Run the Hosting URL in the browser and you should see your website is deployed successfully. Keep note you can deploy your project as many times. After your changes just run the deploy command and your site will deploy with the new version.
Rollback your Version
Firebase maintains a history of all your deployment versions. You can even roll back to the older version. Go to the Firebase Hosting page where you will find a rollback option(Assuming you have deployed more than one version).
By doing a rollback to the versions, you can switch between each version of your website directly. It’s simple and helpful during the design and development stage.
I hope you got to know the basics about the deployment process of Firebase hosting. Please share your thoughts and suggestions in the comment section below.
Related Articles
- Connect Firebase Realtime Database to Your Website Form
- Upload Files To Amazon S3 Using AWS PHP SDK
- Upload Images Using PHP On Cloudinary – A Free Image Hosting Service
If you liked this article, then please subscribe to our YouTube Channel for video tutorials.
Thanks. I am trying to deploy a test website but it is not showing up on the link. It shows refer to documentation page
very nice thank you