In the last section we spoke a little bit about why web hooks are challenging to test in the development
environment.
We then spoke about how we're going to use a service called local tunnelled dot com to successfully
handle web hooks and make our lives just a little bit easier.
So let's get to it.
We're going to first start off by installing local tunnel as a new module and then we will create a
startup script inside of our package not just on file to automatically create this Web tunnel thing.
Anytime we start up our development server so I'm going to start off by changing over to my terminal.
I'm going to kill the running server and then I'm going to install the local tunnelled helper to our
project.
There we go with NPM install dash dash save local tunnel like so now the documentation that I just showed
you two seconds ago did show.
Installing it as a global module.
So you could get access to local Tunnell at the command line.
However we really just need this for our single project.
So we're not going to install it as a global module.
We're just going to install it to the local project.
Now local tunnels is pretty small.
So already done took 16 seconds or so.
So let's now create a startup script that will automatically start local tunnel any time we start up
our development server.
So change back over to my code editor I'll find my package got some file.
Here it is right here in the script section.
We're going to add on a new script.
So make sure that underneath right after Heroku post build make sure you get a column at the very end
there and then we'll call this new script about web hook.
I think that works just fine.
So let's call it what the heck why Polk is fine.
And then to start up the actual local Tunnell server on our local machine we'll run the command LTE
which is short for local tunnel will specify the port that we wanted to direct traffic to whenever a
request comes in.
So for us it's always going to be port five thousand and then we are also going to specify a sub domain
name to use as the identifier for our very specific web.
So a little bit more about that before we just tossed that option in here.
So inside this diagram I'd said that we're going to tell send grid to send its web hook request to specifically
web hook helper dot local tunnelled dot com.
So as you can imagine many people are making use of this local tunnel service at any given time.
So to specify you're kind of like a little slice of requests to forward on to your local environment
you specify a subdomain right here.
So this subdomain is going to be unique for you.
It's going to be unique for me it's unique for everyone who makes use of local tunnel so we can put
any unique token right here as the subdomains so maybe I'll put like my my special sub domain you know
whatever I want to put there and that will make sure that any time I provide you or you are able to
send it to send these Web hooks to specify specifically my special subdomain and then when I start up
my local server my local local tunnel so to speak I'm going to make sure that I tell it hey watch for
requests that are coming into my special subdomain and only requests that are coming to the subdomain
will be forwarded onto our server.
And so that's what we need to specify inside of the startup script.
It's going to be our kind of like unique little slice of life that only you and I are using to receive
requests on and nobody else who is making use of the local tunnel service is going to use.
Now so you and I.
But just to be clear you want to make sure that you have a very unique local Tunnell subdomain because
you don't want to share this with anyone else.
Otherwise you will receive the same one hook request that they are receiving.
So I'm going to put dash s right here to spece best to find my subdomain.
And then again I just want to make sure that this is a unique subdomain so I'm going to just say like
yeah that looks good right there.
Basically just put in some random characters sufficiently random don't do something like my subdomain
or my special you know don't do anything.
I just wrote because you might accidentally be sharing the same subdomain with someone else.
And again you will start to receive requests that were not actually meant for you.
So just put in something random like so.
So that's looking pretty good.
We can now make use of this web Hoque script.
Now of course we probably want to start up the web postscript right here in this local tunnelled server.
Any time we start up our application in development mode.
So we're going to go into the dev script and add on one additional script to run.
So in addition to being run server and run client I'm going to add on one more script here.
So put a space before the closing double quote here and we're going to add on you end run web book.
So we'll say escape double quotes NPM run web hook and then escape double quote like so.
So we now have three distinct services that are being started up every single time we initialize our
development server.
OK.
So let's test this thing out.
Back at the terminal we're going to run and run dev.
So you can see a tremendous amount of feedback being piped around now.
So here's the MTM startup script or the gnomon one.
Excuse me.
You can then see.
You should see a two in here.
Assuming you added our new script to the very end you I'll say something like your you are l is a unique
subdomain local tunnel dot in me is the actual domain not dot com but whatever you get the idea.
So this right here is our little unique slice of paradise.
This is where we want to instruct our Send grid server our sun grid application to send any web requests
over to and then any requests that are made to this domain will be automatically forwarded on to our
local laptop.
OK.
So that's pretty good for set up.
Let's continue on the next section and we're going to make sure that we turn on web hooks and specifically
event tracking on the center grid dashboard and then we will be able to test and make sure that we are
actually getting requests from any feedback clicks over to our application.
So let's take care of that in the next section.