How to deploy a web app for free
What is Firebase Hosting?
Firebase is a BAAS (Backend-As-A-Service) developed by Google to create mobile and web applications and is being widely used by many developers as it makes it quite easy/quick to set up most of the general backend stuff and is also free to start. It provides a lot of services like Real-Time Database, Authentication, Storage, etc. But in this article, we will be only looking at Firebase Hosting which allows us to host static HTML pages for free up to the storage of 10 GB and data transfer of 360 MB per day.
How to set up Firebase-CLI?
To host your static page, you will have to first set up firebase CLI on your machine for that you can follow these steps.
- Install Node.js (https://www.nodejs.org/)
- Install firebase tools using npm (npm install -g firebase-tools)
- Log in to the firebase account using the command (firebase login)
How to host a web page?
Let’s suppose we have an example project having a folder hierarchy as
— — index.html
now open a terminal within a “public” folder and enter the command
after entering the command you should see the following message in the terminal
now type “y” and press enter, after that, you should see the list of all the Firebase services which you can access using Firebase-CLI
choose “Hosting: Configure files for Firebase Hosting” press the spacebar to select the option and press enter. Now you will be asked to select the project
you can create the new project or select the existing project as I have already created the project from the firebase admin panel I will be selecting the existing project. After selecting this option you should see the list of all the firebase projects of the account you have logged in with, just select your project which is “firebase-hosting-example” in our case, and press enter.
Now you will be asked a few questions:
- What do you want to use as your public directory? (default ‘public’)
Enter the directory name you want as a public directory, as in our example it’s “public ”so we will just press the enter.
- Configure as a single-page app (rewrite all URLs to /index.html)? (y/N)
We will type “y” as our application in this example is a single-page app, if in your case that’s not the scenario you can just type “N” and press enter.
- Set up automatic builds and deploys with GitHub? (y/N)
As we don’t need any automatic builds and deploys for our app we will just type “N ”and press enter.
after answering all those questions you should see the following message
now you can just type the command
and press enter, it will start deploying your app when it will be completed you should see the following message
you can check your web app deployed by just visiting the Hosting URL which is `https://fir-hosting-example-75ec3.web.app` in our case.