How to Deploy your Probot App with Vercel
In this blog post, we’ll show you how to deploy Probot Apps to Vercel, a platform that makes frontend and serverless deployments easy! We’ll cover everything from linking a Vercel project to your GitHub Repo, to configuring your Probot app for deployment. By the end of this post, you’ll be able to deploy your Probot app with just a few clicks.
Why use Vercel for your Probot App?
Vercel is a great platform to deploy your Probot app with because it simplifies the entire deployment and infrastructure management process. In addition, (at the time of writing this post) Vercel offers a generous free plan and affordable upgrade paths which makes it ideal for Indie Developers and Enterprises alike.
Getting started…
Now that we know why Vercel is a great option to deploy your Probot app to, let’s dive into deploying your first Probot app to the Vercel platform!
For this tutorial we will build upon the example app from the Probot “Developing an app” Documentation. We assume that you have already completed this tutorial and have your example app running locally, configured correctly, and pushed to a GitHub repository.
Code Changes
Vercel deploys your Probot app as a serverless function.
Serverless architecture (also known as serverless computing or function as a service, FaaS) is a software design pattern where applications are hosted by a third-party service, eliminating the need for server software and hardware management by the developer. Applications are broken up into individual functions that can be invoked and scaled individually.
Source: https://www.twilio.com/docs/glossary/what-is-serverless-architecture
In order for the Probot app to be deployed in this nature we can use the createNodeMiddleware to handle the requests. For this to work we need to make a new directory and JavaScript file in our project with the following path…
/api/github/webhooks/index.js
This file will handle the webhooks from GitHub to your Probot app, we will also need to configure the GitHub App for this, more on that later!
In the index.jsfile we just made, we can copy the sample code from the Probot deployment docs and make a slight modification. In the Probot “Developing an app” Documentation the function we are exporting is in the index.jsfile, while in the Deployment docs the function is in the App.js file. The simple modification is just switching the file we are importing as our app, see it in bold below:
// api/github/webhooks/index.js
const { createNodeMiddleware, createProbot } = require("probot");
const app = require("../../../index");module.exports = createNodeMiddleware(app, {
probot: createProbot(),
webhooksPath: "/api/github/webhooks",
});Source: https://probot.github.io/docs/deployment/#vercel
This is the only code change required for the deployment to Vercel, once made, push this change to your repository.
Configurations
Now that we have the code ready, we need to configure our Vercel deployment and our GitHub App. We will start with configuring Vercel.
First we need to import our repository from to Vercel. To do this under the “Import Git Repository” section select the Continue with GitHub option.
Then link your GitHub account to Vercel and select the repository with your Probot app.
After you import your Probot app repository it is time to configure the Environment Variables. These are the values Vercel uses to configure your Probot app upon deployment.
There are three Environment Variables which need to be configured on Vercel, APP_ID, WEBHOOK_SECRET, and PRIVATE_KEY.
The APP_ID is simply your App’s unique identifier, the WEBHOOK_SECRET is used to secure your webhook connection, and the PRIVATE_KEY for your app. These can all be found in the .envfile of your existing project. Once you entered the Environment Variables you can click deploy, Vercel will then begin deploying your application!
Configuring GitHub
Once your Vercel deployment is ready we will need to configure GitHub to point it’s Webhooks at your Probot App. In order to do this you first need to copy your Probot app’s domain from the deployment. It can be found under the “Domains” section under your Vercel project.
Once you have this domain handy, you need to navigate to the GitHub App Settings and replace the Webhook URL with your deployment’s domain. You will also need to add the path of your webhooks directory /api/github/webhooks as this is where Vercel will find your serverless function.
After that, you are all done! Save your changes to the GitHub App configuration and test out your Probot App! Here is an example of it working
