966 reads

How To Create a Custom Webhook URL Using Autocode

by Yusuf MuslehAugust 19th, 2020

Too Long; Didn't Read

How To Create a Custom Webhook URL Using Autocode405 reads: "How To Create Your Own Webhook URLs" The webhook is deployed on top of serverless technology and scales for you without any need for administrative efforts on your end. You can add whatever custom handling logic you'd like to the webhook at anytime, and simply click deploy again! Make sure you include the last parameter in the list of parameters you define in your function signature. The parameters passed in from either the request body or querystrings are parsed out and included in the object that we populate automatically.

Company Mentioned

featured image - How To Create a Custom Webhook URL Using Autocode

TLDR (30s)

To quickly get your own customizable Webhook URL, simply Fork this . You can change the name of the project if you'd like, as it's reflected in the webhook URL that's generated.

Once you've created the Fork you'll be brought into the Autocode editor. Click on the blue Deploy button at the bottom left corner of the editor. Once it's deployed, open the

functions/__main__.js

file to view the live Webhook URL at the bottom of the editor.

That's it! You can add whatever custom handling logic you'd like to the webhook at anytime, and simply click deploy again!

Note: Make sure you include the

at the end of the url otherwise it will be redirected and the payload will be dropped.

$ curl --request POST \
    --url //YOUR_USERNAME.api.stdlib.com/my-webhook@dev/ \
    --header 'content-type: application/json' \
    --data '{
  "some_data": "This is sample data",
  "more_data": "More sample data"
}'

# OR

$ curl --request GET \
  --url '//YOUR_USERNAME.api.stdlib.com/my-webhook@dev/?some_data=%22This%20is%20sample%20data%22&more_data=%22More%20sample%20data%22'

Introduction

Often when working on projects that involve integrating different tools together or syncing data between different services, you may find yourself utilizing webhooks. A lot of tools/services allow you to set a webhook URL that they can then push data to based on some triggers. The webhook server behind that URL can then perform custom logic with that data.

Sounds pretty straightforward right? However, you'll realize you have to provision a new server, develop and deploy a web app, and worry about other administrative tasks such as maintenance and scalability. Not to mention, every time you want to make changes or test different payloads, you'd need to go through the deployment process again.This adds a lot of hurdles just to perform a simple task of receiving and handling data from an external service.We get a lot of questions about setting up webhooks at , and I think it's the easiest way to get started and have a live webhook URL in (literally) seconds. I built a that you can simply fork and deploy to get your own webhook URL in no time!Your webhook is deployed on top of serverless technology. That means it will scale for you without any need for administrative efforts on your end.

How It Works

When your webhook is deployed on Autocode, the endpoint listens to incoming requests. It accepts both

GET

and

POST

requests. The parameters passed in from either the request body or querystrings are parsed out and included in the

context.params

object.

context

is a magic parameter that we populate automatically.

It must be the last parameter in the list of parameters you define in your function signature. You can access the headers or the actual request body and other useful data from within the

context

object:

/**
* An HTTP endpoint that acts as a webhook for HTTP(S) request event
* @returns {object} result Your return value
*/
module.exports = async (context) => {
  let result = {};

  console.log('params:', context.params);
  console.log('headers:', context.http.headers);
  console.log('body:', context.http.body);

  return result;
};

You can also pass in named parameters with type checking included out of the box based on the specification. Simply include the named parameter as an argument in the function and update the comment above the function defining the name and type of that parameter it should expect:

/**
* An HTTP endpoint that acts as a webhook for HTTP(S) request event
* @param {string} name
* @param {number} age 
* @returns {object} result Your return value
*/
module.exports = async (name = "Bob", age, context) => {
  let result = {};

  console.log('params:', context.params);
  console.log('headers:', context.http.headers);
  console.log('body:', context.http.body);

  return result;
};

Testing with Payloads

You can test your webhook URL before deploying it from within the Autocode editor.

Press on the Edit Test Event Payload at the top of the endpoint file:

That will open up the payload editor where you can enter a JSON formatted payload for testing:

Once you've finished setting a test payload and saved it, click on the green Run Test Event button at the bottom right corner of the editor.

That will then open up a console displaying any logs or errors you may have:

Deploying your Webhook

When you're ready to deploy your webhook URL and start listening to incoming events, all you need to do is press on the blue Deploy button at the bottom left corner of the editor:

Once it's deployed, the URL displayed is now ready to handle events from any external service. You can also view real time logs by clicking on the View Logs button in the same corner of the editor.

Note: Make sure you include the

at the end of the URL otherwise it will be redirected and the payload will be dropped.

That's It!

Thanks for checking out this post! Hope it helped, if you have any questions please feel free to reach out to me at . I'd love to hear about what you're building! You can also follow the Autocode team on Twitter for more updates .

Yusuf is a software engineer at .

Previously published at

L O A D I N G
. . . comments & more!