How to build a GitHub bot with PhantomJS, React, and Serverless framework

  • How to build a GitHub bot with PhantomJS, React, and Serverless frameworkThis tutorial is about building a simple Serverless bot that returns a chart with top GitHub repository contributors for a selected period.
  • To retrieve top repository contributors, we will use GitHub stats API, the amazing Nivo to display data, Storybook to check how our chart looks and feels, PhantomJS to turn HTML into an image, and Serverless framework to interact with AWS.
  • The only difference is an additional permission to invoke lambda: – iamRoleStatements: [ Effect: ‘Allow’, – Action: [‘lambda:InvokeFunction’], – Resource: [‘*’] – }]Setting up the Slack botThe last step will be to create a service that will handle message events for the bot.
  • npm install -g serverless – npm install -g servicelessCopy the GitHub and Slack bot tokens, and set them to GITHUB_TOKEN and SLACK_TOKEN environment variables accordingly.
  • At the end you should see a similar output: – Deployment completed successfuly[app/html-to-png] [completed]: – Service Information – service: html-to-png – stage: dev – region: us-east-1 – stack: html-to-png-dev – api keys: – None – endpoints: – None – functions: – renderToPng: Removing old service versions… – [app/slack] [completed]: -…

This tutorial is about building a simple Serverless bot that returns a chart with top GitHub repository contributors for a selected period. It is relevant to those who have some experience with…

How to build a GitHub bot with PhantomJS, React, and Serverless frameworkThis tutorial is about building a simple Serverless bot that returns a chart with top GitHub repository contributors for a selected period. It is relevant to those who have some experience with React, JavaScript, TypeScript, Node.js, Amazon Web Services (AWS), and the Serverless framework.

You can check out the code on Github.

Services and tools we’ll be usingBefore jumping into coding, let’s do a quick overview of AWS services and tools that we’ll be using.

To retrieve top repository contributors, we will use GitHub stats API, the amazing Nivo to display data, Storybook to check how our chart looks and feels, PhantomJS to turn HTML into an image, and Serverless framework to interact with AWS.

Let’s get startedI’ll be using TypeScript. If you prefer ES6, you will need to configure Babel.

First, you have to create tsconfig.json in the root of your repository. Options to pay attention to include:

“module”: “commonjs”,

“target”: “es5”,

“lib”: [“es6”, “node”,

“jsx”: “react”Then, we’ll create a simple API to query stats from GitHub. You can follow the file structure from the GitHub repo or use your own. For example:

To access the GitHub API, you’ll have to create a personal access token.

This module simply sends the request with the provided token and retrieves the data.

Displaying the chartsTo display the data, we’ll…

How to build a GitHub bot with PhantomJS, React, and Serverless framework