Deploy with Firebase Hosting

It's been a lot of fun learning how to use the various tools that Firebase offers. Now we're moving onto the deployment stage! Firebase Hosting is wonderfully easy to use to deploy your website. Here is a quick walk-through!

This walk-through will assume that you already have a Firebase project for the backend. For some guidance on setting that up, please see the "Getting started with Firebase" section in my previous blog.

Installation

To get started, we need to have Firebase Tools installed locally on our computer. You will need to have Node.js installed before proceeding. Assuming we are good to go on that end, run the following in the terminal:

$ npm install -g firebase-tools

Next, we'll log into our Firebase account by running the following in the terminal:

$ firebase login

Initialize

Move into the directory of the project that is going to be deployed, and then run the following to initialize Firebase in that project:

$ firebase init

Follow the prompt to proceed, and then we'll see a list of Firebase services to select from to use for this project. Make sure to select the Firebase Hosting service before continuing.

We can then link a project from the backend (remember, we're logged into Firebase now so we can see a list of all existing Firebase projects). After selecting the appropriate project, you can go with the default option for the public directory. The next configuration will be a yes or no depending on whether or not your web app is a single page application (SPA).

Once the initialization is complete, we should see some new files created within our project directory. Let's just focus on the public folder. There should be a dummy index.html file that got created with it. This can be deleted and replaced by the existing index.html file from your project, along with css styling files and anything else from the project that you want deployed.

Testing

We might want to test out our site before deploying it. Firebase Tools includes a local development server that we can use to view and test our website in the browser. Simply run the following in the terminal:

$ firebase serve

We should then see the local server start and a link that can be followed to open up our website.

Deploy

Once we are ready to present our website, all we need to do is run this in the terminal:

$ firebase deploy

That. Is. It.

So simple, right??

Okay, so now for the exciting part! Go ahead and click on the url that's been provided for your project in the terminal (this can also be found back in the Firebase Console). Woohoo!

Now you can share your web app with the world!

🌏 🌍 🌎