What is serverless? A Gentle Introduction to Azure Functions (Part 3)
Tags: serverless, azure, cloud, architecture
Published: 2020-03-11 17:33:56

![Azure Functions](https://github.com/bashirk/azure_webapp_node/raw/assets/azurefunc.png)
*Source: Daily Host News' blog*

This is the third part of my series on an introduction to serverless computing and Azure Functions. In this part, I would be walking you through how to create and setup a webhook on GitHub, connect this webhook with our newly created API (we would be making changes to the function code) to listen to Wiki update events ([Gollum events](https://developer.github.com/v3/activity/events/types/#gollumevent), in this case). 

In the [previous part](https://dev.to/bashirk/what-is-serverless-a-gentle-introduction-to-azure-functions-part-2-3b3j), I covered the downsides of serverless computing and Azure Functions - I walked you through deploying a function code in the cloud using Azure Functions.

It is worthy to note that, webhooks offer a lightweight mechanism for apps to be notified by another service when something of interest happens via an HTTP endpoint. A webhook can be used to trigger an Azure function, and then analyze the message, to determine what exactly has happened and how best to respond.

In order to follow along with this guide, you'd need to have a checklist of these below.

### **Requirements**

• Basic knowledge of Azure Functions, which is covered in the [first part](https://dev.to/bashirk/what-is-serverless-a-gentle-introduction-to-azure-functions-4hah) of this article
• Basic knowledge of JavaScript
• An Azure Subscription,  [here](https://aka.ms/azure4students)
• A [GitHub](https://github.com) account

After you've gotten set up with the requirements stated above, sign in to your [GitHub](https://github.com) account.

![Create a repo](https://github.com/bashirk/AzureWebhookTest/raw/assets/Screenshot%202020-01-27%20at%206.50.00%20PM.png)
*Create a new repository*


Create a new public repository by clicking the **New** button and provide a meaningful name, something like *AzureWebhookTest*.

![Create a Wiki](https://github.com/bashirk/AzureWebhookTest/raw/assets/Screenshot%202020-01-27%20at%206.51.00%20PM.png)
*Wiki creation page*

![Create a Wiki](https://github.com/bashirk/AzureWebhookTest/raw/assets/Screenshot%202020-01-27%20at%206.51.26%20PM.png)
*Add basic texts, and save*

Next, select the **Wiki** and *Create the first page*, add some basic texts before clicking **Save page**.

![Create a Webhook](https://github.com/bashirk/AzureWebhookTest/raw/assets/Screenshot%202020-01-27%20at%206.52.54%20PM.png)
*Add a webhook*

Next up, set up a webhook by going back to the **Settings** tab, select **Webhooks** then **Add a webhook**. You'd need to set a payload to the URL for your function, similar to this below:

https://<your-functionapp-name>.azurewebsites.net/api/HttpTrigger1?code=<your-authentication-key>

![Set a configuration](https://github.com/bashirk/AzureWebhookTest/raw/assets/Screenshot%202020-01-27%20at%206.54.42%20PM.png)
*Webhook configurations*

There's a section that says; *Which events would you like to trigger this webhook?* do select the option labeled **Let me select individual events**. Do also change Content type to *application/json*

![Set a configuration](https://github.com/bashirk/AzureWebhookTest/raw/assets/Screenshot%202020-01-27%20at%206.55.35%20PM.png)
*More webhook configurations*

Be certain to select the Wiki checkbox. No other check boxes should be selected. Also at the bottom of the Webhooks page, ensure *Active* is checked and select *Add webhook*.

![Verify Webhook](https://github.com/bashirk/AzureWebhookTest/raw/assets/Screenshot%202020-01-27%20at%206.58.36%20PM.png)

You can now verify that everything is going according to plan, when the *Webhooks* page is displayed.

> Webhooks are basically HTTP callbacks that are triggered by specific events, and are always defined by users. An HTTP request is made to the URL configured for the webhook, by the source site, when an event occurs.

> Setting up a webhook is a two-way process. a) You can specify how you want your webhook to behave through GitHub and what events it should listen to. b) You can also set up your function in Azure Functions to receive and manage the payload received from the webhook.

## **Testing the Project**

To test out the newly created Webhooks project, go back to the Wiki tab from your repository, select the created page, edit and input some texts - say, *Hello World*.

![Test Webhook](https://github.com/bashirk/AzureWebhookTest/raw/assets/Screenshot%202020-01-27%20at%207.03.24%20PM.png)

Click the *Save Page* button to save this edit. Now to add a payload to the URL for your function app's function, goto *Settings*, and select *Edit*. Then scroll down to the *Recent Deliveries* section.

Select the latest delivery entry by clicking on the options *...* button. After expansion, you should see the Header information, which includes the Event Type, similar to this below:

```json

Request URL: https://introfunc.azurewebsites.net/api/HttpTrigger1?code=aUjXIpqdJ0ZHPQuB0SzFegxGJu0nAXmsQBnmkCpJ6RYxleRaoxJ8cQ%3D%3D
Request method: POST
content-type: application/json
Expect: 
User-Agent: GitHub-Hookshot/16496cb
X-GitHub-Delivery: 9ed46280-6ab3-11e9-8a19-f1a14922a239
X-GitHub-Event: gollum

```

> Webhooks require a couple of configuration options before you can use them. We'll go through each of these settings next.

> **Note:**
*Payload URL*
The payload URL is the URL of the server that will receive the webhook POST requests. Each event type has a specific payload format. That payload contains information about the event that triggered the webhook.

> *Content Type*
Webhooks can be delivered using two different content types: 
a)The application/json content type delivers the JSON payload directly as the body of the POST request.
a) The application/x-www-form-urlencoded content type sends the JSON payload as a form parameter, called payload.

You'll also see that the payload contains information indicating that your wiki page was edited. The payload contains pages, repository, and sender sections.

![Final Test Webhook](https://github.com/bashirk/AzureWebhookTest/raw/assets/Screenshot%202020-01-27%20at%207.13.27%20PM.png)

Finally, you'll see a response message generated by your Azure function app. This response message should be same as this: *Please pass a name on the query string or in the request body.*


## **What's Next?**

In this part, I walked you through how to create and setup a webhook on GitHub, connect this webhook with our newly created API (we would be making changes to the function code) to listen to Wiki update events ([Gollum events](https://developer.github.com/v3/activity/events/types/#gollumevent), in this case). 

In the next/last [part](https://dev.to/bashirk/manipulating-github-wiki-data-with-azure-functions-3968), I'll walk you through how to update your function to parse information from the GitHub webhook payload, and hence display the results.

See you on the other side. Cheers! :smiley_cat: