Exercise - Create an Azure function triggered by a webhook

In this first exercise, you'll create your code to parse the GitHub wiki event messages in Azure Functions. You'll configure your function to run when a webhook message is received.

Create a Function App

  1. Sign in to the Azure portal using your MS Learn account.

  2. Select + Create a resource, and then select Compute > Function App.

    Important

    We are currently working to update our sandbox to support the new workflow for creating an Azure Function in the portal. The instructions will be updated when that is available. Until then, you can use the version of the create experience that matches the current instructions by clicking the notification bar labeled Looking for the classic Function App create experience? at the top of the Function App page. This experience can also be reached by choosing the Function App (Classic) option from the Azure Marketplace.

  3. On the Function App page, enter the following settings.

    Note

    The function app must have a unique name. We suggest using something like <your name or initials>triggerapp. Use this name wherever you see <your-functionapp-name> in this exercise.

    Property Value
    Subscription Concierge Subscription
    Resource Group Select Use existing, and select the sandbox resource group, [sandbox resource group name].
    Name <your-functionapp-name>
    Publish Code
    Runtime stack Node.js
    Version default
    Region Choose the nearest location to you that is also one of the allowed Sandbox regions.

    The free sandbox allows you to create resources in a subset of the Azure global regions. Select a region from the following list when you create resources:

    • West US 2
    • South Central US
    • Central US
    • East US
    • West Europe
    • Southeast Asia
    • Japan East
    • Brazil South
    • Australia Southeast
    • Central India
  4. Select Next : Hosting.

    Property Value
    Storage account (New), and accept the default name.
    O/S Windows
    Plan Consumption (Serverless)
  5. Select Review + Create. The Create Function App page appears.

  6. On the Create Function App page, select Create. Wait for the function app to be deployed before continuing.

Create a webhook triggered function

  1. From the Azure portal home page, find and select All resources, and then select the function app you just created.

  2. On the Function App page, below the Search field, under the Functions section, select Functions. Next, from the menu bar, select + Add. The Add function panel appears.

  3. In the Add function panel, under Select a template, select HTTP trigger, and then select Add.

    The portal creates a JavaScript function that looks similar to this. In the left nav bar, select Code + Test to view it. The following JavaScript appears.

    module.exports = async function (context, req) {
        context.log('JavaScript HTTP trigger function processed a request.');
    
        const name = (req.query.name || (req.body && req.body.name));
        const responseMessage = name
            ? "Hello, " + name + ". This HTTP triggered function executed successfully."
            : "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.";
    
        context.res = {
            // status: 200, /* Defaults to 200 */
            body: responseMessage
        };
    }
    

    This is the default JavaScript function generated by the portal. It reads a name, either passed in as a query string or as part of the request body, and responds with a "Hello" message.

  4. In the path above the code box, from the dropdown, select function.json.

    {
        "bindings": [
            {
                "authLevel": "function",
                "type": "httpTrigger",
                "direction": "in",
                "name": "req",
                "methods": [
                    "get",
                    "post"
                ]
            },
            {
                "type": "http",
                "direction": "out",
                "name": "res"
            }
        ]
    }
    

    The binding specifies that the function is triggered by HTTP GET and POST requests directed towards the URL of the function app.

Test triggering your function

  1. In your new function, in the top menu bar, select Get function URL.

  2. In the Get function URL message box, in the Key dropdown, under Function key, select default. In the URL field, select he Copy to clipboard icon. The URL will look something like this:

    https://<your-functionapp-name>.azurewebsites.net/api/HttpTrigger1?code=aUjXIpqdJ0ZHPQuB0SzFegxGJu0nAXmsQBnmkCpJ6RYxleRaoxJ8cQ==
    
  3. Paste your function URL into your browser's address bar. On the end of this URL, append the query string value: &name=<yourname>.

  4. To execute the request, press Enter. The response returned by the function appears in the browser. It will look something like this:

    Hello John Smith. This HTTP triggered function executed successfully.
    

Congratulations! You now have a function that can be triggered by a URL.