Creating an Automated Webhook Listener Using Contentstack Webhooks and Microsoft Azure

Microsoft Azure is a popular cloud computing platform used for analytics, networking, cloud storage, virtual computing, and much more.

By using Microsoft Azure and Contentstack Webhook, we can simplify working with the entries in Contentstack. We can use them to automatically update a particular field of an entry when any changes are made to it.

In this guide, we will discuss the steps for creating an automated system to do just that.

Overview of the process: We will create a content type and add an entry to it. When the entry is updated (Date and Priority fields), a webhook will trigger and invoke the Azure function. The Azure function will then auto-update a specific field (Sort order, in our example) in the entry.

There are the following two methods using which you can create a function in Azure:

Prerequisites

Creating an Azure Function from Azure Portal

In this method, we will look at the steps involved in creating an Azure Function from the Azure Portal. Follow the steps given below to set up your own Function App.

Steps for Execution

  1. Create a content type and add an entry
  2. Create a Microsoft Azure account
  3. Create a Function App in Azure Portal
  4. Add the environment variables
  5. Install dependencies
  6. Create a webhook in Contentstack
  7. Try it out

Let's get started!

  1. Create a Content Type and Add an Entry

    Firstly, create a content type and add an entry to it. For this exercise, we will create a content type with specific fields as listed below:

    • Title (default field)
    • URL (default field)
    • Date (select Hide Time option)
    • Select field with name Priority (display type as Radio)
    • Single Line Textbox named as “Sort order”

    Once you have created the content type with the above configuration, add an entry to it. This is what the entry will look like:

    image15.png

    Note: Do not add anything in the Sort order field yet, keep it blank for now. It will auto-update when we make changes in the Date and Priority fields.

    With this, the essentials are ready and now let's move on to creating a function in Azure

  2. Create a Microsoft Azure Account

    Before creating the Azure function, we need to create an Azure account. Follow the steps given below to create one:

    1. Go to the Microsoft Azure page and click on Start free.

      For this exercise, we are using the free version. You can opt to purchase their plan by clicking on Or buy now.
    2. On the next screen, you’ll get a “Sign in” modal. If you already have an account, just log in with your credentials. Else, click on the Create one! link.
    3. If you choose to create a new account by clicking the Create one! link, you’ll be asked to create a username. You can also create your account by providing your phone number or email address.

      Note: It will not accept a work-related email address. Only your personal email address such as Gmail, Outlook, or Hotmail will be accepted.

    4. You will then receive an email with a verification code. Once your account is created, it will ask you to provide further information to safeguard the account. Follow the onscreen instruction and complete the account setup.
  3. Create a Function App in Azure Portal

    Once your account is ready, create a function app using the Azure Portal. This function will be invoked by our webhook when the entry is updated. So proceed with the following steps:

    1. On the Azure website, click on the Portal option located at the header.
      You’ll land on a portal page as shown below:

      Azure more services.png

    2. Click on the More services link, as shown in the above image, to locate the Function App service.
    3. Next, on the All services page, click Function App as shown in the image below:

      Azure Function app selection.png
      This step will take you to the Function App page.

    4. Click on the + Create button to create a new function app and configure your function app with the following details:
      • Resource Group: It is a collection of operations. You can either create one by clicking on Create new or select from the list if you have already created a resource group previously.
      • Function App name: Type a name for the function app
      • Publish: Select Code.
      • Runtime stack: Select Node.js
      • Version: Select the latest LTS version.
      • Region: By default, the selected region is Central US.Configure Function app selection.png
    5. Then, click on Review + create. Verify the settings once and click on Create. The deployment process will start and you’ll get its success message as shown below:
      deployment-successful.png

    6. Click on the Go to resource button. It will take you to your created function screen with several options on the left navigation panel.
    7. From the left navigation panel, click on Functions as shown in the image below:
      click-functions-from-left-nav.png
    8. Next, click on + Add.
    9. On the Add function screen that appears on the right-hand side of the page, select HTTP trigger as the template for your function, enter a name for the trigger, keep Function as the Authorization level, and click on Add.select-http-trigger.png

      This HTTP trigger will enable the function to trigger on an HTTP request such as “get,” “post,” etc.
    10. Your function is now ready. Next, you need to insert the code for our function so that it performs the necessary action when it receives a notification from the webhook.

      For this exercise, download the sample code from our GitHub repository and unzip it.

    11. On the trigger’s page, click on the Code + Test option, click on Upload, and upload the index.js file.

      Code Plus Test.png

      Note: Keep the handler as index.js as shown in the above image.

    12. Click on Save to save your code in the function.

    With these steps, you’ve set up the code and it’s now ready to execute after it receives a notification from Contentstack webhook when the entry is updated.

    After setting up the code, let’s proceed to add environment variables for the function to interact with Contentstack.

  4. Add the Environment Variables

    To add the environment variables, perform the following steps:

    1. Go to the function app created in Step 3 and click the Configuration option from the left navigation panel.click-configuration.png

    2. On the Configuration page, click on + New application setting to add environment variables.click-new-app-setting.png

    3. In the Add/Edit application setting section that appears on right-hand side of the page, add the following three environment variables:

      1. managementToken: Value of the management token
      2. apiKey: API key of your stack
      3. baseUrl: Region’s endpoint of your Contentstack account
        1. Europe: https://eu-api.contentstack.com/
        2. North America: https://api.contentstack.io/
    4. Save it.

    With these steps, you’ve added the environment variables for the function. Let's move ahead and add the required dependencies for the function.

  5. Install Dependencies

    Once you add the environment variables, you need to install the required dependencies - axios, via the Kudu option. To do so, perform the following steps:

    1. Navigate to the Development Tools section on the left navigation menu and select Advanced Tools as shown below: click-advanced.png
    2. The Kudu advanced tools section opens up. Click on Go. This will redirect you to the Kudu services page or the Kudu web interface as shown below:


    3. Click on the Debug console option, at the header, and select CMD.With the help of the Kudu web interface, you can download external npm dependencies based on your requirement.
    4. In the console that opens, navigate to site > wwwroot and type npm init to create the package.json file. It asks you to provide project details, version number, etc. Accept the default values by hitting the Enter key.

      This step will create the package.json file.
    5. Next, install axios by running the following command in the same console:

      npm install axios
      This command will install the required dependencies and create the package-lock.json file as shown in the following screenshot:
      kudu_files.png

    6. After setting up the dependencies, go to your function and click on Enable. Then, click on Get Function URL and copy the function URL as shown below:
      copy-function-url.png

    Make a note of this URL as you’ll need it while setting up a webhook in Contentstack in the next step.

  6. Create a Webhook in Contentstack

    To create a webhook that invokes the function via the URL generated above, log in to your Contentstack account, and perform the following steps:

    1. Go to your stack and hover over the “Settings” icon at the header.
    2. Click on Webhooks. On the Webhook page, click on + New Webhook.
    3. On the Create Webhook page, enter the name in the Name field (for example, WebhookListener).
    4. In the URL to notify field, enter the URL (the Azure Function URL) that you generated in the above step.
    5. Scroll down to the Conditional View section for creating a trigger for the webhook as shown below:CS WH.png
    6. Ensure the Enable Webhook checkbox is selected and click on Save to save your Webhook settings.

    Your webhook is now ready to invoke the Azure function when an entry in the “Webhook listener” content type is updated.

  7. Try it Out

    The entire setup is now ready. Let's try it out: 

    1. Navigate to your entry and try changing the Date and Priority fields, and save your entry.  
    2. Upon saving the entry, the webhook triggers. This trigger will invoke the Azure function and update the Sort order field.

    3. Hard refresh (Ctrl + Shift + R) the entry page and you should see the changes as shown below:

      Final output.png

