Setup a Custom Webhook URL in 30 Seconds with Autocode

TLDR (30s)

To quickly get your own customizable Webhook URL, simply Fork this Source in Autocode. 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 https://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 'https://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 Autocode, and I think it's the easiest way to get started and have a live webhook URL in (literally) seconds. I built a Source in Autocode 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 FunctionScript 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 yusuf@autocode.com. I'd love to hear about what you're building! You can also follow the Autocode team on Twitter for more updates @AutocodeHQ.

Yusuf is a software engineer at Autocode.