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.

  1. Install Node.js (https://www.nodejs.org/)
  2. Install firebase tools using npm (npm install -g firebase-tools)
  3. 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

— public
— — index.html

now open a terminal within a “public” folder and enter the command

firebase init

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:

  1. 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.
  2. 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.
  3. 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

firebase deploy

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.

A software engineer who not only loves to learn exciting technologies but also likes to write about them. 👉 contact@usakhtar.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How To Complete a Project When You’re Not An Expert In The Programming Language

How to Develop Function Compute with WordPress Applications

Beginners guide to Docker

Getting Started with Git

SOLID. Software Design Principles

Is The Cloud Really The Savior?

cloudcomputing

An Insight into MongoDB Sharding Chunk Splitting and Migration

Java Agent - A powerful tool you might have missed.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Usman Akhtar

Usman Akhtar

A software engineer who not only loves to learn exciting technologies but also likes to write about them. 👉 contact@usakhtar.com

More from Medium

Quickstart: Sign in users and get an access token in a Node web app using the auth code flow

The Pros and Cons of Codeacademy Pro

Build Blog Site using Gatsby JS — Part 2 (Chakra UI & Home Page)

Simplifying Web development by mocking API response