Alternate Way to Creating an Azure Function Using the VS Code Editor

There’s an alternate way of creating an Azure function through the Visual Studio (VS) Code editor. To do this, the above steps remain the same (content type creation, account creation in Microsoft Azure, and webhook creation).

The only difference here is that for creating the function app and installing the dependencies, we will use the VS Code editor.

Prerequisites

Execution Steps

  1. Create a content type and add an entry
  2. Create a Microsoft Azure account
  3. Install Azure Function extension in VS Code Editor
  4. Create a function in VS Code Editor
  5. Create a webhook in Contentstack
  6. Try it out

Let's get started!

  1. Create a content type and add an entry

    Follow the steps mentioned in the create a content type section above.

  2. Create a Microsoft Azure Account

    Follow the steps mentioned in the create an account in Azure section above.

  3. Install Azure Function Extension in VS Code Editor

    Let's follow the steps given below to install the Azure Function extension:

    1. Create an empty folder, which will be your project folder, and open it in your VS Code Editor.
    2. Navigate to the Extension icon (or press Ctrl + Shift + X) to open the VS Code Extension marketplace.

      VS code xtension.png

    3. In the Search Extensions in Marketplace text box, type Azure Function, and click on Install.

      Xtension installation.png

    4. After installing the extension, you will see the Azure icon, just below the Extensions option, as shown below:

      Azure icon.png

    5. Click on the Azure icon and it will ask you to log in or sign in to your Azure account.
    6. Once you log in, you will see a list of Azure Functions, if you have previously created any function, as shown below:

      List of Azure function.png


    We have now installed the Azure Function extension and logged in to our Azure account through VS Code Editor.

    Let's now move ahead and create a function.

  4. Create a Function in VS Code Editor

    Follow the steps mentioned below to create your own Azure Function:

    1. Click on the Azure icon in VS Code Editor and then create a new project by clicking on Create New Project icon as shown below:

      New project in VS Code.png

    2. Select the following options to create a project:

      1. Project language - JavaScript
      2. Template - HTTP trigger
      3. Authorization level - Function

        Note: It’ll also ask you to provide a name for your function.


    3. After creating the project, you will get a local boilerplate code for local development of your Azure Function as shown below:

      New project added.png

    4. Navigate to the local root directory to see a folder structure as shown below:

      RD folder structure.png

      This is your locally-created Azure function.

    5. Open the index.js file and replace the boilerplate code with the webhook listener code (downloaded in Step 3) as shown below:

      Boilerplate code.png

    6. After adding the code, install the required dependencies. To do this, open the VS Code integrated terminal, point it to the root directory, and run the following command:

      npm install axios

      Once you have installed the required dependencies, you can verify it in the span class="code"package.json file.

    7. Now open the local.settings.json file and add environment variables (similar to what is mentioned in the Add the Environment Variables step) as shown below:

      EV in VS.png

    8. Save your file and now we are ready to deploy our function. Before proceeding, go to the .funcignore file and delete the local.settings.json line.

      Deleting this line will allow the environment variables, mentioned in the local.settings.json file, to get uploaded.

      Remove local setting.png

    9. After installing npm modules and setting your environment variables, save everything and navigate to the Azure icon.
    10. Then, deploy your local Azure Function to Azure Portal by selecting the Deploy to function App (up arrow) icon as shown below:

      Deploy FA.png

    11. You will be prompted, within the VS Code Editor, to create a new function. Create one by providing the following details:
      1. Name: Enter a globally unique name for the function app
      2. Runtime stack: Latest LTS version of Node.js
      3. Location: Select location of your choice
    12. It will take about a minute for the function to deploy. You’ll get a prompt to upload your settings file - local.settings.json.

      Click on Upload settings to upload your environment variables (local.settings.json file) to the Azure Portal or else it won't get uploaded.
    13. Once it is deployed, navigate to Azure Portal, and copy the function URL (performed in the Install Dependencies step).
  5. Create a Webhook in Contentstack

    Follow the steps mentioned in the create a webhook section above and paste the URL you generated above in the URL to notify field.

  6. Try it Out

    Follow the steps mentioned in the Try it out section above.

That's it!

If there are any changes to the code or config, you can change the appropriate file and re-deploy the function.

More Resources

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page

^