Deploying a Website on Firebase and Using It for Free: A Guide

Not long ago, I wrote a post titled "How to Improve Website Performance Scores from 35 to 100." In that post, I promised to show you how to deploy your project on Firebase and use it for free. I am keeping my promise!

What Is Firebase?

Probably, some of you are not familiar with Firebase yet, so let me briefly explain to you what it is.

Firebase is a mobile and web application development platform that provides a set of tools and services to help developers build and scale their applications more easily.

It offers features such as a real-time database, authentication, hosting, cloud storage, and more. Firebase also provides backend functionalities and infrastructure, allowing developers to focus on building their apps without worrying about server management or complex infrastructure setup.

Overall, Firebase simplifies the development process and enables developers to create high-quality applications quickly.

Today, we'll use its 'Hosting' feature to store our Next.JS project. In this example, I'll show you how to host the static version of your project. The first thing you have to do is register an account.

How to Register an Account of Firebase

To register an account on Firebase, open https://firebase.google.com/, and click on "Get started."

Afterward, you need to create a Google account or use an existing one. Once you're done with the first step, you'll land on the Firebase control panel. The next step is to create a project.

How to Create a Project on Firebase

To create a project, you have to make 3 simple steps:

1. Click on "Add project", and give it a name in the new window.

2. Enable or disable Google Analytics functionality for the project, and click on "Create project"

After a couple of minutes, your project will be created.

How to Use Firebase for Free

Once you have created a project, you'll be able to see it in your dashboard. By default, you'll be on the Spark Plan. If you are not, you need to change it to the Spark Plan.

The Spark Plan is a free plan without any monthly costs. It has some limitations, but it is more than enough to start your project, especially if you plan to use it as a hosting platform for your static website.

To see the full description of the plan, please visit this link.

Time to set up Firebase hosting.

How to Set Up Firebase Hosting

Setting up Firebase hosting is also pretty simple. Log into your account, and select your project. Then, in the left menu, click on "Build", and select "Hosting" from the dropdown.

In the new window, you'll see a welcome screen. Click on "Get started."

To host your project, you need to set up Firebase CLI first.

Open your terminal window, and enter the following command:

npm install -g firebase-tools

Once the setup is finished, type the following in your terminal:

firebase login

It will take you to the login screen to authorize access.

The next step is to navigate to your project folder inside the terminal window, where you have stored your static website.

Run the following command:

firebase init

If you have done everything correctly, you should see the following in your terminal window.

In the list of options, select "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys." Use the arrow keys on your keyboard to navigate, press space to select, and then press enter.

Next, select an account from the list, and press enter.

Since we already have a project, select "Use an existing project" from the list, and choose the project you created in the previous step.

By default, the public directory is set to "public." If you want to specify another directory, you can do so in the next step. For example, my Next.js project produces a static version of the website in the 'out' directory, so I specify it at this step.

The last two configuration questions will be about your website settings.

• "Configure as a single-page app (rewrite all URLs to /index.html)" - Yes

• "Set up automatic builds and deploys with GitHub?" - No

We are finished with the setup. Now, it's time to deploy our project to Firebase.

How to Deploy the Website to Firebase

After you have completed all the configurations, you can deploy your website to Firebase hosting.

In the terminal window, inside your project directory, enter the following command:

firebase deploy --only hosting

If everything goes well, you will see the URLs that you can use to access your website.

I hope you found this article useful! In the next one, I'll show you how to set up a custom domain name for your Firebase project.

Stay tuned!

Also published here