Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Build a Basic Webhook with Micro, ngrok, and Now

    John LindquistJohn Lindquist

    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.

    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 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.

    00:13 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.

    00:34 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.

    00:55 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.

    01:22 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?"

    01:45 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.

    02:09 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.

    02:49 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.

    03:21 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.

    03:42 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.

    04:02 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.

    Discuss

    Discuss