In the last section we added on a dev script to automatically start up both our client and the server
from a single terminal window.
So nice little trick going to save us like a couple of keystrokes.
Every game is good.
OK so now in this section before we start talking about anything I want to give you a quick preview
of what we're going to be doing in the next section or two.
So in like two seconds ago I gave you this like really big ominous warning about how something is going
to be crazy complicated and all that kind of stuff right.
So in this section we're going to set a very short term goal for ourselves.
We're going to set like this tiny little feature that we want to add when we add that feature.
We are going to encounter a little stumbling block.
So it's give me this little tiny thing that's going to be like oh you know this is kind of a pain.
It would be kind of nicer if we could kind of work around this.
So we're going to do a quick tiny little fix to make that stumbling blocks go away.
Now that quick little fix is the thing that I'd said was the very easy way to get our separate client
in our separate server or back end server like the separate back and server and the separate client
server to work nicely together that easy fix is going to be how we get the two things to work together
very well after that after we put the fix in.
We will then do a deep dive into why that fix works the way it does and that that discussion that is
the scary thing.
I alluded to just a couple of videos ago because that's the goal we're going to do this very small little
feature we're going to encounter a little stumbling block.
We're going to fix it with one easy little line of code and then we're going to do the big scary deep
dive on why it all worked the way it does.
So let's get to it.
So here's where I want to do.
Here's the very small feature that's going to kind of expose this little problem to us.
I want to say that on the reactor side of my application.
So in the re-act application I want to have a little link at the bottom of the screen that says Click
here to sign in with Google off.
So click here.
Sign in with Google Earth.
That's it.
Nothing else.
Now you and I know that to kick a user into our waterflow all they have to do is go to localhost.
Colin 5000 slash or slash Google.
We've been typing this path into our browser just nonstop on this course so far you and I know that
our express server has the overall flow available on Slashdot slash Google.
No doubt about it.
Right.
OK.
So we'll keep that in mind.
And let's go ahead and try to add this link.
So if you're here in this course remember that in the course description I had said that if you want
to take this you really have to be familiar with react.
And so this is kind of where that familiarity is going to come into play.
So if you're here I'm assuming that you are at least familiar with components and state and props and
all that kind of good stuff.
Now if you're like rusty on that stuff or if you feel a little bit unstable that's OK for the first
couple of components we work on are the first couple of compounds we make.
We're going to be talking through some of the basics just to make sure that you get a good refresher
on how re-act works.
But in general I'm going to assume that you know a GSX is and you know how props work and all that kind
of good stuff.
OK.
So I just want to throw that out there make sure we're on the same page so to get a link to appear on
the screen.
So to get it to just you know show up right here.
Hopefully you and I both know what to do.
We're going to find our client folder.
We're going to find the source folder inside of it and then we're going to find the root re-active component
that was automatically generated when we made our project.
That is the outcome G-S file.
So we opened this up just a little bit ago and change some text in here.
So inside that it's two tag.
So again I'm saying that I want to add a simple anchor tag on here to kick a user into or a water flow.
So we're talking about navigation but we're talking about like navigation to different servers.
This has nothing to do with re-act router nothing fancy.
This is a simple anchor tag just a classic HDMI out.
So at the very bottom of the component right underneath the tag I'm going to add my anchor.
I'm going to give it some text of sign in with Google and then I'm going to give it an F..
Now the first way that we write this Tref is going to kind of take a little bit of a naive approach.
OK.
We're going to take a naive approach.
It is not the right way right now and we're going to just kind of say about why it is not the best way
to do this.
So I got to say that when a user clicks on this anchor tag I want to take them to the rout slash off
slash Google.
So again kind of a naive way of doing this but let's just see what happens.
I'm going to save this file change back over to the browser.
And here's the link appearing on the screen.
Now why exactly was that a naive approach.
Well recall we just said two seconds ago you and I know that our last flow can be entered by navigating
to localhost Kolin 5000 slash slash Google.
So why was this a naive approach right here at this link.
Well remember the default behavior of your browser if you provide a relative link which this is we are
not specifying specifying the domain on here.
So it's what we refer to as a relative link or relative path.
Then the browser is going to automatically assume that you are trying to visit that relative path on
the same domain that you are currently visiting which currently is local host 3000.
So if I hover over this link right now if you look at the very bottom left over here and I know the
text on the video is probably really small but you can do the same thing on your browser if you hover
over the link.
It's going to say localhost 3000 off slash Google.
So again can't say it enough and you're tired of me saying it.
Our flow is not at local who's 3000.
It's on our express server which is hosted on port 5000.
A totally different port.
The two are not related at all.
If you click on this link right now it's not going to kick you into the flow.
So OK.
You know we're probably you probably understand that whatever we get it we can't use a relative length
here.
That's fine.
So how would we fix this.
Well you know hey it's not the worst thing in the world.
We just have to manually specify the domain.
So we'll say t HTP colon slash slash localhost colon 5000 slash off slash Google.
This is the same address that we've been visiting throughout the course.
We know without a doubt that this link will kick us into the Auth. flow no doubt about it.
And so just to prove it I'll change back over to the browser.
Let's see we already got the refresh at the very bottom left hand side.
When I hover over the link it now says localhost 0 0 0 slash all US slash Google.
So when I click on this thing we get kicked into the Google off flow and we eventually end back up at
our server and local localhost 5000 Yes we see that warning message that we still haven't fixed but
we eventually will after we finish all this re-act set up stuff.
So clearly it looks like that fully qualified domain is working the way we expect.
So where am I going with this.
I know I'm doing this is kind of taking a long time but believe me this is like a really important problem
to understand on how the client and the server work together.
So please just bear with me for a moment.
So why is this a stumbling block like why is this a problem right here.
Well it's really easy really straightforward this link as I have crafted it right here and you and I
are looking at is only going to work in our development environment on our local machine.
This is assuming that we have some server running on localhost on port 5000 when we deploy our application
to Heroku this link right here.
It's not going to work anymore in our production environment.
This link will not work the way we expect it to.
So you might be thinking well what are you talking about.
How is this going to work.
Well hey when we when we go to deployment if we want to access our production server we would have to
just magically change the server right here.
The address over to whatever that randomly generated word was by you dot Roku app dot com like so.
So essentially to make the app work correctly with just this very simple very basic anchor tag we would
have to somehow dynamically whenever we deploy our application go over our entire codebase find every
anchor tag find every API request and magically just automatically flip it from localhost 5000 over
to our Heroku app address.
And to me that is a stumbling block.
That is a big problem.
Obviously you and I don't want to have to go over our codebase and replace all these links right here.
Any time we go to deployment.
Right.
That's crazy.
We want to just have like one setting and have everything automatically work without having to change
our stuff around for deployment.
So you might be thinking Hey Steven man why are you making such a big deal about this.
Who cares let's put some little check into our codebase and say Are we in production if we are use this
link.
Use our Heroku app address which is where our express server sits.
Otherwise we must be in production in which case irksome and development in which case we should use
localhost 5000 and use it.
You're right that would definitely work.
We could probably add in some check to decide if we were in production or if we were in production or
development and then changed the domain appropriately.
I'm not going to disagree with you but you know what I'm going to say even that is too much work.
Even that is too much.
I don't want to do it.
I don't want to be changing any links whatsoever.
I want to say that if I want to go to off I slash Google I want that to just kick me into the flow period.
I want to keep my life as a front end developer as easy as possible.
I don't want to have to do any extra magic any extra set up to dynamically generate these paths on the
fly.
So at this point I'm going to tell you that we have now identified what the stumbling block behind our
separate front end and back in service is the clear stumbling block here is that sometimes we want to
just make reference to a path and not have to really care if we are looking at our local host 5000 API
or our production Heroku app dot com API.
I don't want to care about that.
I want everything to just magically work right out of the box and have everything just figure itself
out and figure out where the API is.
Just do it for me.
So that's the stumbling block.
We are now going to add a little bit of code that is going to make this link right here like Slash or
slash Google work for us automatically.
And so this next little bit of code that we're going to add in is the part that I had said previously
was the like very simple very small fix to make the backend server and the front end server work nicely
together.
So this is going to be the fix you are going to agree with me that it is easy it's small code.
It's a very small change.
What it's doing however is pretty crazy and that's what we're going to spend a lot of time to discuss
and figure out what is really going on with our server architecture.
So you I'm really excited.
I love this.
I love this topic.
I'm really excited.
It's very complicated and I feel like you're not going to have a really good time for you what's going
on.
So let's do that small change to make everything just magically work regardless of if we are in development
or production.
Let's do it.
So I'm going to find inside my client directory my package.
Jason File.
Remember this is in the client directory.
So this is not the one in our root project.
So we've been working on two separate or we now have the two separate package not some files we have
been previously working on the server one.
We are not opening up the server one.
Close it.
Get out of here.
We don't want it.
We want the package not just on file that has a name of client.
At the very top so inside the client pack start based on file We're going to add one little piece of
configuration in here.
This is the line of code that is going to make everything just magically work out of the box with really
no care in the world from us is going to seem like this front end server and the back end server just
mess together so so ridiculously well OK I'm going to find the line that says private and writer Neith
it.
Honestly it doesn't really matter where you put this configuration.
It can be anywhere in this overall object.
I'm going to put in a key of proxy that's going to be pointing at an object I'm going to make sure I
get the comma right after it right away.
So I don't want to make any typos at this point inside of this proxy object.
I'm going out on a key of slash Auth. slash Google.
I'm going to close it out.
So closing string like so that I'm going to assign the value of another object inside of the second
object and give target and then as a value HTP colon slash slash localhost colon 5000.
OK.
So that's very much it.
At this point we have more or less solved the entire issue of making the server and the client server
work together nicely.
That's it just this right here.
So again I want to reiterate the fact that when we start talking about what is going on behind the scenes
with this line of code you will say to me Stephen this seems insane.
Why are we doing this.
You're only going to say that because we're going into the behind the scenes stuff.
If we just put in this line of code right here and I said Hey that's it.
You know everything works you would say Oh fantastic everything worked together so nicely.
So I can't say it enough.
It's very easy to get this stuff working together figuring out why it's working is the hard part.
But I've I know I've said that enough now you're tired you're tired me talking about that so let's test
this out and just make sure everything works the way we expect.
Now I will say we are going to get a very small error when we go through the allotted flow but it's
totally fine.
It's an error that we can also fix that very easily as well.
OK.
What I really want to prove to you right now is that inside this app J.S. file we can just put on slash
or slash Google and somehow get over to the auth flow.
So to test this thing out a first change over to my terminal.
I'm going to kill the running server.
So the both exited and I'm going to start the server back up with NPM run death.
So our front end server the reac stuff it does have live reload but it does not automatically reload
the server when we change the package start dates on file.
So usually when we change the re-act components or anything like that we will get the benefit of the
live reload.
But that is not the case with stuff that we change in Pakistan Jason.
OK.
So we got kicked back over to the browser.
It looks like we're doing the refresh right now let's wait for it to just finish its thing still starting
the development server Well while that's loading up I'll give you a little bit of a preview when everything
looks back up and we hover over the little link right here.
We're going to notice that at the very bottom right is still going to display a domain of local host
3000 slash Auth. slash Google.
And so you might be saying they're thinking like as steve.
You sure this stuff is going to work.
And I can say yes it's OK.
So there's the reload I'm going to hover over the link.
Notice how the bottom left it says localhost 3000 slash or slash Google you and I know that is not the
address of our waterflow it is our local host 5000.
So what the heck.
Whatever.
Let's try it.
I'm going to click the link.
Now when I do so we will get a error.
So we've got another redirect you or I mismatch this is OK.
We will fix this.
But what is way more important and way more relevant is the fact that we got into our lava flow at all.
We got into the lava flow.
That means that in all the different routes like API requests anchor tax whatever else getting static
assets it doesn't matter.
Everything that we do on the client side of our application can be easily forwarded along to our express
server.
And so we don't have to worry about what domain we're on or anything like that.
We can just say try to access slash or slash Google and automatically get things redirected or forwarded
onto localhost 5000 or wherever our API server is.
OK.
So at this point all I want you to really understand is that we kind of ran into a stumbling block where
we had to manually define the domain inside of this anchor tag whenever we wanted to send a user over
to our API server.
That was a stumbling block because our root domain here for the API server was going to change between
our development and our production environments.
We did not want to have to put in any type of helpers or route routing stuff or anything like that inside
of our code that had to dynamically figure out what domain to go to in between development and production.
So rather than kind of deal with all that kind of stuff we just use a relative route right here.
We then did a little bit of configuration inside the package not just on file and it appeared that everything
just kind of magically worked for us.
That's all I really want you to understand right now.
So at this point we have clearly demonstrated that we can get the client server like this client re-act
server to work together nicely with our express backend.
So at this point we could we could very easily just like stop right here and say yeah that's it.
Everything is working together.
It's fine.
Let's move on.
Nothing else we're talking about here.
But because we solely want to understand what is going on behind the scenes we're going to come back
in the next section.
We're going to fix up this little API our off you are a mismatch error.
And then we will immediately do a quick talk just very brief about how this setting right here is working
and then we will go into the real deep stuff and talk about why we picked the server architecture why
this proxy thing works and all that kind of crazy stuff.
Again I'm really excited.
Thank you for being here.
Thanks for listening to this.
I love doing this stuff so let's take a break.
We'll come back to the next section we're going to fix up the old stuff and then start talking about
what's going on.
So I'll see you in just a second.