Deploying Your Portfolio with Firebase

5 min readNov 8, 2019

(Dare I say, *Gulp, it’s not as bad as you think?)

As developers, we are all familiar with using localhost to view our code as we build and test it. However, when it comes time to show off our work localhost will not cut it. This is where deployment is critical, not just to show off our work but to allow users to use our product.

Deployment, unfortunately, is a scary word for developers. We already have to find a host for a database and another for storage. Now, we have to upload our site with all the API keys to our external sources and also implement security for user authorization. Firebase is the answer.

What is Firebase?

Google’s Firebase is a comprehensive development platform with many products that work great individually but even better together. Firebase also provides functionality like analytics, databases, and messaging.

I use Firebase for my portfolio website and have had nothing but success. I will share with you the minimal steps to get up and running as well as connecting to a custom domain.

Requirements

First, you need to have a Google account. If you do not sign up for one at google.com.

Also, you need to have Node.js installed on your machine. If you do not, you can download it from nodejs.org or install it with Homebrew.

Add Firebase to your JavaScript project

Create a Firebase project

In the Firebase console, click Add project then select or enter a Project name. Next, I recommend adding the optional Google Analytics to your project. Finally, click Create project. After resources are configured in the background, you will be taken to the overview page for your project.

Install CLI

Install the Firebase CLI by typing the following command inside VS Code’s terminal:

npm install -g firebase-tools

Next, navigate to your project folder (if not there already):

cd portfolio

Now, login to Firebase through the command line:

gmj@Garys-MacBook-Pro portfolio % firebase login
i  Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.? Allow Firebase to collect CLI usage and error reporting information? Yes
i  To change your data collection preference at any time, run `firebase logout` and log in again.Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd47bqnekij5i8b5pr03ho849e6.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloudplatformprojects.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ffirebase%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&state=161654030&redirect_uri=http%3A%2F%2Flocalhost%3A9005Waiting for authentication...

You will be re-directed to the sign-in page through your browser. Once logged in you will receive a success message.

Initialize Project

Now you need to initialize your Firebase project for your current directory with the command firebase init. You will then see the following:

Choose Hosting from the list of options. You will then be asked a series of questions.

First, select the Firebase project you created earlier.

Next, you will be asked where all of your website assets exist.

Next question, is your application a single page or not?

Last, it sees an index.html file already in your directory and asks to overwrite it. Just say no!

Now you can consider yourself initialized.

*Gulp

I used Gulp before deploying to build my app efficiently. Not necessary but I recommend it.

Deploy

This is the easiest of all the steps. Just run the following command:

firebase deploy

Voila! Your website is now live and can be accessed at the Hosting URL listed above. You can also visit your Project Console to customize your project. One option is connecting a custom domain.

*Connect to a Custom Domain

From your project console, select Hosting. Click on Connect domain and enter your domain name.

You will need to verify ownership by creating a TXT file on your domain’s DNS page with the name @ and the value you are given.

Google says it can take up to 24 hours to verify ownership but it worked for me in under ten minutes.

I’ve heard many horror stories from developers regarding deployment but thankfully I ran into only minimal issues which were all on my end, not Firebase’s.

Thanks for reading and pass along any suggestions for simplifying this process or some alternatives. Also, let me know if you have any questions.

Check out my portfolio at garymarinojr.com.