When we have a project in Firebase, we can take advantage of one of the features it offers to host static web pages. This is the Firebase Hosting service.

On this occasion I will use a concrete example so that you can see a practical use case of Firebase hosting when developing an app. Imagine that we are developing an app and we are usimg Firebase as a backend, or just to have usage statistics for that app.

When the time comes to publish our app in the Apple Store, we realize that Apple asks us for a URL with the application’s privacy policy. That’s when we can take advantage of Firebase hosting to host a simple web page with our privacy policy. Let’s see how!

First of all we are going to create our simple website, a privacy policy page in our case, but you can create an entire static website if you want. In our case we have a single page called legal.html.

Web
| – public
| – legal.html

On the other hand, we assume that we have created an application in Firebase and therefore have a valid account to work with.

Firebase client installation

We use the Node.js package installation system to install the Firebase CLI globally:

npm install -g firebase-tools

(For other installation methods you can consult the Firebase documentation)

And we sign in to Firebase with the command:

firebase login

We can verify that everything works correctly by listing our Firebase projects with:

firebase projects: list

If everything is correct, you should see the list of projects in your terminal.

Project Initialization

To initialize the project we will go to the project folder, in our case “web”, and execute the command:

firebase init

 

(Remember that within that folder we have another folder called “public” where our file “legal.html” is located.)

In the menu that will show us in the terminal, we choose the option to configure hosting using the cursor and the space bar to select that option.

Then we choose the project in which we want to configure the hosting from among those we have defined in our Firebase account.

In the next step we can choose the name of the folder where our web files are located. By default, use the “public” folder. As our folder is called that, we will choose the default option.

Finally we will configure the type of site we want, which this time will not be of the “one-page app” type, so Firebase will create two files: index.html and 404.html that we can customize if we want.

This completes the initialization of the Firebase hosting.

Deployment

Once our hosting is configured and initialized, we can transfer our website, which in our case is a simple legal notice page.

To make the deployment, from the root folder of our project we execute:

firebase deploy

 

Once completed we will see something like this a message indicating that the deployment has been successful and the url where we can see our website, usually something like this:

https: // <id-de-tu-app> .firebaseapp.com

How much does Firebase hosting cost me?

Well, precisely this is one of the advantages of this method and that is that with the free Firebase plan, the Spark plan, we have 1GB of hosting, 10GB / month of transfer, custom domains and ssl and multiple sites per project.

So you know, if you want a good alternative to host static web pages, Firebase hosting is a good solution!

And if you need a mobile app for both Android and iPhone, do not hesitate to contact me for a no obligation consultation.