1 00:00:00,740 --> 00:00:05,520 In the last section we spoke a little bit about why web hooks are challenging to test in the development 2 00:00:05,520 --> 00:00:06,420 environment. 3 00:00:06,690 --> 00:00:11,670 We then spoke about how we're going to use a service called local tunnelled dot com to successfully 4 00:00:11,670 --> 00:00:15,050 handle web hooks and make our lives just a little bit easier. 5 00:00:15,060 --> 00:00:16,620 So let's get to it. 6 00:00:16,620 --> 00:00:22,440 We're going to first start off by installing local tunnel as a new module and then we will create a 7 00:00:22,440 --> 00:00:28,330 startup script inside of our package not just on file to automatically create this Web tunnel thing. 8 00:00:28,480 --> 00:00:34,240 Anytime we start up our development server so I'm going to start off by changing over to my terminal. 9 00:00:34,290 --> 00:00:39,420 I'm going to kill the running server and then I'm going to install the local tunnelled helper to our 10 00:00:39,420 --> 00:00:41,320 project. 11 00:00:41,480 --> 00:00:50,480 There we go with NPM install dash dash save local tunnel like so now the documentation that I just showed 12 00:00:50,480 --> 00:00:52,860 you two seconds ago did show. 13 00:00:53,000 --> 00:00:55,450 Installing it as a global module. 14 00:00:55,670 --> 00:00:58,760 So you could get access to local Tunnell at the command line. 15 00:00:58,790 --> 00:01:02,000 However we really just need this for our single project. 16 00:01:02,060 --> 00:01:04,320 So we're not going to install it as a global module. 17 00:01:04,340 --> 00:01:07,910 We're just going to install it to the local project. 18 00:01:08,020 --> 00:01:09,320 Now local tunnels is pretty small. 19 00:01:09,320 --> 00:01:12,010 So already done took 16 seconds or so. 20 00:01:12,020 --> 00:01:17,120 So let's now create a startup script that will automatically start local tunnel any time we start up 21 00:01:17,360 --> 00:01:18,620 our development server. 22 00:01:19,010 --> 00:01:24,010 So change back over to my code editor I'll find my package got some file. 23 00:01:24,010 --> 00:01:27,260 Here it is right here in the script section. 24 00:01:27,290 --> 00:01:29,420 We're going to add on a new script. 25 00:01:29,750 --> 00:01:34,250 So make sure that underneath right after Heroku post build make sure you get a column at the very end 26 00:01:34,250 --> 00:01:39,120 there and then we'll call this new script about web hook. 27 00:01:39,130 --> 00:01:40,750 I think that works just fine. 28 00:01:40,780 --> 00:01:44,950 So let's call it what the heck why Polk is fine. 29 00:01:45,440 --> 00:01:52,460 And then to start up the actual local Tunnell server on our local machine we'll run the command LTE 30 00:01:52,580 --> 00:01:58,460 which is short for local tunnel will specify the port that we wanted to direct traffic to whenever a 31 00:01:58,460 --> 00:01:59,540 request comes in. 32 00:01:59,540 --> 00:02:05,930 So for us it's always going to be port five thousand and then we are also going to specify a sub domain 33 00:02:06,020 --> 00:02:11,440 name to use as the identifier for our very specific web. 34 00:02:11,660 --> 00:02:15,490 So a little bit more about that before we just tossed that option in here. 35 00:02:16,280 --> 00:02:23,630 So inside this diagram I'd said that we're going to tell send grid to send its web hook request to specifically 36 00:02:23,870 --> 00:02:27,000 web hook helper dot local tunnelled dot com. 37 00:02:27,020 --> 00:02:32,820 So as you can imagine many people are making use of this local tunnel service at any given time. 38 00:02:33,050 --> 00:02:38,630 So to specify you're kind of like a little slice of requests to forward on to your local environment 39 00:02:39,080 --> 00:02:41,730 you specify a subdomain right here. 40 00:02:41,870 --> 00:02:44,540 So this subdomain is going to be unique for you. 41 00:02:44,540 --> 00:02:49,550 It's going to be unique for me it's unique for everyone who makes use of local tunnel so we can put 42 00:02:49,550 --> 00:02:58,610 any unique token right here as the subdomains so maybe I'll put like my my special sub domain you know 43 00:02:58,610 --> 00:03:03,740 whatever I want to put there and that will make sure that any time I provide you or you are able to 44 00:03:03,740 --> 00:03:10,340 send it to send these Web hooks to specify specifically my special subdomain and then when I start up 45 00:03:10,340 --> 00:03:16,640 my local server my local local tunnel so to speak I'm going to make sure that I tell it hey watch for 46 00:03:16,640 --> 00:03:22,130 requests that are coming into my special subdomain and only requests that are coming to the subdomain 47 00:03:22,370 --> 00:03:24,740 will be forwarded onto our server. 48 00:03:24,740 --> 00:03:27,820 And so that's what we need to specify inside of the startup script. 49 00:03:27,830 --> 00:03:33,440 It's going to be our kind of like unique little slice of life that only you and I are using to receive 50 00:03:33,440 --> 00:03:38,400 requests on and nobody else who is making use of the local tunnel service is going to use. 51 00:03:38,690 --> 00:03:39,510 Now so you and I. 52 00:03:39,530 --> 00:03:46,310 But just to be clear you want to make sure that you have a very unique local Tunnell subdomain because 53 00:03:46,310 --> 00:03:48,220 you don't want to share this with anyone else. 54 00:03:48,320 --> 00:03:52,670 Otherwise you will receive the same one hook request that they are receiving. 55 00:03:52,760 --> 00:03:57,600 So I'm going to put dash s right here to spece best to find my subdomain. 56 00:03:57,720 --> 00:04:02,900 And then again I just want to make sure that this is a unique subdomain so I'm going to just say like 57 00:04:03,310 --> 00:04:04,650 yeah that looks good right there. 58 00:04:04,700 --> 00:04:10,700 Basically just put in some random characters sufficiently random don't do something like my subdomain 59 00:04:10,790 --> 00:04:13,760 or my special you know don't do anything. 60 00:04:13,760 --> 00:04:17,830 I just wrote because you might accidentally be sharing the same subdomain with someone else. 61 00:04:17,840 --> 00:04:21,530 And again you will start to receive requests that were not actually meant for you. 62 00:04:21,860 --> 00:04:25,740 So just put in something random like so. 63 00:04:26,170 --> 00:04:27,300 So that's looking pretty good. 64 00:04:27,400 --> 00:04:31,150 We can now make use of this web Hoque script. 65 00:04:31,180 --> 00:04:36,470 Now of course we probably want to start up the web postscript right here in this local tunnelled server. 66 00:04:36,580 --> 00:04:40,100 Any time we start up our application in development mode. 67 00:04:40,240 --> 00:04:45,050 So we're going to go into the dev script and add on one additional script to run. 68 00:04:45,250 --> 00:04:51,820 So in addition to being run server and run client I'm going to add on one more script here. 69 00:04:51,820 --> 00:04:59,280 So put a space before the closing double quote here and we're going to add on you end run web book. 70 00:04:59,530 --> 00:05:08,700 So we'll say escape double quotes NPM run web hook and then escape double quote like so. 71 00:05:09,310 --> 00:05:15,070 So we now have three distinct services that are being started up every single time we initialize our 72 00:05:15,070 --> 00:05:16,380 development server. 73 00:05:16,850 --> 00:05:17,140 OK. 74 00:05:17,160 --> 00:05:19,330 So let's test this thing out. 75 00:05:19,330 --> 00:05:24,990 Back at the terminal we're going to run and run dev. 76 00:05:25,190 --> 00:05:28,420 So you can see a tremendous amount of feedback being piped around now. 77 00:05:28,570 --> 00:05:31,700 So here's the MTM startup script or the gnomon one. 78 00:05:31,700 --> 00:05:32,810 Excuse me. 79 00:05:33,170 --> 00:05:34,090 You can then see. 80 00:05:34,130 --> 00:05:35,370 You should see a two in here. 81 00:05:35,420 --> 00:05:40,970 Assuming you added our new script to the very end you I'll say something like your you are l is a unique 82 00:05:40,970 --> 00:05:49,430 subdomain local tunnel dot in me is the actual domain not dot com but whatever you get the idea. 83 00:05:49,430 --> 00:05:53,180 So this right here is our little unique slice of paradise. 84 00:05:53,180 --> 00:06:00,350 This is where we want to instruct our Send grid server our sun grid application to send any web requests 85 00:06:00,380 --> 00:06:05,660 over to and then any requests that are made to this domain will be automatically forwarded on to our 86 00:06:05,660 --> 00:06:06,820 local laptop. 87 00:06:07,140 --> 00:06:07,770 OK. 88 00:06:08,180 --> 00:06:09,700 So that's pretty good for set up. 89 00:06:09,770 --> 00:06:14,390 Let's continue on the next section and we're going to make sure that we turn on web hooks and specifically 90 00:06:14,390 --> 00:06:19,880 event tracking on the center grid dashboard and then we will be able to test and make sure that we are 91 00:06:19,880 --> 00:06:24,890 actually getting requests from any feedback clicks over to our application. 92 00:06:24,890 --> 00:06:26,970 So let's take care of that in the next section.