How to build a GitHub Bot

Creating the Probot app

npx create-probot-app issue_greeter
? App name: 
? Description of app: Replies with a greeting when someone opens an issue
? Authors full name: MintPlayer
? Template: basic-ts
code issue_greeter

Setting up a SMEE channel

Let’s put this app under a Github organization account. To do so we need to Configure our Github app manually

• Copy the .env.example as .env
• Visit smee.io and click Start a new channel

Copy this Webhook Proxy URL (https://smee.io/xxxxxxxxxxxxxxx) and paste it in your .env file as WEBHOOK_PROXY_URL

Generate random string °1 (xxxxxxx) and paste it in your .env file as WEBHOOK_SECRET

Publishing the repository to GitHub

Create a new repository, if necessary under your organization account:

https://github.com/[org]

Now let’s push our workspace files to this remote:

git init
git add .
git commit -m "Add files"
git remote add origin https://github.com/[org]/issue_greeter.git
git push -u origin master

Creating the Github app

Visit Developer settings:

• For your individual account: https://github.com/settings/apps
• For organizations: https://github.com/organizations/[org]/settings/apps

New GitHub App

• GitHub App name: issue-greeter
• Homepage URL: https://github.com/[org]/issue_greeter
• Webhook URL: https://smee.io/xxxxxxxxxxxxxxx
• Webhook secret: yyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
• Repository permissions:
  - Issues: Read and write
• Subscribe to events: Issues
• Install: Any account

GitHub indicates that you now need to generate a private key, so go ahead, click the link and generate a private key. You’ll receive a pem-file as attachment.

On the app overview page, take a note of the following:

• App ID
• Client ID

Paste the app-id in the .env file

Configuration

Run npm start and visit http://localhost:3000

Since we configured our github app manually, choose or use an existing Github App

Go to your .env file and temporarily replace the WEBHOOK_URL with the one from localhost:3000 (https://smee.io/xxxxxxxxxxxxxxx)

Fill out the App ID and Webhook secret in the browser, and upload the private key (pem-file) you got from GitHub.

(I had to insert my Webhook secret once again before github picked it up)

It should look like this

Installing the app on a repo

• Create a test repository under your personal account
• Visit the management page for your github app (https://github.com/organizations/MintPlayer/settings/apps), then navigate to the Public link (https://github.com/apps/issue-greeter)
• Click “Install” and choose what user/organization you want the bot to be active in

Running the app

The console in VS Code says:

INFO (probot): Probot has been set up, please restart the server!

But we first need to build the project

npm run build
npm start

I just created an issue on the repository where the Github app is installed, and got feedback in the VS Code console:

Deployment

• Documentation
• Create a new app on Glitch
• Import your project from GitHub

Import from GitHub

A prompt opens asking for your organization/repository name.

Open the .env file and replace the contents with

APP_ID=<your app id>
# WEBHOOK_PROXY_URL = Actually resides in .env.example
WEBHOOK_SECRET=<your app secret>
PRIVATE_KEY_PATH=.data/private-key.pem
NODE_ENV=production

Press the New file button => .data/private-key.pem and paste the generated private key (which was downloaded previously) in it.

The app has started. Click the Preview button, and copy the url of the window that opens.

https://xxxx-xxxxx-xxxx.glitch.me

You need to add this URL in .env as the value for a WEBHOOK_URL key

Disclaimer: For some reason my Glitch app won’t start yet

More to read

Combining apps