In the last video we got a quick reminder on how we are going to be making use of Web hooks to get some
communication from Send grid whenever a user clicks on one of the links inside of our e-mails.
So let's dive a little bit more into web hooks to understand exactly how they work.
And also talked about how they work in the development versus production environments.
OK.
So here's the first thing that I want you to understand about web hooks specifically as they are implemented
by centered.
So in this diagram we're kind of modeling out the lifecycle of a web hook inside of our application.
So we're saying that the user clicks a link and then maybe two seconds later another user clicks a different
link and then five seconds later another user clicks another different link so we can just imagine that
in very short succession we might have a bunch of different users inside an application click several
different links inside of many different emails.
Now for every one of these clicks send grid records that click event.
They say OK someone just clicked on this.
Here's the user who clicked on it like here's their email and here is the exact link that they clicked
on send grid then doesn't immediately send all that information over to our back and server.
So there is not one single post request or one single request from Send grid to our server every single
time the user clicks on a link.
Instead send grid waits and only every 30 seconds or one minute or every some interval of time does
Sun Grid make a single request over to our API and inside that request it says hey in the last 30 seconds
or in the last one minute or so here are all the different events that just occurred.
Tied to your different e-mails.
So we're not going to get a single request corresponding to every single individual link.
Instead we're going to get one big bold request that contains a lot of different click events that we're
going to have to process.
So about every 30 seconds or so will we will eventually get one of these requests.
We'll do some processing on it.
Update all the relevant surveys and then wait for the next web to come in from centigrade.
So that's the first thing to understand.
OK.
So that's kind of how the web hook itself is going to be working.
I now want to talk to you a little bit about how our Web is going to work in the production versus development
environments.
And so this is where things get a little bit hairy.
We will first talk about how web hooks work in production because that is the easier case and then we'll
talk about exactly how things start to break down when we are in the development environment.
Okay.
So here is in production this is the easy case.
This is the case which like you can probably kind of figure out exactly what is going on here.
So every 30 seconds or so second grade is going to make a post request to our express server saying
here's a list of all the different clicks here is all the data I have about all of them.
So it is going to formulate some request it will make a post request to some route that we give it.
So something like you know email the dot com slash surveys slash workbook's that request then comes
into our API and hey were happy like you know we get the list.
We process it and do whatever we want.
Now the real key that I want to point out here is kind of very easy thing the thing that makes our life
real simple when we are specifically in production is the fact that said grid is going to make a request
to our server that is hosted at a domain like email or dot com or if we are still using Heroku it would
be the you know for me agile Bayu Roku app dot com This is a server that is available to the outside
world.
It is a domain that is available to the whole entire Internet and so it has absolutely no issues making
a post request to a domain of something like email or dot com or agile by you Roku abduct com.
So in production things work out just fine.
Well no let's don't think a little bit about the development environment and how this domain's start
might start to get just a little bit tricky.
Okay so now in the development world as we are running our lab to our application on our local laptops
our server is hosted at local host 5000.
And so when we say Hey great.
Tell us about all the clicks and last 30 seconds or so.
Senator it says Wait make a post request to wear to local host 5000 local host.
5000 is a address that is specific to our laptop to our very specific machine right now on your machine.
You have a local host 5000 on mine.
I have a completely different local host 5000 that is only a valid address to our local development
environment.
And so if we said localhost 5000 to descend grid singer to be like wait where local host what domain
is that.
It does not have the ability to reach out directly to your very particular laptop and make a post request
to your running development server now just to clarify it could theoretically be done.
You know we could set up some fancy routing rules on your local network to make all this happen.
But that is some very custom set up that's always going to be slightly different depending on what local
network you're running on like I'm talking specifically about your router that you have running at your
home or your office or your local coffee shop.
And so we wouldn't want to go through that complicated setup.
Instead we need to think of some other clever approach to make sure that whenever a web hook is issued
from Send grid to our development server it somehow magically gets redirected somehow to our local running
development machine.
That's what we really ideally would want to do and that is in fact exactly what we're going to do.
So we're going to fix this up and make sure that we're Polk's still work in the development environment
as well.
Now to do so we're going to use a little package a little service called local tunnel.
Let's talk about exactly what local tunnel is going to do for us and how it's going to solve this issue.
OK so here's life with local tunnel.
So we're still in development and we now have split our diagram into two separate worlds.
Everything running on the outside internet.
The actual web and then everything running on our local development laptop.
So now in this world we're going to say that when ever said grid makes a post request to hopefully our
server we're going to tell send grid to send that post request to the domain local tunnel dot com.
So local tunnel dot com right here is a special API It's a special service that we can make use of for
free to automatically handle web Pook's nicely inside the development environment.
So local tunnel dot com It is an outside service that we are going to be making use of we are going
to tell cent we're going to tell us this and we're going to tell local tunnelled dot com that if they
ever receive a post request to the domain of something like the subdomain of web hook helper then they
should take that request and automatically forward it on to a local tunnel's server that is running
on our local laptop.
We will then tell this local server for the request on to local host 5000.
So essentially the reason this is going to work is that we're going to stand up some local server that
automatically communicates with local Tunnell dot com.
And so there's a lot of very active traffic that happens back and forth between this remote local tunnelled
dot com and this local tunnelled server that we are running on our machine.
So any time a request comes into local tunnel dotcom will be automatically forwarded to our local server
that will then forward the request onto our local API.
So if this sounds complicated it's because it kind of is what folks are actually quite notorious for
being kind of challenging to set up in the local development environment.
And so this helper that we're making use of right here is just one of many different services that are
out there designed to make your life a little bit easier when it comes to web hooks.
Now we are using local tunnelled dot com in particular because it is a free service that is really easy
to get started with and you don't have to sign up or anything like that.
All you've got to do is install a little server and you're pretty much good to go.
OK.
So I do want to show you a little bit of documentation around local tunnel.
So in my browser I have already navigated to their web page so you can go to your local tunnel dot get
hub I.O. slash WDW.
And if you want to you you can read a little bit around the documentation here but in general it's pretty
easy to get started with.
So we're going to install local Tunnell as an MP module that we can then start up a server and tell
local tunnel that if any requests come in automatically forward that request on to a very specific port.
So for us this will be port five thousand right here.
And then again you know it's all free really to get started with.
OK.
So let's take a quick break.
We'll come back in the next section and we're going to set up this local tunnel's stuff.
So we'll see you in just a minute.