Skip to content

Commit de5df9e

Browse files
authored
repo sync
2 parents 008b7a4 + dfa8606 commit de5df9e

2 files changed

Lines changed: 29 additions & 35 deletions

File tree

content/developers/webhooks-and-events/configuring-your-server-to-receive-payloads.md

Lines changed: 6 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -16,37 +16,17 @@ topics:
1616
Now that our webhook is ready to deliver messages, we'll set up a basic Sinatra server
1717
to handle incoming payloads.
1818

19-
Recall that we specifically set our webhook URL to `http://localhost:4567/payload`.
20-
Since we're developing locally, we'll need to expose our local development environment
21-
to the Internet, so that GitHub can send out messages, and our local server can
22-
process them.
19+
{% note %}
2320

24-
Note: you can download the complete source code for this project
21+
**Note:** You can download the complete source code for this project
2522
[from the platform-samples repo][platform samples].
2623

27-
### Using ngrok
28-
29-
First, we'll install a program to expose our local host to the Internet. We'll use
30-
ngrok to do this. [ngrok is a free download](https://ngrok.com/download) available
31-
for all major operating systems.
32-
33-
When you're done with that, you can expose your localhost by running `./ngrok http 4567`
34-
on the command line. You should see a line that looks something like this:
35-
36-
```shell
37-
$ Forwarding http://7e9ea9dc.ngrok.io -> 127.0.0.1:4567
38-
```
39-
40-
Copy that funky `*.ngrok.io` URL! We're now going to go *back* to the Payload
41-
URL and pasting this server into that field. It should look something like `http://7e9ea9dc.ngrok.io/payload`.
42-
43-
By doing this, we've set ourselves up to expose our localhost at path `/payload`
44-
to the Internet.
24+
{% endnote %}
4525

4626
### Writing the server
4727

48-
Now comes the fun part! We want our server to listen to `POST` requests, at `/payload`,
49-
because that's where we told GitHub our webhook URL was. Since ngrok is exposing
28+
We want our server to listen to `POST` requests, at `/payload`,
29+
because that's where we told GitHub our webhook URL was. Because we're using ngrok to expose
5030
our local environment, we don't need to set up a real server somewhere online, and
5131
can happily test out our code locally.
5232

@@ -68,7 +48,7 @@ end
6848
Start this server up.
6949

7050
Since we set up our webhook to listen to events dealing with `Issues`, go ahead
71-
and create a new Issue on the repository you're testing with. Once you create
51+
and create a new issue on the repository you're testing with. Once you create
7252
it, switch back to your terminal. You should see something like this in your output:
7353

7454
```shell

content/developers/webhooks-and-events/creating-webhooks.md

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,26 @@ topics:
1313

1414

1515

16-
Now that we understand [the basics of webhooks][webhooks-overview], let's go through the process of building out our own webhook powered integration. In this tutorial, we'll create a repository webhook that will be responsible for listing out how popular our repository is, based on the number of Issues it receives per day.
16+
Now that we understand [the basics of webhooks][webhooks-overview], let's go through the process of building out our own webhook-powered integration. In this tutorial, we'll create a repository webhook that will be responsible for listing out how popular our repository is, based on the number of issues it receives per day.
1717

18-
Creating a webhook is a two-step process. You'll first need to set up how you want your webhook to behave through {% data variables.product.product_name %}--what events should it listen to. After that, you'll set up your server to receive and manage the payload.
18+
Creating a webhook is a two-step process. You'll first need to set up how you want your webhook to behave through {% data variables.product.product_name %}: what events should it listen to. After that, you'll set up your server to receive and manage the payload.
1919

2020

2121
{% data reusables.webhooks.webhooks-rest-api-links %}
2222

23-
### Setting up a Webhook
23+
### Exposing localhost to the internet
24+
25+
For the purposes of this tutorial, we're going to use a local server to receive messages from {% data variables.product.prodname_dotcom %}. So, first of all, we need to expose our local development environment to the internet. We'll use ngrok to do this. ngrok is available, free of charge, for all major operating systems. For more information, see [the ngrok download page](https://ngrok.com/download).
26+
27+
After installing ngrok, you can expose your localhost by running `./ngrok http 4567` on the command line. 4567 is the port number on which our server will listen for messages. You should see a line that looks something like this:
28+
29+
```shell
30+
$ Forwarding http://7e9ea9dc.ngrok.io -> 127.0.0.1:4567
31+
```
32+
33+
Make a note of the `*.ngrok.io` URL. We'll use it to set up our webhook.
34+
35+
### Setting up a webhook
2436

2537
You can install webhooks on an organization or on a specific repository.
2638

@@ -34,17 +46,17 @@ Webhooks require a few configuration options before you can make use of them. We
3446

3547
{% data reusables.webhooks.payload_url %}
3648

37-
Since we're developing locally for our tutorial, let's set it to `http://localhost:4567/payload`. We'll explain why in the [Configuring Your Server](/webhooks/configuring/) docs.
49+
Since we're developing locally for our tutorial, we'll set it to the `*.ngrok.io` URL, followed by `/payload`. For example, `http://7e9ea9dc.ngrok.io/payload`.
3850

39-
### Content Type
51+
### Content type
4052

4153
{% data reusables.webhooks.content_type %} For this tutorial, the default content type of `application/json` is fine.
4254

4355
### Secret
4456

4557
{% data reusables.webhooks.secret %}
4658

47-
### SSL Verification
59+
### SSL verification
4860

4961
{% data reusables.webhooks.webhooks_ssl %}
5062

@@ -58,11 +70,13 @@ Events are at the core of webhooks. These webhooks fire whenever a certain actio
5870

5971
A full list of webhook events, and when they execute, can be found in [the webhooks API][hooks-api] reference.
6072

61-
Since our webhook is dealing with Issues in a repository, we'll click **Let me select individual events** and then **Issues**. Make sure you select **Active** to receive issue events for triggered webhooks. You can also select all events using the default option.
73+
Since our webhook is dealing with issues in a repository, we'll click **Let me select individual events** and then **Issues**. Make sure you select **Active** to receive issue events for triggered webhooks. You can also select all events using the default option.
74+
75+
When you're finished, click **Add webhook**.
6276

63-
When you're finished, click **Add webhook**. Phew! Now that you created the webhook, it's time to set up our local server to test the webhook. Head on over to [Configuring Your Server](/webhooks/configuring/) to learn how to do that.
77+
Now that you've created the webhook, it's time to set up our local server to test the webhook. Head on over to [Configuring Your Server](/webhooks/configuring/) to learn how to do that.
6478

65-
#### Wildcard Event
79+
#### Wildcard event
6680

6781
To configure a webhook for all events, use the wildcard (`*`) character to specify the webhook events. When you add the wildcard event, we'll replace any existing events you have configured with the wildcard event and send you payloads for all supported events. You'll also automatically get any new events we might add in the future.
6882

0 commit comments

Comments
 (0)