Deploying a Gatsby Site to Firebase with CircleCI

Coronado Beach, California. © 2018 Jonathan Cary.

I’ve been building static sites for a while now, using generators like Jekyll and Hugo. While these have been great, I‘ve been searching for the “holy grail” of website development. Taking the best of the dynamic and static worlds and fusing them together. Because let’s face it, we all want our static sites to be a little more dynamic, but we still want all the benefits static sites offer. Fortunately, I think I might have found this “holy grail” with Gatsby.js.

I don’t think it’s fair to call Gatsby a static site generator, because it’s much more than that. If you haven’t heard of Gatsby before, definitely go check it out.

I’ve been wanting to learn React and modern javascript for a while, and Gatsby seems like a great way to do that coming from purely using static site generators. Right now I’m still diving into everything and building my portfolio website using it, but I wanted to share how I am hosting my Gatsby sites.

While Netlify and S3 are great places for hosting (some of my sites use both of these), I’ve always had a slight preference for Firebase Hosting. However, it doesn’t come with one important feature that Netlify does, Continuous Deployment. Therefore, unless you want to run firebase deploy every time you want to deploy your website, you’ll need to set up a service like Circle CI. So this post will help you get everything up and running. Let’s dive in!

*Note: I’m assuming you already know how to create a Gatsby website. If you don’t, they have AMAZING docs and tutorials, so go check them out!

Setting Up Firebase

There aren’t too many steps to get Firebase up and running. Once you login or create an account on the Firebase website, you’ll want to add a project. Then you can go to Hosting in the sidebar, and click Get Started. This will show you how to add the Firebase Tools CLI, create a Firebase project in your folder and how you can manually deploy a site. And of course, you can add any custom domains too.

In the CLI, after you run firebase init you’ll want to select Hosting and then the project you created. Under Hosting Setup, you can keep the default public. Then type N to decline single-page app rewrites and choose not to overwrite your 404 and index pages.

Now you should be able to run gatsby build and then firebase deploy to deploy your Gatsby website to Firebase! If this works for you we are now ready to get continuous delivery working with Circle CI.

Updated package.json file.

But before we setup Circle CI, we’ll need to add Firebase Tools as a dev dependency in your Gatsby project. You can do this by running npm install --save-dev firebase-tools. If this is successful you can go and check your package.json file and you should see it added. This is how mine looks.

*This is also probably a good time to add your project to GitHub if you haven’t already.

Setting Up Circle CI

We’re now ready to setup Circle CI.

First, at your project’s root, you’ll create a folder called .circleci and then add the following config.yml file inside.

*Make sure you use the same node.js version you‘re developing your Gatsby site with. I’m using Node 8, so that’s what I have in the config file.

Next, we’ll need to generate a token in Firebase for Circle CI to use as an environment variable. To do this run firebase login:ci and copy the token it generated.

Now you’ll want to login to Circle CI and add your project’s git repository to Circle CI. When setting up the project, you can select Linux as the Operating System, and Node as the language and then click “Start Building.” The first build will fail because we haven’t added our Environment Variable for Firebase yet! To fix this, go to the project’s settings and then “Environment Variables.” When adding the variable, under name type FIREBASE_TOKEN and then paste the token you generated under value.

Now make a commit to your repo, and voilà! You are now using Circle CI to deploy your Gatsby site to Firebase!

You can check out a sample project repo here:

Hope you enjoyed this tutorial! Let me know if you have trouble getting this to work.

Previously, I have not been an active participant in any dev circles, but I’m really wanting to change this. So plan on seeing more posts like this as I dive into Gatsby and many other things. Once my portfolio site is finished, I plan on making it a public repository and creating some tutorials about it. Time to start paying back for all the amazing tutorials I’ve read, that have gotten me to where I am!