Web Development
Firebase Static Web Hosting

Firebase Static Web Hosting

Are you a just born Developer searching the internet to host your Single Page Application built with Frameworks like Angular Js or your Static Web App for free. Or you have built an App and want to create an App Landing page/ Promotion Website. Then Firebase Static Web Hosting has come to your rescue. Firebase allows you to easily deploy and host your app’s static assets (HTML, CSS, JavaScript, etc) or your Single Page Application. Moreover, all of your content is served over HTTPS i.e your site is automatically given an SSL certificate and your site is backed by a global CDN. And all that comes for free. All you need is to be ready with your Static Website’s Content.

Now follow the steps given below to host your Static Web App on Firebase.


STEP 1Install Node.js and npm

In this step, we will install node.js and npm which are required by the Firebase CLI (Command Line Interface) which we are going to install in Step 2. Follow the instructions below.

    • Open the Official page for Node.js downloads, https://nodejs.org/en/download/, download Node.js for Windows by clicking the “Windows Installer” option.
    • Download Nodejs
    • Run the downloaded Node.js .msi Installer. Go with the flow i.e accept the license, select the destination, and authenticate for the install. Installing node.js automatically installs npm.
    • Many a time, the npm installed with node.js is not up to date. Run the following command, npm i -g npm, in cmd to update npm.
    • To ensure both node.js and npm has been installed successfully, run the following commands. node -version and npm -version. These commands should return the version of node.js and npm installed.
    • Now you are ready to install the Firebase CLI.


STEP 2Install the Firebase CLI

After you have installed node.js and npm, we are ready to install the Firebase CLI. Just note that the Firebase CLI requires Node.js version 5.10.0 or greater, so make sure that you have. Now follow the instructions below.

    • Run the following command, npm install -g firebase-tools, to install the Firebase CLI. You should now have a globally available firebase command available from any terminal window on your machine.
    • Once you have installed the Firebase CLI, log in to your Firebase Account by running following command, firebase login, in cmd. This command will open an authentication screen in your browser to login into your firebase account.
    • Firebase Login cmd
    • Firebase Login Step One
    • Firebase Login Step Two
    • Firebase Login Step Three
    • To test that authentication worked, you can run firebase list in cmd to see a list of all of your Firebase projects. The list should be the same as the projects listed at Firebase console.
    • Firebase Project List


STEP 3Create Firebase Project

To host your static web app on firebase, you first need a Firebase project. If you don’t already have a firebase project then follow the instructions below to create one.

    • Open Firebase Console in your browser.
    • Click on Add project to create a new project.
    • Create Firebase Project Step One
    • Create Firebase Project Step Two
    • Your Firebase project is created now.


STEP 4Initialize your project directory

Many common tasks performed by the CLI, such as deployment, require a Project Directory. A project directory is any directory that has a firebase.json configuration file. The project directory should generally be the same as your source control root, and firebase.json generally lives alongside README and other top-level files. Follow the instructions below to initialize your project directory.


Before initializing your project, make sure you have created a sub-directory/folder named public inside your project directory and move all you web app content inside this folder. And also create an index.html file inside this sub-directory(public).

Now follow the instructions below.

    • Open cmd and change the current working directory to your project directory by running following command, cd *path to your directory*.
    • After changing the path to your project directory, run command firebase init in cmd.
    • After running above command, it will ask you to choose the Firebase CLI features you want to use. It includes storage, database, hosting and some other. As right now, we are concerned with hosting you must choose hosting feature. And don’t worry you can always run init again later to add a new feature.
    • Next, it will ask you to choose a default Firebase project. This associates the directory with a project so that when you run project-specific commands such as firebase deploy from within your project directory, the correct project is used. It is also possible to associate multiple projects (such as a staging and production project) with the same directory, which we will discuss later in this post.
    • At last, it will ask you to choose your public directory which is public by default. And also it will ask a question in the context of single page application which you must answer as yes if you are deploying a single page application.
    • Your project directory initialization is complete now.
    • Initialize Project Directory


STEP 5Deploy your Static Web App content

    • Now deploy your static web app content by running the command, firebase deploy in cmd.
    • After successful deployment, it will show you the hosting URL. You can visit this URL to see your hosted content.
    • In future also, if you make any changes to your static web app, you need to run above command to deploy changes to Firebase hosting.
    • You can roll back Firebase Hosting deploys by visiting the Hosting panel for your project in the Firebase Console and choosing the Rollback action for the desired release.
    • Firebase Deploy
    • Hurray! You have successfully hosted your static web app on Firebase.


Before running firebase deploy command in cmd, you must change the path to your project directory.


STEP 6Connect your Domain

If you have your own domain name, you can connect it to your firebase hosting. If you want to connect your domain then follow the instructions below, otherwise move to next step.

    • Click on Connect Domain button.
    • Firebase Hosting Step One
    • Firebase Hosting Step Two
    • Connect Domain Step One
    • Then enter your domain name.
    • Connect Domain Step Two
    • After that add the provided A records to your domain by visiting your DNS provider or registrar. Your site will show a security certificate warning for a few hours until the certificate has been provisioned.
    • Connect Domain Step Three
    • Remember to remove your old A records and any AAAA records from your DNS provider. Also, some DNS providers use ‘@’ for your domain name.
    • After your certificate will be provisioned, your domain will start pointing to firebase hosting.


Associate Multiple Projects

You can associate multiple Firebase projects with the same working directory. For example, you may want to use one Firebase project for staging and another for production. Using different project environments allows you to verify changes before deploying to production. The firebase use command lets you switch between aliases as well as create new ones.

Adding Project Alias

When you select a project during firebase init, an alias called default is created for you. To create a new alias, run command firebase use –add

This command allows you to select a Firebase project and give it a named alias. Alias definitions are written to a .firebaserc file inside your project directory.

Using project aliases

You can view a list of currently defined aliases for your project directory by running firebase use. To switch between aliases, run command firebase use *alias_name*

While using an alias, all project-specific commands (like firebase deploy ) will run against the currently used project. If only one alias is defined in your project directory it will be used automatically.


Now I have covered all the steps to deploy your static Web App to Firebase hosting. But if you want more information you can visit below-given links.


If you face any problem in the tutorial above, you can always leave a reply or reach me through the chat option given in bottom right corner of the window.

Share this Story

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

About Me

I'm a college student pursuing B.tech. I created this website (Blog) to share my learnings with the people who search for the same content/knowledge.