Automatically deploy a Gatsby site to Firebase Hosting

2,204
CircleCI
CircleCI’s continuous integration and delivery platform helps software teams rapidly release code with confidence by automating the build, test, and deploy process. CircleCI offers a modern software development platform that lets teams ramp quickly, scale easily, and build confidently every day.

This post was written by Kevin Ndung'u, a Web Developer from Nairobi, Kenya


Firebase Hosting is a web application hosting platform by Google. Through this service, you can host your web apps on Google’s infrastructure. It enables easy one-step deployment and has other cool features such as fast hosting from CDNs and rollbacks. A good overview of the service is available in the Firebase Hosting Docs.

Gatsby is a framework that enables you to create fast React-based apps and websites. It allows you to build these websites with data fetched from a wide variety of sources, including markdown files, APIs, and even CMSs. It then combines this data with a React-based frontend architecture to build extremely fast interactive websites. Gatsby compiles web apps to optimised static files, which we will deploy to Firebase Hosting. I think it’s amazing and I’m glad to share it with you!

In this post, we will setup a simple Gatsby site, host the code on a GitHub repository, and setup automatic deployment of our web application to Firebase Hosting using CircleCI.

Prerequisites

In order to go through this tutorial, you will need to install the following:

  1. Git
  2. Node.js

Note: You’ll also need to have a Google account in order to use Firebase Hosting.

Why Gatsby?

I chose Gatsby simply because it will enable us to focus on the high level details. For example, rather than building pages from scratch, figuring out routing, adding 404 pages, and so on, we will get all these built in to the starter project that we will generate shortly. Gatsby affords us these advantages out of the box, but the concepts of hosting will still apply to any other type of web application that can be compiled to static files including Vue and Angular apps or even a website generated by a static site generator.

Gatsby project setup

First, we need to install Gatsby in our local development environment. We can do this by running:

npm install --global gatsby-cli

After the installation is complete, we will have the gatsby command available. Now, let’s use the Gatsby CLI to generate a new site:

gatsby new gatsby-site

Next, we need to change directories to the newly created gatsby-site folder:

cd gatsby-site

And finally, we can explore our generated site by starting the development server:

gatsby develop

Your new site is now accessible on http://localhost:8000.

If everything ran successfully, you now have a Gatsby site running locally. Go ahead and explore the site. It looks like this:

If you take a look around through the generated files, you’ll find that Gatsby’s folder structure is simple to follow. For example, the code for the homepage can be found in src/pages/index.js. Also notice that links between different pages work as expected and we also have a 404 page set up. You can test the 404 page by going to a non-existent route.

Gatsby provides these low level details, such as routing, out of the box and gives us a functional web application that we can now deploy to Firebase Hosting.

Pushing to GitHub

At this point, let’s initialise a new Git repository and push the code to GitHub. Go ahead and initialise a new Git repository inside the gatsby-site folder and create an initial commit with these lines:

git init
git add -all
git commit -m "Generate Gatsby site"

After this, proceed to create a new repository on GitHub and push the code to the repository.

This guide is an excellent resource you can refer to if you’re not familiar with GitHub.

Firebase setup

At this point, we have a functional website that we can now deploy to Firebase Hosting. Before we do this, we need to create a new project on Firebase using these three simple steps:

  • Give your project a name in the modal that shows up and click Create project.

Once the project is created, we need to setup Firebase locally in order to link our local repository to the Firebase project. Install the Firebase command line tools by running:

npm install -g firebase-tools

We’ll also need to install the firebase-tools package locally to our project as a devDependency. This will come in handy later on when integrating with CircleCI, which does not allow installing packages globally by default. So let’s install it right now:

npm install -D firebase-tools

Afterwards, we need to sign in to Firebase to connect the CLI to the online Firebase account. We can do this by running:

firebase login

Once you are logged in, we can now initialise our project:

firebase init

This action will produce this prompt where we will select Hosting:

For the rest of the prompts, select the options as shown in the next screenshot:

After the prompts are complete, the Firebase CLI generates two files:

  • .firebaserc
  • firebase.json

Note: The firebase.json file enables configuring custom hosting behavior. To learn more about this, visit the Firebase full-config docs.

