One of the great things about Firebase Hosting is that the steps from installing Firebase CLI to the actual hosting are quite minimal. Once your local project is created, hosting it within Firebase is a matter of just pushing your project to the Firebase servers and your work is done.

Before we can get started with Firebase Hosting, we need to installing the Firebase CLI. To carry out this process you’ll need to have npm and Node.js installed — if you don’t have these installed yet then you can follow the instructions on how to do so at nodejs.org. Once done, you can installed the CLI by running the following command from within your command line:

npm install -g firebase-tools

At this point we have the command line tools installed, but our Firebase account isn’t connected — so we can’t do much else until we do this. If you run the following command from the command line

firebase login

If this is run successfully then an authentication screen will be launched in your browser. Here you will need to select the Google account that your Firebase project is linked to. Once done so, you should see a success message in the browser, which will also be echoed in your command line.

So now we have our CLI setup, we need some content to publish to the hosting platform. For this, we’re going to create a simple landing page to promote our new app that we’re building — this gives us some content that allows us to demo the hosting capabilities. If you have the knowledge to, or just want to, create this page then go for it — if you just want to put something together then you can use a generator to build the page for you. For the example I’ve used appsite.skygear.io to create me a simple landing page in a few minutes.

However you decide to build your page, we’re now ready to connect our CLI to our Firebase account and then deploy our site. For this we need to initialise our site as a Firebase Hosting project — we can do this by running the following command in our command line:

firebase init

This kicks off the process for configuring a Firebase CLI tools for our project, but it will only configure for a specific tool from Firebase which we must select from the given options:

At this point we have kicked off the initialisation process for the Firebase CLI. It’s important to note that this is only going to configure the project for the current directory that we are. So at this point you’ll want to use the directional keys to select the ‘Hosting’ option and hit the spacebar to select it.

Next you will be asked for the directory that should be used as the public root directory — this is the location of the index.html page that should be used. At the time of setting the public root directory, if there is not an index.html file located there then the setup tool will create one for you. For the default here you should be able to just type public or hit enter.

Finally you’ll be asked if you want to configure the setup as a single-page application. For this example we are, so we’ll decide yes for this. With this setting enabled, all URLs that are entered for the site will be redirected to the root page (index.html), causing the site to act as a single-page application.

Once you’ve completed the setup process, you’ll notice that a firebase.json has been created in the directory of your project. This is a collection of configuration details in a JSON format that are used by the CLI tool and Firebase Hosting when it comes to the deployment and hosting of your website. If you open that up, then you’ll notice that the contents will look something like so:

{
  “hosting”: {
    “public”: “public”,
    “ignore”: [
      “firebase.json”,
        “**/.*”,
        “**/node_modules/**”
    ],
    “rewrites”: [
      {
        “source”: “**”,
        “destination”: “/index.html”
      }
    ]
  }
}

Here we can see that the configuration we selected is reflected within this file.

– To begin with our hosting.public property has been assigned with the value of “public” — this is the directory where our public facing index.html page is located at, the one that will be shown on navigating to our Firebase Hosting url. This is a required property.

– The ignore property declares the files and paths that are to be ignored during the deploy process. This is for things such as dependencies and any files that are not required to be deployed to our firebase hosting location. This is a optional property.

– The rewrites property declares that all sources point to our index.html file. Remember, we declared our site as a single-page application which is why this configuration has been added.

Now that we are all setup to deploy our site, we can do this by running:

firebase deploy

At this point you will notice your website is being uploaded to Firebase Hosting. It may take a few minutes, but once it has completed you will be given the URL for your firebase project, as well as the URL for the location of your hosted site. If you open up this URL in your browser, you should be able to see the landing page for our application.

I hope this article has shown you how little steps are required to take a simple static site and push it to Firebase Hosting. This part of the Firebase suite allows you to take simple single page websites to web applications and host them on the Firebase servers — and from here it is all completely manageable from within the Firebase console. I’ll be looking more into the configuration of Firebase hosting in future posts — for now I hope this is enough to get you started!

Tweets by hitherejoe