Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 984 of the free egghead.io lessons, plus get Node.js content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Build a Basic Webhook with Micro, ngrok, and Now

4:30 Node.js lesson by

This is a simple webhook example. This lesson walks you through creating a github webhook using micro, the development process of testing the webhook online by tunneling to it using ngrok, then launching the webhook using zeit's now.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

This is a simple webhook example. This lesson walks you through creating a github webhook using micro, the development process of testing the webhook online by tunneling to it using ngrok, then launching the webhook using zeit's now.

Start by adding Micro to your project. Then with Micro added, we can come into our package JSON, add a scripts, and say that our start script is "Micro index." Now we just have to create the index.

I'll do a new file, index.js, and from here, I'm going to export a function. Module exports is a function that returns "Hello." I can run this start with yarn start, and you'll see Micro is up and running. When I open localhost 3000, you'll see a page with "Hello" on it.

To make this a webhook, we're basically having an external service call this function, so we have to have an external service hit this URL. To expose this URL to the outside world, that's called "tunneling." Go to ngrok.com, download it. Sign up for it. It's all free, but there are paid accounts with more features.

Once that's downloaded, wherever you download it, you can say "ngrok HTTP port 3000." Port 3000 is the default port of Micro. Hit enter, and this will give you a forwarding address, which is pointing to your localhost and port. I have a paid plan, so I'm actually going to do "-subdomain=JohnLindquist," just meaning this domain is reserved for me rather than that generated subdomain.

If I go here to johnlindquist.ngrok.io, hit enter, you'll see I get "Hello" there as well. If I make a change and say, "Is this thing on?" hit save, stop and start the local server, you'll see this address that's available to anyone will now return, "Is this thing on?"

Since this is accessible to the outside world, I can create my webhook on GitHub. If I just pick a repo on GitHub and go into the settings under Webhooks, and click Add Webhook, I'm just gong to paste this URL in here. I want my content type to be this and tell it to send me everything. So I click Add Webhook. Now all events will be posted to that URL.

To show that working, instead of sending a response, I'm going to console log out that something happened. Just need to restart my server here, go into Webhook Lessons, click on the Read Me. I'll just update this file and say, "update one commit changes." You'll see in my console it logs out something happened, which means that something posted to johnlindquist.ngrok.io, which is forwarded to my local host, which is receiving these through this function.

Now as with most, if not all, webhooks, it will post a payload which you can handle in your request. I'm gong to use the JSON Parser from the Micro library, so I'll require that. The JSON Parser returns a promise, so I can go ahead and say, "data is JSON Parser of the request." But I need to make sure and await it, which means that this is an async function, and then I can log out the data that it sends.

If I stop this and restart my service here, I come into the Read Me and make another change. I'll call this "another change," commit my changes. You'll see that it posts a huge object with all the payload data that I need to do whatever I want when those files change.

Now obviously, when you're done with development, meaning that you're storing this data somewhere, or alerting someone of the changes, right now, I'm just logging it out. When you're done with development, you definitely should stop ngrok so that nothing's tunneling into your localhost anymore. You'll see this tunnel is down.

Then I can launch this with ZEIT's Now, which I'll copy and paste this URL into my settings for my webhook. I'll edit this and paste that there, update my webhook. Now I have the webhook online that will quietly sit there and console log out any changes made to this repo.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?