In the case that the Firebase CLI does not load your projects, you can add the project ID manually in the generated .firebaserc file:

{
  "projects": {
    "default": "gatsby-site-43ac5"
  }
}

This is also a good point to commit the new files to our repository and push the code to GitHub.

With this, we have connected our code to our Firebase project and we can now try out a manual deploy from our development environment.

Manual deployment to Firebase

The first step in manual deployment is generating an optimised production build. In our case, gatsbyhas us covered since it includes this by default. To generate it, run the command:

gatsby build

This generates an optimised static site in the public directory. This is the directory we will be deploying to Firebase Hosting. To manually deploy the public directory to Firebase Hosting, it only takes one command:

firebase deploy

If everything works as expected, Firebase will deploy our site and give us a link to the deployed site’s URL.

You’ll also notice a new .firebase folder created by Firebase to store it’s cache. Since we don’t want this folder in our repository, we can add the folder name to the .gitignore file so it is ignored by Git.

In the next step, we are going to automate the deployment with CircleCI so that we can deploy new changes pushed to the repository immediately.

CircleCI configuration

To build our project with CircleCI, we’ll need to add a configuration file that instructs CircleCI to build our web application and automatically deploy it to Firebase each time we make changes to our code.

In our project’s root folder, create a folder named .circleci and inside it, create a config.yml file. CircleCI requires that the config file be located here.

Here’s the config file we’ll use for our project:

# CircleCI Firebase Deployment Config
version: 2
jobs:
  build:
    docker:
      - image: circleci/node:10
    working_directory: ~/gatsby-site
    steps:
      - checkout
      - restore_cache:
          keys:
            # Find a cache corresponding to this specific package-lock.json
            - v1-npm-deps-{{ checksum "package-lock.json" }}
            # Fallback cache to be used
            - v1-npm-deps-
      - run:
          name: Install Dependencies
          command: npm install
      - save_cache:
          key: v1-npm-deps-{{ checksum "package-lock.json" }}
          paths:
            - ./node_modules
      - run:
          name: Gatsby Build
          command: npm run build
      - run:
          name: Firebase Deploy
          command: ./node_modules/.bin/firebase deploy --token "$FIREBASE_TOKEN"

Let’s do a quick review of the config file.

  • First, the version key enables us to specify that we are using CircleCI 2.0.
  • Next up, we specify the base Docker image where our code will be run. In this case is a container based on Node 10, which is the current version at the time of writing this. You can use a later version if one is available.
  • The working_directory option specifies the location where our code will be cloned.
  • Next is the restore_cache section, which instructs CircleCI to restore any previously installed dependencies. Here we’re using a checksum of the package-lock.json file to detect whether to install the dependencies afresh or to use the cache to restore previously downloaded packages.
  • The next step is installing the dependencies through the npm install command.
  • The save_cache section instructs CircleCI to save the dependencies after installing them.
  • We then run the Gatsby Build command. This builds the optimized production version of the site, which is ready to be deployed.
  • Finally, we run the Firebase Deploy command that deploys our code to Firebase Hosting. In this step, you’ll notice that we need a Firebase token to allow deploying the app to our account. The command specifies that the token should be obtained from the FIREBASE_TOKEN environment variable. We’ll get this token in a moment.

Additionally, note the change in how we are running the firebase command from our locally installed dependencies rather than as a global command. As mentioned earlier, installing packages globally with CircleCI can be an issue, so we install all the packages we need locally in our project.

Integrating CircleCI and GitHub

We now have a config file and we can go ahead and integrate CircleCI with our GitHub repository that we created earlier.

  • Create an account on CircleCI, if you haven’t already.
  • Once you are logged in, ensure your account is selected on the top left corner.

  • Click Add Projects on the left sidebar.
  • On the next page, search for the name of your GitHub repository then click Set Up Project next to it.

  • On the next page, there’s a list of steps that are needed to build our project, the most important one being adding the CircleCI config file. Since we already have this file in our repo, let’s scroll all the way to the bottom and click Start Building.

Our build will finally start running, but it predictably fails in the Firebase deployment step. 😢

Fortunately, I know why the deploy fails. It’s because we’ve not yet added the Firebase deploy token to CircleCI. Let’s work on fixing this in the next section.

