This README contains the accompanying instructions for the follow-along workshop. Follow the steps below in order to build your first GitHub App, an automated GitHub issue moderator bot, running on Azure Functions and deployed via Azure DevOps Pipelines.
A GitHub account, an Azure account (see below) and a browser are the only mandatory requirements.
Please note: For the Azure DevOps Pipelines integration to work, a GitHub Account and a Microsoft account are needed. However for the Azure Function Apps deployment to work, you are going to need a Microsoft Azure account with a free subscription. We will provide Promo Codes to allow you to sign-up without having to use your creditcard details for verification.
Ensure you have a working GitHub account, a Microsoft account, and an Azure account with an active subscription (a free trial is available during signup – a phone number and a credit card are required although no money will be exchanged).
💡 Tip: Open a new Tab in your browser for every tool we are going to use as we will go back and forth between: GitHub, Azure DevOps (Pipelines) and Azure Portal,
- Copy the Azure Promo Code you have received from us
Note: If you haven't received a code, please let us know.
- Visit: https://www.microsoftazurepass.com/
- Use a Microsoft account or create one (you will also use this account later to sign-in on Azure DevOps)
- Follow the steps in the SubmitPromoCode form
- Log in on the Microsoft Azure portal
- Click on
Create a resource
->Compute
->Function App
- We will configure the Function App later.
🎉 Congrats, you now have an Azure Portal account.
- Log in to your GitHub account
- Fork this repository: https://github.com/octodemo/github-craftwork-azure
- Enable repository
Issues
(under Settings)
- Go to Azure Pipelines · GitHub Marketplace · GitHub
- Select the
Free
plan - Click
Install it for free
- Select the
- Install Pipelines selecting the newly created repo in the dropdown
- Sign into your Azure DevOps account using your Microsoft account
- Create a new Organization for the Pipelines project, for example using your GitHub handle as a name
- Pick a region close to you
- Name your Pipelines project something like
github-craftwork-azure
- The Azure Pipelines project is now set up and integrated with your GitHub repository.
- Select the repository for creating the new pipeline
- Do not modify the pipeline definition YAML file
- Click
RUN
and wait until the build finishes successfully
💡 Congrats! You have integrated an automated CI tool using Azure DevOps Pipelines on your repository.
Our next step will be to create the Azure Function App where our code will be deployed.
- Log in on the Microsoft Azure portal
- Click on
Create a resource
->Compute
->Function App
Our function configuration
JavaScript
as the Runtime Stack as the default is .NET
.
- Confirm and wait for the new resource to be deployed.
Let's go back to Azure Pipelines.
-
Click on Releases
- New Pipeline
- Azure App Service deployment
- Create “Deploy to Azure Functions” stage IMPORTANT Do NOT pick the "Function Apps" deployment template!
- Click on the job/task link in the UI
- Fill the subscription form -> Authorize
- Wait for
Configuring the Azure service connection...
to disappear
- Wait for
- Select your Function App from the 2nd dropdown
- Save (top right)
- Select the build pipeline as a source for the Artifact:
- Enable the Continuous deployment trigger
-
Go back to Builds
- Click on Queue build
- This will create a new release artifact
- Wait for the build to finish
- Click on Queue build
- Back to Releases, follow the release
- Verify the function has been deployed in Azure -> Function Apps
💡 Awesome! We have now a complete CI/CD pipeline that automatically ships code when things change on our repository!
We are now ready to create a GitHub App that will send webhooks to our app running on Azure.
In the Azure Function App dashboard, click on your function for “ModerateIssue”. Click on the Get URL
button and copy the URL in your text editor (we are going to need this soon). Do the same for the GitHub Secret
next to it.
Now visit the Developer Settings page on your GitHub account and click on GitHub Apps
.
- Click on Create a new App
- Give the app a cool name and description :)
- In the
Homepage URL
User authentication callback URL
andWebhook URL
paste the URL provided by the Azure Function App - In the
Webhook Secret
field paste theGitHub Secret
value from the Azure Function App page - Scroll down to the
Permissions
section and give theIssues
Read & Write permission - Subscribe to the
Issues
events by flagging the checkbox - Leave the
Only this account
selection and confirm the app creation
The page will reload. At this point scroll down and:
- Click on
Generate the private key
- Download the private key pem file to your computer
⚠️ Important: copy the App ID somewhere (we're going to need this later)
We can now install the app on your repository by clicking on the Install App
link in the navigation sidebar. Select the repository you forked at the beginning of this guide from the dropdown and confirm the installation.
Now go back to Azure Function Apps.
- Select your function and click on
Application Settings
- Add new setting in the list: APP_ID
[your GitHub App ID here]
We need to encode the contents of our .pem
certificate using base64 in order to store it as an environment variable in Azure and make it available to our function.
-
if you're on MacOS / Linux:
cat [path to the .pem file you just downloaded] | openssl base64 | pbcopy
-
alternatively use https://www.base64encode.com/
Once you have the pem file encoded, go back to the Azure Portal and click on your Function App. Go to Application Settings
and add a new setting in the list with key APP_PEM and the encoded string as value.
💡 Woah! You buily your first GitHub App! Congratulations, human!
Create a new Issue in your repository and wait for the bot to post a "hello world" reply. This is the very first step towards real, AI-driven moderation. That is because the master branch only contains a basic version of our function that only posts a basic response.
Next we will create a Pull Request to merge the contents of the assign-label-to-new-issues
branch which contains a slightly different version of the basic demo code that will add a predetermined label to any new issue. This is so you get familiar with the pull request flow and so that we can verify that our Azure DevOps CI builds are running properly.
- Navigate to the
Code
section of your repository - Click on the
branch
dropdown and selectassign-label-to-new-issues
- Click on the
new pull request
button and confirm - Wait for Azure DevOps to report the build ran successfully
- Merge the pull request
- Wait for the check next to the last commit in the
Commits
tab to also report "green" - Finally test the newly deployed version of the function by creating a new issue
At this point you should see the label enhancement
applied to any newly created issue.
We need to repeat the above procedure but this time by switching to the branch use-luis-to-label-issues
.
Before we can do that, we need to extend the Application Settings on our Azure Function App to also add two more items.
The workshop organizers will share the LUIS application ID and secret token at this point so that your own Function app can connect to our pre-trained LUIS service API that will parse your issues and send back a response that we can parse to determine which label to apply to the issue.
Once the pull request is merged and the new version deployed, you will finally see that the issues will get one of the 3 labels bug
, enhancement
and question
applied automatically based on the input issue title. This is powered by the AI-driven cognitive services running on Microsoft LUIS.
- GitHub App Walkthrough octokit.net/github-apps.md at master · octokit/octokit.net · GitHub
- VS CODE functions Create your first function in Azure using Visual Studio Code | Microsoft Docs