View profile

Using the ngrok npm Module to Test Webhooks

I was recently working with the Trello REST API and ran into a bit of a roadblock: the way to create
Using the ngrok npm Module to Test Webhooks
By Mastering JS Weekly • Issue #38 • View online
I was recently working with the Trello REST API and ran into a bit of a roadblock: the way to create a Trello webhook is to POST to a /webhooks endpoint with the URL that Trello should hit when a card changes. This is an atypical pattern, most other webhooks require you to specify a URL in a UI.
This roadblock gave me an idea: how could I run a web server locally with a publicly accessible URL, and have the web server know its public URL automatically? Ngrok is the go-to tool for giving your local server a public URL, but most developers run ngrok as a separate process. Also, ngrok’s free tier generates a random URL https://13de163200e3.ngrok.io when you run ngrok. So you would have to:
  • Start ngrok
  • Copy the URL
  • Configure your server to use the new ngrok URL when creating Trello webhooks

The ngrok npm Module
You can streamline this process using the ngrok npm module. The ngrok npm module uses the ngrok command line tool under the hood, but it provides a neat function that you can run to start ngrok and get the ngrok URL.
Get a public URL for `http://localhost:3000` with ngrok
Get a public URL for `http://localhost:3000` with ngrok
This means you can automate the entire ngrok process within your Node script. For example, below is a Mocha test script that launches ngrok, starts an Express server, and registers a webhook that points to the public URL that ngrok gave your test script.
Webhook test with ngrok
Webhook test with ngrok
Live versus Hard-Coded Webhook Tests
In the past, I’ve tested webhook handlers in a much more primitive way: I would trigger the webhook, print out the request the service (like Trello) sent to my webhook handler, and then write a test that calls the webhook handler with the same data.
That approach works well in simple cases, but suffers from two key limitations. The first limitation is that Trello may change its webhook format, so you would manually need to update your test’s data every time.
The other limitation is more subtle. It’s easy to generate the test data for one particular webhook case, like updating a card. But as your app gets more sophisticated, you’ll want to test more cases. That means, every time you want to write a new test case, you’ll have to figure out how to trigger the correct webhook manually.
By putting the code that triggers the webhook in the same test case that tests your webhook handler, you’re building up a framework for how to trigger the correct webhooks. That makes it easier to build more webhook tests.
Most Recent Tutorials
Other Interesting Reads
Tech books vs online documentation: what's the difference?
Managing your boards and cards with the Trello API
How to Test App Authentication Locally with ngrok | by Karen White | BigCommerce Developer Blog | Medium
How I Built Starter Story - Starter Story
Did you enjoy this issue?
Mastering JS Weekly

A weekly summary of our tutorials

If you don't want these updates anymore, please unsubscribe here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue