Firebase Hosting
Firebase hosting and deployment
Firebase documentation is immaculate and their customer support is always on their toes. Having said that, as a beginner with Firebase around a year ago, there were a few things that would have made my journey easier if I had found in a single place.
That’s what I am going to share here. To start with, first, let’s set up a project and install Firebase SDK. Don’t forget to install Node.js before proceeding to install the SDK.
Next, run,
firebase login command to log in and get yourself authenticated to use the Firebase CLI on your device. Once you have completed these steps follow the article for hosting.
This article is divided into three parts: initialization, testing, and deployment. Let’s start with the first part.
Firebase Initialization
I’ll create a simple index.html file to host. Go to the directory where you have saved your index.html file. Add index.html in a directory named public. Wait… why is adding files to a public directory important?
Adding files to a public directory is not important. While initialization, Firebase will ask you the directory you wish to host from. The default name of the directory is public.
If you don’t specify the name of the directory, Firebase assumes you don’t have one and creates a public directory. And also adds an index.html file to it.
For simplicity, I have created a DemoHosting directory with a public directory. The public directory contains the index.html file in it.
In the DemoHosting directory I run the command:
firebase init
After running the command Firebase asks me if I wish to proceed. Type y and hit the enter key.
Next, Firebase asks me what features I need in my project. In this demo, hosting is all we need, I will use arrow keys to move between the features, select hosting using the space bar key, and then hit the enter key.
The next options are: to use an existing Firebase project? or create a new project? or add to an existing Google Cloud Platform Project? or don’t set up a default project? Since I have an existing project, I will hit the enter key.
I have blurred the projects for privacy and security reasons, still you will get an idea of how the projects will be displayed. Use the arrow key to move and hit the enter key to select a project.
Here comes the part we were already prepared for. Firebase asks what you want to use as the public directory. The default name public is in the bracket and you can type the name of any other directory you want to use. Since I have the public directory ready, I hit the enter key.
Next, Firebase asks if I want to create a single page-app? I press the enter key and Firebase assumes it to be yes.
Then Firebase asks if I want to overwrite already existing index.html file. I don’t want Firebase to overwrite my content. I want my content to be displayed. So, I type n and hit the enter key. Firebase assumes it to be no. This was the last step in Firebase initialization.
Testing
Before deployment, we want to test if everything works as desired in our local server.
So, I run the command:
firebase serve
When we type http://localhost:5000 in any browser Firebase will serve our files for testing. Once everything works as desired, we quit the command using Ctrl+C.
Firebase Deployment
After testing, we deploy our project using the deployment command.
firebase deploy
Firebase creates all the features we have requested in init and deploys our files. Type the Hosting URL in the browser and voila you have hosted your website on Firebase.
Congratulations! You have successfully hosted your website on Firebase.
A few points to note:
Firebase hosting does not provide a server for programming languages like PHP, Java, Python. To host your back end in one of these languages you have to turn to Google App Engine.
I use Firebase hosting only when my project is in JavaScript, HTML5, Bootstrap, or any other technologies that are executed in the web browser.
I have written this article to the best of my understanding. Do let me know in case of any errors or omissions. Thanks for reading.