Getting a Firebase login token to use for deployments

In the final step, we will need to generate a Firebase token that we’ll use to allow access to our account. This token will enable CircleCI to deploy to Firebase on our behalf, since we cannot login using Firebase’s interactive prompt in a CI environment.

In our local development environment, let’s run this command to generate the token:

firebase login:ci

This will open up a browser window where you’ll be prompted to login to your Firebase account. Once you’re signed in, a token will be generated. You should get a result similar to the following after authenticating via the web browser.

Now that we have our token, all that’s left is to add the token as an environment variable in CircleCI so that we can use it in our project. Our deployment command expects to find the value in the FIREBASE_TOKENenvironment variable.

Adding the Firebase Token to CircleCI

These are the steps we’ll need to take to add the token:

  • Go to your project’s settings by clicking the gear icon next to your project.
  • Under the Build Settings section, click Environment Variables.
  • Click Add Variable.
  • In the modal that appears, enter FIREBASE_TOKEN in the name field, add the token we got from Firebase in the value field, then finally click Add Variable to finalize adding the variable.

  • With this step complete, we can now rerun our build by clicking Rerun Workflow on the right of the CircleCI project page.

We now have completed a successful deployment of our web application to Firebase Hosting using CircleCI! 🎉

Conclusion

This concludes our exploration of deploying web applications to Firebase using CircleCI. From now on, when we make updates to our Gatsby site and push the changes to GitHub, they will automatically be deployed to Firebase Hosting. It really is a great combination.

This approach will work for any other frontend projects and is not specific to Gatsby. Firebase provides the hosting for the web applications and CircleCI helps in automating and simplifying the process. Go forth and deploy! 🚀

For more information on these technologies, see the following resources:


Kevin Ndung’u is a software developer and open source enthusiast currently working as a software engineer at Andela. He is passionate about sharing his knowledge through blog posts and open source code. When not building web applications, you can find him watching a game of soccer.

CircleCI
CircleCI’s continuous integration and delivery platform helps software teams rapidly release code with confidence by automating the build, test, and deploy process. CircleCI offers a modern software development platform that lets teams ramp quickly, scale easily, and build confidently every day.
Tools mentioned in article
Open jobs at CircleCI
Interested in CircleCI Career? Join O...
Japan
<p><span style="font-weight: 400;">Stay connected by joining our Talent Network!&nbsp;</span></p> <p><span style="font-weight: 400;">If we currently do not have any opportunity available that aligns with your career goals or are just curious about hearing more about working at CircleCI Japan, please feel free to submit your resume/Linkedin URL to our Talent Network! We will review all applicants on a regular basis and we will reach out to you when the timing is right or have our casual conversation.&nbsp;</span></p> <p><span style="font-weight: 400;">We look forward to staying connected with you as we will continue to grow and expand our business!</span></p> <p><span style="font-weight: 400;">弊社のキャリアネットワークへ登録しませんか?</span></p> <p><span style="font-weight: 400;">現時点で希望する職種での募集がないけれど、チャンスがあれば今後CircleCIの選考チャレンジしたい方やCircleCIへのキャリアに興味がある方、是非お気軽にレジュメもしくはLinkedin URLを是非ともご登録ください!その後、都度、カジュアル面談・選考の打診をさせていただく流れとなります。</span></p> <p><span style="font-weight: 400;">特定の職種に限定することなくご登録いただけますので、CircleCIキャリアの可能性やキャリア形成についてお伺いしたい方は是非お気軽にご登録ください。</span></p> <p><strong>Prospect positions we are seeking in the future</strong></p> <p><strong>将来募集が検討されるポジション一覧;</strong></p> <ul> <li style="font-weight: 400;"><span style="font-weight: 400;">Account Executive, SMB &amp; Enterprise industries</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Account Executive, APAC regions</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Sales Development Representative, Japan or APAC</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Customer Success Representative</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Marketing</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Support Technical Engineer</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">DevOps Engineer</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Solutions Engineer</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Full Stack Engineer</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Back-end Engineer</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Front-end Engineer</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Product Manager</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Project Manager</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Infrastructure Engineer&nbsp; &nbsp; Others...</span></li> </ul> <p><strong>Please note below your registration;</strong></p> <p><span style="font-weight: 400;">*This is not the official application. If you are interested in applying right away, please go to each opening job posting page. The recruiter will check your resume and if we find our jobs that will match with your experience and interests, we will contact you within 2 weeks. If you haven’t received any contact from us, please note that we don’t have any matching positions but we will update you if a position becomes available that is a match to your profile.&nbsp;</span></p> <p><span style="font-weight: 400;">こちらは正式応募ポジションではございません。もし正式な応募をご希望される際は、該当する募集ページからの応募をお願い致します。また、マッチングする募集ポジションがあった場合、2週間以内にリクルーターからポジションのご案内のご連絡を差し上げます。3週間経過しても連絡がなかった場合は、恐れ入りますが現時点でご提案できるポジションが無いとのことでご理解いただけましたら幸いです。その様な場合でも、カジュアルミーティングセッションの実施や月毎に最新情報を配信予定ですので是非チェックください!</span></p> <p><span style="font-weight: 400;">*Please note that this registration is </span><strong><em>only for people who have Japanese residency and who are eligible to work in Japan currently.</em></strong></p>
DevOps Customer Engineer, EMEA
London
<p><span style="font-weight: 400;">As a DevOps Customer Engineer, you will be responsible for providing world class post-sales technical leadership for our highest value customers. Working directly with end users and up to senior decision-makers within customer software engineering teams, you will be the subject matter expert on both the CircleCI platform and Continuous Integration and Deployment as a general practice. You will be responsible for delivering value by driving adoption of CircleCI across the depth and breadth of customer organisation.&nbsp;</span></p> <p><span style="font-weight: 400;">The successful candidate for this job will have a strong technical aptitude and preferably some experience in CI/CD and DevOps practices. You will have a self-starter mentality and the ability to create and maintain deep, lasting relationships with customers.&nbsp; You’re going to be dealing with very technical users and complex issues, but you’re also tasked with creating excitement and loyalty in the customers you interact with.</span></p> <h3><strong>About Customer Engineering at CircleCI</strong></h3> <p>CircleCI’s Customer Engineering organization’s goal is to make life easier for our customers and leave them with the “wow” experience of building and testing their applications with ease. Customer Engineering works with customers to understand their technical and business needs and requirements, from onboarding to implementation to scale. Customer Engineering currently comprises DevOps Customer Engineering (your team), Solutions Engineering (your pre-sales counterparts), and Support Engineering (the global support team). There is opportunity for both horizontal and vertical growth and promotion within, as well.</p> <h3><strong>What you’ll do:&nbsp;</strong></h3> <ul> <li style="font-weight: 400;"><span style="font-weight: 400;">Work closely with customers to help them setup CircleCI, both on circleci.com and in their own private cloud, including any custom setup they may need.</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Partner with your Customer Success Manager to onboard and support our customers as well as act as the dedicated technical point of contact.</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Be creative and scrappy in solving customer technical problems and answering customer questions.</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Build best practices for onboarding across different technologies.</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Act as the voice of the customer and use customer feedback to help Product and Engineering improve the product.</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Code and commit relevant upgrades and changes to the CircleCI codebase.</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Work closely with the Product and Engineering teams to improve the customer experience across the whole platform.</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Become an expert on the CircleCI solution.</span></li> </ul> <h3><strong>What we’re looking for:&nbsp;</strong></h3> <ul> <li style="font-weight: 400;"><span style="font-weight: 400;">3+ years of technical product support, engineering, or experience deploying software in the enterprise.</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Experience working directly with customers to debug common errors.</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">You can tie business problems to technical solutions and understand technology value propositions.</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Demonstrated and proven capacity to quickly absorb new concepts and technologies.</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">You have spent a decent amount of time using and scripting *nix.</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Git and GitHub knowledge required.</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">You’ve developed and maintained an app or two in a high-level programming language.</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">You believe that the best way for all to succeed is to honestly discuss product and company abilities and limitations with customers.</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Strong ops / infrastructure knowledge, especially networking and security.</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Great relationship building skills and a good people person.</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Exceptional written and oral communication skills.</span></li> </ul> <h3><strong>Bonus points!</strong></h3> <ul> <li style="font-weight: 400;"><span style="font-weight: 400;">Experience with build, test, and deployment automation, either as a practitioner or in a customer-facing role.</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Ability to troubleshoot networking issues that may prevent communication between different components.</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Working knowledge of Docker or Linux containers.</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Experience with popular web app frameworks (e.g. Rails, Django) and/or mobile app development (iOS, Android).</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Knowledge of Go and Clojure a plus!</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Experience using and automating a major IaaS like AWS, GCP, or Azure.</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Management of autoscaling technologies (e.g. launch configurations in AWS).</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Familiarity deploying and debugging distributed systems. Familiarity with Nomad, specifically, a plus!</span></li> </ul> <h3><strong>About CircleCI&nbsp;</strong></h3> <p>CircleCI is the world’s largest shared continuous integration and continuous delivery (CI/CD) platform, and the central hub where code moves from idea to delivery. As one of the most-used DevOps tools that processes more than 1 million builds a day, CircleCI has unique access to data on how engineering teams work, and how their code runs. Companies like Spotify, Coinbase, Stitch Fix, and BuzzFeed use us to improve engineering team productivity, release better products, and get to market faster.</p> <p>Founded in 2011 and headquartered in downtown San Francisco with a global, remote workforce, CircleCI is venture-backed by IVP, Sapphire Ventures, Owl Rock, NextEquity Partners, Scale Venture Partners, Threshold Ventures, Baseline Ventures, Top Tier Capital Partners, Industry Ventures, Heavybit, and Harrison Metal Capital. Learn more at&nbsp;<a class="c-link" href="https://circleci.com/" target="_blank">https://circleci.com</a>.</p> <p>CircleCI is proud to be an Equal Opportunity and Affirmative Action employer. We do not discriminate based upon race, religion, color, national origin, sexual orientation, gender, gender identity, gender expression, transgender status, sexual stereotypes, age, status as a protected veteran, status as an individual with a disability, or other applicable legally protected characteristics. We also consider qualified applicants with criminal histories, consistent with applicable federal, state and local law.</p>
Senior Staff Software Engineer
US, Canada
<p><span style="font-weight: 400;">At CircleCI, we enable developers to do better work every day. We focus solely on helping our customers ship quality code, faster. Our organization is growing to meet the demands of our customers, and we need an experienced Backend Architect to join our adventure!</span></p> <p><span style="font-weight: 400;">As a Senior Staff Engineer you will oversee the technical aspects of our direction and quality of delivery within our Application Engine group. This set of teams is accountable for the underlying functions that power our products at scale. Your deep knowledge of API design and backend services will help us deliver functionality that empowers developers worldwide. You'll be at the forefront of crafting powerful solutions and setting the standards for backend engineering across our organization.</span></p> <h2><strong>What you’ll do:</strong></h2> <ul> <li style="font-weight: 400;"><strong>Guide several teams</strong><span style="font-weight: 400;"> in anticipation of future use cases and help them make design decisions that minimize the cost of future changes. </span><span style="font-weight: 400;">You will support and empower these teams to do their best work.</span></li> <li style="font-weight: 400;"><strong>Be a strategic partner </strong><span style="font-weight: 400;">and actively work with engineering teams and cross-functionally with other departments to develop and apply scalable solutions.</span></li> <li style="font-weight: 400;"><strong>Regularly mentor and coach engineers</strong><span style="font-weight: 400;"> to expand their skills and support their career growth, including pair programming.</span></li> <li style="font-weight: 400;"><strong>Take leadership</strong><span style="font-weight: 400;"> on particularly critical code reviews in multiple code languages as well as </span><span style="font-weight: 400;">develop a cross-organizational technical strategy and architectural vision by analyzing cross-team challenges and designing measurable solutions.</span></li> <li style="font-weight: 400;"><strong>Contribute to building the standard methodologies</strong><span style="font-weight: 400;"> of a growing organization.</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Share rotating on-call duties for our </span><strong>incident response.</strong></li> </ul> <h2><strong>What we're looking for:</strong></h2> <p><span style="font-weight: 400;">We’re seeking someone who thrives in a collaborative environment, is naturally curious and interested in learning, has strong communication and collaboration skills, and helps others grow by sharing their expertise and encouragement.</span></p> <ul> <li style="font-weight: 400;"><strong>Experience:</strong><span style="font-weight: 400;"> You bring 10+ years of technical leadership experience working in a modern cloud company and expertise in distributed systems. You're experienced with at least some of our tech stack, are willing to learn new technologies and languages, and aren’t afraid to admit what you don’t know. Learn more about our tech stack</span><a href="https://stackshare.io/circleci/circleci"><span style="font-weight: 400;"> </span><span style="font-weight: 400;">here</span></a><span style="font-weight: 400;">.</span></li> <li style="font-weight: 400;"><strong>Collaboration:</strong><span style="font-weight: 400;"> You thrive in a collaborative environment, are naturally curious and interested in learning, and enjoy helping others grow by sharing your expertise and encouragement.</span></li> <li style="font-weight: 400;"><strong>Communication</strong><span style="font-weight: 400;">: You encourage open communication both asynchronously and synchronously, value feedback loops, and are open to being wrong and having your mind changed. You’re proficient in English in verbal and written form.</span></li> <li style="font-weight: 400;"><strong>Delivery</strong><span style="font-weight: 400;">: You know the ins and outs of modern software engineering practices, agile/scrum methodologies, and how to apply them to drive effective, timely, high-quality delivery. You provide visibility into your work and progress.</span></li> <li style="font-weight: 400;"><strong>Leadership</strong><span style="font-weight: 400;">: You foster a culture of ideas, write problem statements, and proactively engage with and educate both business partners and other engineers cross-functionally to understand the impact of their work. You have experience partnering with product and business leaders while providing technical direction for a team with engineering managers and engineers.</span></li> <li style="font-weight: 400;"><strong>Adaptability</strong><span style="font-weight: 400;">: You're comfortable with ambiguity and figuring things out as they evolve, change, and new requirements emerge.</span></li> <li style="font-weight: 400;"><strong>Remote work</strong><span style="font-weight: 400;">: You are comfortable working with distributed teams across multiple time zones. Being remote-first, we foster a culture that is inclusive of remote workers while allowing everyone to be the most productive. Learn more about our remote-first culture</span><a href="https://circleci.com/blog/what-it-means-to-be-remote-first-vs-remote-friendly/"><span style="font-weight: 400;"> </span><span style="font-weight: 400;">here</span></a><span style="font-weight: 400;">.</span></li> </ul> <h2><strong>CircleCI Engineering Career Growth System:</strong></h2> <p><span style="font-weight: 400;">This role equals level E5 on our</span><a href="https://drive.google.com/file/d/1F3xzmbdsMvfDZwZesvxcEIIBn2TmI4sg/view"><span style="font-weight: 400;"> Engineering Competency Matrix</span></a><span style="font-weight: 400;">, our internal career growth system for engineers. Find more about the matrix in this</span><a href="https://circleci.com/blog/why-we-re-designed-our-engineering-career-paths-at-circleci/"><span style="font-weight: 400;"> blog post</span></a><span style="font-weight: 400;">.</span></p> <p><span style="font-weight: 400;">We will ensure that individuals with disabilities are provided reasonable accommodation to participate in the job application or interview process, to perform essential job functions, and to receive other benefits and privileges of employment. Please contact us to request accommodation.</span></p> <h2><strong>About CircleCI</strong></h2> <p><span style="font-weight: 400;">CircleCI is the world’s largest shared continuous integration and continuous delivery (CI/CD) platform, and the central hub where code moves from idea to delivery. As one of the most-used DevOps tools that processes more than 1 million builds a day, CircleCI has unique access to data on how engineering teams work, and how their code runs. Companies like Spotify, Coinbase, and BuzzFeed use us to improve engineering team productivity, release better products, and get to market faster.</span></p> <p><span style="font-weight: 400;">CircleCI is proud to be an Equal Opportunity and Affirmative Action employer. We do not discriminate based upon race, religion, color, national origin, sexual orientation, gender, gender identity, gender expression, transgender status, sexual stereotypes, age, status as a protected veteran, status as an individual with a disability, or other applicable legally protected characteristics. We also consider qualified applicants with criminal histories, consistent with applicable federal, state and local law.</span></p> <p>Colorado Salary Range: $160,000 - $200,000/year</p>
VP, Product Engineering
Boston, Toronto,Montreal, Paris, US- Eastern Time, Canada - Eastern Time, - France, Netherlands
<p>&nbsp;</p> <p>Reporting to the SVP of Engineering, JP LeBlanc, the VP of Product Engineering will lead the next stage of rapid engineering growth with an emphasis on balanced scaling. Bringing an operational perspective to every aspect of the organization; from employee lifecycle to delivery processes, you will make it easier for our team of outstanding engineers and managers to focus on delivering customer value!</p> <p>You will work across the extended executive team to build a Product Engineering team that is able to sustainably deliver against goals. You'll drive long-term planning cycles, coordinating inputs from inside and outside of engineering to set shared goals with corporate strategy, and ensuring everyone involved has what they need to achieve those goals.</p> <h2><strong>Role and Responsibilities </strong></h2> <p>Partner with the Engineering Leadership Team, including your engineering leaders to build an organization capable of delivering against the company’s long-term goals.</p> <ul> <li>Ensure members of the engineering organization and all other partners have the required transparency into product delivery to handle their own outcomes</li> <li>Focus engineering efforts through effective use of the OKR framework</li> <li>Simplify and consolidate metrics, processes, and tools to enable everyone to get their job done with minimal overhead</li> <li>Model, plan, forecast, and supervise efforts across the organization on multiple time horizons</li> <li>Set a new standard for operational excellence and grow everyone around you</li> <li>Build the space for engineers to do extraordinary work while growing personally</li> <li>Establish a team to help you do all of the above!</li> </ul> <h2><strong>Professional Qualifications </strong></h2> <ul> <li>Confirmed experience in software engineering and engineering management, including VP-level roles</li> <li>Experience scaling in a late-stage VC-funded startup with an engineering team in the 100s</li> <li>Track record enabling highly distributed teams, including international</li> <li>Deep understanding of the software delivery lifecycle</li> <li>Proven ability to support sustainable scale through enablement</li> <li>Strong financial perspective with a focus on return on investment for engineering effort</li> <li>Ability to generate outcomes by driving accountability above, below, and around you</li> <li>Desire to ask the right questions to help prioritize outside your own areas of expertise</li> <li>Strong opinions developed through experience and the ability to adapt those experiences to new environments</li> <li>History of mentoring senior team members to do their best work</li> <li>A desire to pursue excellence through small increments of improvement</li> </ul> <h2><strong>Engineering at CircleCI is Remote-First</strong></h2> <p>Being remote-first, we foster a culture that is inclusive of remote workers while allowing everyone to be the most productive. <strong>Read more about our remote-first culture </strong><strong><a href="https://circleci.com/blog/what-it-means-to-be-remote-first-vs-remote-friendly/" target="_blank">here</a></strong><strong>. </strong></p> <p>We will ensure that individuals with disabilities are provided reasonable accommodation to participate in the job application or interview process, to perform essential job functions, and to receive other benefits and privileges of employment. Please contact us to request accommodation.</p> <h2><strong>About CircleCI</strong></h2> <p>CircleCI is the world’s largest shared continuous integration and continuous delivery (CI/CD) platform, and the central hub where code moves from idea to delivery. As one of the most-used DevOps tools that processes more than 1 million builds a day, CircleCI has unique access to data on how engineering teams work, and how their code runs. Companies like Spotify, Coinbase, and BuzzFeed use us to improve engineering team productivity, release better products, and get to market faster.</p> <p>CircleCI is proud to be an Equal Opportunity and Affirmative Action employer. We do not discriminate based upon race, religion, color, national origin, sexual orientation, gender, gender identity, gender expression, transgender status, sexual stereotypes, age, status as a protected veteran, status as an individual with a disability, or other applicable legally protected characteristics. We also consider qualified applicants with criminal histories, consistent with applicable federal, state and local law.</p> <p>Colorado Salary Range:</p>
Verified by
Developer Evangelist
Support Engineer
Vice President of Marketing
Technical Content Marketing Manager
Head of DevRel & Community
You may also like