Deploying Your Website to Firebase

Introduction

In this article, we will deploy your website frontend to Google Firebase for FREE in less than 5 minutes.

What is Firebase?

Firebase?is a mobile and web application development platform owned by Google.

Firebase hosting is specifically designed for hosting web applications quickly and easily. It offers a free tier that includes?10 GB of hosting storage, 360 MB of data transfer per day, and up to 100 hosting sites per project. It is typically sufficient for small and medium-sized websites and projects.

For demonstration, I will use a simple HTML, CSS, and JavaScript frontend app, but you can also use React, Angular, Vue, or any other frontend framework, the deployment process is the same for all kinds of applications.

Part 1: Setting Up Firebase

To start using Firebase Hosting, you need to?sign up to Firebase, go to their?website, and click on the “Get started” button which will take you to the?Firebase Console.

Create a project (Step 1 of 3)

In the Firebase Console, click on “Create a project” to create a new project for your website.

• Give a name to your project
• Read and accept the Firebase terms of the policy and click on “Continue”

Optional: Create a project (Step 2 of 3)

In this step, you can enable Google Analytics to monitor your website traffic, it is optional, but it’s a good feature that comes out of the box which you can use for free.

If you don’t want to enable it, you can skip this step. If you do enable the analytics, you need to choose the analytics location in the next step and also accept the analytics terms to be able to continue.

Create a project (Step 3 of 3)

Now you can click on “Create a project” and it will start creating your project, it might take about 2 minutes to complete.

Part 2: Setting Up Your Application

Once the project is created, click on the “Continue” button, which will take you to your Firebase dashboard.

Here click on the Web icon to start deploying your website.

Register your app

Now you need to choose a nickname for your web app and check the checkbox which will set up the Firebase Hosting for this app. Then click on “Register app”.

Add Firebase SDK

Here you have 2 options: either set up Firebase in your project with npm, or with a script tag. For my application, I will go with the script tag.

You basically need to copy this script provided by google and paste it at the bottom of our main index.html file. And after that our web application is connected to the Firebase hosting by the apiKey, projectId, and appId.

Install Firebase CLI

In the next step, we need to install the Firebase CLI globally on our laptop.

npm install -g firebase-tools        

Just copy this command and paste it into your terminal.

Part 3: Deploying

After we installed the Firebase CLI, we can now deploy our app.

Before deploying your website to Firebase, make sure to?minify your code?and?optimize assets, it’s not mandatory, but it will boost your website performance a lot. For example, if your website is built with React, you can run?npm run build?to create a production build.

Login from the terminal

First, we need to log in from our terminal so that Firebase recognizes our user

firebase login        

It will ask if you allow collecting CLI usage information, this is optional you can type yes or no and press enter

Then, it redirects us to the browser for logging in. In the browser, click “Allow” to allow firebase CLI to connect to your account

Initialize a Firebase Project

After logging in, next we need to initialize a Firebase project in our project directory, in the terminal, type

firebase init        

Here we have a couple of Firebase features to initialize in our project directory, since we want to deploy a website we are interested in Hosting, so navigate to the hosting option with arrows and select it by pressing the spacebar

Next, it asks if we will use an existing project or if we’re creating a new one, we already created our project in the last step, so here we need to choose to “use an existing project” (again using arrows and the spacebar) and select that project which you created in the firebase dashboard

We also need to specify the public directory, which basically means the directory where you have located your main index.html file, in my case, it’s the?demo/?directory, so I will type?demo?here, if it’s located in your root directory you just need to type?.?here

It detects the index.html file and asks if we want to rewrite all URLs to?/index.html, we will choose yes here

You can set up automatic build and deploys with GitHub, but I will skip it and choose no

Next, it asks to overwrite the main?index.html, and you should choose no, otherwise it will clear the content of your HTML file

Deploy ??

And now you can deploy your website by just running

firebase deploy        

After deployment Firebase CLI will give you the hosting URL in the terminal, which you can open to verify that our web app is deployed.

#firebasehostingexample #firebase #firebasedeployment #webhosting #deploytofirebasehosting