1
00:00:00,690 --> 00:00:05,850
In the last section we added on a dev script to automatically start up both our client and the server

2
00:00:05,850 --> 00:00:07,320
from a single terminal window.

3
00:00:07,320 --> 00:00:11,300
So nice little trick going to save us like a couple of keystrokes.

4
00:00:11,460 --> 00:00:12,680
Every game is good.

5
00:00:13,080 --> 00:00:17,010
OK so now in this section before we start talking about anything I want to give you a quick preview

6
00:00:17,010 --> 00:00:20,130
of what we're going to be doing in the next section or two.

7
00:00:20,130 --> 00:00:25,980
So in like two seconds ago I gave you this like really big ominous warning about how something is going

8
00:00:25,980 --> 00:00:28,680
to be crazy complicated and all that kind of stuff right.

9
00:00:28,680 --> 00:00:32,430
So in this section we're going to set a very short term goal for ourselves.

10
00:00:32,430 --> 00:00:37,770
We're going to set like this tiny little feature that we want to add when we add that feature.

11
00:00:37,770 --> 00:00:41,190
We are going to encounter a little stumbling block.

12
00:00:41,190 --> 00:00:45,470
So it's give me this little tiny thing that's going to be like oh you know this is kind of a pain.

13
00:00:45,480 --> 00:00:48,600
It would be kind of nicer if we could kind of work around this.

14
00:00:48,630 --> 00:00:55,560
So we're going to do a quick tiny little fix to make that stumbling blocks go away.

15
00:00:55,560 --> 00:01:02,130
Now that quick little fix is the thing that I'd said was the very easy way to get our separate client

16
00:01:02,370 --> 00:01:06,780
in our separate server or back end server like the separate back and server and the separate client

17
00:01:06,780 --> 00:01:12,030
server to work nicely together that easy fix is going to be how we get the two things to work together

18
00:01:12,030 --> 00:01:16,240
very well after that after we put the fix in.

19
00:01:16,260 --> 00:01:23,050
We will then do a deep dive into why that fix works the way it does and that that discussion that is

20
00:01:23,050 --> 00:01:23,750
the scary thing.

21
00:01:23,760 --> 00:01:29,040
I alluded to just a couple of videos ago because that's the goal we're going to do this very small little

22
00:01:29,040 --> 00:01:32,360
feature we're going to encounter a little stumbling block.

23
00:01:32,460 --> 00:01:37,620
We're going to fix it with one easy little line of code and then we're going to do the big scary deep

24
00:01:37,620 --> 00:01:40,890
dive on why it all worked the way it does.

25
00:01:40,950 --> 00:01:42,960
So let's get to it.

26
00:01:42,960 --> 00:01:43,770
So here's where I want to do.

27
00:01:43,770 --> 00:01:48,660
Here's the very small feature that's going to kind of expose this little problem to us.

28
00:01:48,660 --> 00:01:52,050
I want to say that on the reactor side of my application.

29
00:01:52,050 --> 00:01:57,780
So in the re-act application I want to have a little link at the bottom of the screen that says Click

30
00:01:57,780 --> 00:02:01,140
here to sign in with Google off.

31
00:02:01,530 --> 00:02:02,620
So click here.

32
00:02:02,670 --> 00:02:04,290
Sign in with Google Earth.

33
00:02:04,350 --> 00:02:04,860
That's it.

34
00:02:04,860 --> 00:02:06,300
Nothing else.

35
00:02:06,300 --> 00:02:14,360
Now you and I know that to kick a user into our waterflow all they have to do is go to localhost.

36
00:02:14,430 --> 00:02:17,820
Colin 5000 slash or slash Google.

37
00:02:17,820 --> 00:02:23,760
We've been typing this path into our browser just nonstop on this course so far you and I know that

38
00:02:23,820 --> 00:02:29,680
our express server has the overall flow available on Slashdot slash Google.

39
00:02:29,730 --> 00:02:30,520
No doubt about it.

40
00:02:30,580 --> 00:02:31,120
Right.

41
00:02:31,370 --> 00:02:31,870
OK.

42
00:02:32,100 --> 00:02:33,240
So we'll keep that in mind.

43
00:02:33,240 --> 00:02:36,960
And let's go ahead and try to add this link.

44
00:02:36,960 --> 00:02:42,600
So if you're here in this course remember that in the course description I had said that if you want

45
00:02:42,600 --> 00:02:45,180
to take this you really have to be familiar with react.

46
00:02:45,270 --> 00:02:48,650
And so this is kind of where that familiarity is going to come into play.

47
00:02:48,660 --> 00:02:55,260
So if you're here I'm assuming that you are at least familiar with components and state and props and

48
00:02:55,260 --> 00:02:56,710
all that kind of good stuff.

49
00:02:56,790 --> 00:03:02,220
Now if you're like rusty on that stuff or if you feel a little bit unstable that's OK for the first

50
00:03:02,220 --> 00:03:05,460
couple of components we work on are the first couple of compounds we make.

51
00:03:05,520 --> 00:03:09,810
We're going to be talking through some of the basics just to make sure that you get a good refresher

52
00:03:09,810 --> 00:03:11,100
on how re-act works.

53
00:03:11,100 --> 00:03:16,320
But in general I'm going to assume that you know a GSX is and you know how props work and all that kind

54
00:03:16,320 --> 00:03:17,110
of good stuff.

55
00:03:17,120 --> 00:03:17,390
OK.

56
00:03:17,400 --> 00:03:23,040
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

57
00:03:23,040 --> 00:03:23,830
the screen.

58
00:03:24,300 --> 00:03:27,430
So to get it to just you know show up right here.

59
00:03:27,810 --> 00:03:29,610
Hopefully you and I both know what to do.

60
00:03:29,610 --> 00:03:31,580
We're going to find our client folder.

61
00:03:31,680 --> 00:03:36,690
We're going to find the source folder inside of it and then we're going to find the root re-active component

62
00:03:36,800 --> 00:03:39,820
that was automatically generated when we made our project.

63
00:03:39,930 --> 00:03:42,320
That is the outcome G-S file.

64
00:03:42,510 --> 00:03:46,250
So we opened this up just a little bit ago and change some text in here.

65
00:03:46,260 --> 00:03:48,390
So inside that it's two tag.

66
00:03:48,390 --> 00:03:55,260
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.

67
00:03:55,260 --> 00:03:59,700
So we're talking about navigation but we're talking about like navigation to different servers.

68
00:03:59,700 --> 00:04:02,880
This has nothing to do with re-act router nothing fancy.

69
00:04:02,880 --> 00:04:07,090
This is a simple anchor tag just a classic HDMI out.

70
00:04:07,710 --> 00:04:14,880
So at the very bottom of the component right underneath the tag I'm going to add my anchor.

71
00:04:14,880 --> 00:04:21,750
I'm going to give it some text of sign in with Google and then I'm going to give it an F..

72
00:04:21,960 --> 00:04:27,330
Now the first way that we write this Tref is going to kind of take a little bit of a naive approach.

73
00:04:27,330 --> 00:04:27,830
OK.

74
00:04:28,050 --> 00:04:29,250
We're going to take a naive approach.

75
00:04:29,250 --> 00:04:35,250
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

76
00:04:35,250 --> 00:04:36,360
to do this.

77
00:04:36,420 --> 00:04:42,150
So I got to say that when a user clicks on this anchor tag I want to take them to the rout slash off

78
00:04:42,750 --> 00:04:44,310
slash Google.

79
00:04:44,340 --> 00:04:48,600
So again kind of a naive way of doing this but let's just see what happens.

80
00:04:48,630 --> 00:04:52,080
I'm going to save this file change back over to the browser.

81
00:04:52,440 --> 00:04:54,490
And here's the link appearing on the screen.

82
00:04:54,780 --> 00:04:57,140
Now why exactly was that a naive approach.

83
00:04:57,390 --> 00:05:03,830
Well recall we just said two seconds ago you and I know that our last flow can be entered by navigating

84
00:05:03,830 --> 00:05:08,120
to localhost Kolin 5000 slash slash Google.

85
00:05:08,120 --> 00:05:11,810
So why was this a naive approach right here at this link.

86
00:05:11,810 --> 00:05:18,680
Well remember the default behavior of your browser if you provide a relative link which this is we are

87
00:05:18,680 --> 00:05:21,030
not specifying specifying the domain on here.

88
00:05:21,050 --> 00:05:25,910
So it's what we refer to as a relative link or relative path.

89
00:05:25,910 --> 00:05:31,790
Then the browser is going to automatically assume that you are trying to visit that relative path on

90
00:05:31,790 --> 00:05:37,690
the same domain that you are currently visiting which currently is local host 3000.

91
00:05:37,700 --> 00:05:41,870
So if I hover over this link right now if you look at the very bottom left over here and I know the

92
00:05:41,870 --> 00:05:46,640
text on the video is probably really small but you can do the same thing on your browser if you hover

93
00:05:46,640 --> 00:05:47,230
over the link.

94
00:05:47,240 --> 00:05:52,610
It's going to say localhost 3000 off slash Google.

95
00:05:52,610 --> 00:05:55,930
So again can't say it enough and you're tired of me saying it.

96
00:05:55,970 --> 00:05:59,430
Our flow is not at local who's 3000.

97
00:05:59,660 --> 00:06:03,190
It's on our express server which is hosted on port 5000.

98
00:06:03,200 --> 00:06:04,330
A totally different port.

99
00:06:04,340 --> 00:06:06,650
The two are not related at all.

100
00:06:06,920 --> 00:06:10,750
If you click on this link right now it's not going to kick you into the flow.

101
00:06:11,170 --> 00:06:12,440
So OK.

102
00:06:12,560 --> 00:06:18,210
You know we're probably you probably understand that whatever we get it we can't use a relative length

103
00:06:18,210 --> 00:06:18,740
here.

104
00:06:18,860 --> 00:06:19,560
That's fine.

105
00:06:19,760 --> 00:06:21,340
So how would we fix this.

106
00:06:21,560 --> 00:06:23,690
Well you know hey it's not the worst thing in the world.

107
00:06:23,690 --> 00:06:26,710
We just have to manually specify the domain.

108
00:06:27,230 --> 00:06:37,520
So we'll say t HTP colon slash slash localhost colon 5000 slash off slash Google.

109
00:06:37,640 --> 00:06:40,630
This is the same address that we've been visiting throughout the course.

110
00:06:40,670 --> 00:06:45,760
We know without a doubt that this link will kick us into the Auth. flow no doubt about it.

111
00:06:45,770 --> 00:06:48,990
And so just to prove it I'll change back over to the browser.

112
00:06:49,340 --> 00:06:52,780
Let's see we already got the refresh at the very bottom left hand side.

113
00:06:52,790 --> 00:06:57,370
When I hover over the link it now says localhost 0 0 0 slash all US slash Google.

114
00:06:57,380 --> 00:07:02,990
So when I click on this thing we get kicked into the Google off flow and we eventually end back up at

115
00:07:02,990 --> 00:07:07,880
our server and local localhost 5000 Yes we see that warning message that we still haven't fixed but

116
00:07:07,880 --> 00:07:11,240
we eventually will after we finish all this re-act set up stuff.

117
00:07:11,330 --> 00:07:17,690
So clearly it looks like that fully qualified domain is working the way we expect.

118
00:07:17,690 --> 00:07:19,970
So where am I going with this.

119
00:07:19,970 --> 00:07:24,290
I know I'm doing this is kind of taking a long time but believe me this is like a really important problem

120
00:07:24,290 --> 00:07:27,350
to understand on how the client and the server work together.

121
00:07:27,350 --> 00:07:30,110
So please just bear with me for a moment.

122
00:07:30,140 --> 00:07:33,510
So why is this a stumbling block like why is this a problem right here.

123
00:07:33,890 --> 00:07:40,460
Well it's really easy really straightforward this link as I have crafted it right here and you and I

124
00:07:40,460 --> 00:07:47,110
are looking at is only going to work in our development environment on our local machine.

125
00:07:47,120 --> 00:07:55,220
This is assuming that we have some server running on localhost on port 5000 when we deploy our application

126
00:07:55,220 --> 00:07:57,730
to Heroku this link right here.

127
00:07:57,740 --> 00:08:00,170
It's not going to work anymore in our production environment.

128
00:08:00,170 --> 00:08:04,010
This link will not work the way we expect it to.

129
00:08:04,640 --> 00:08:08,590
So you might be thinking well what are you talking about.

130
00:08:08,600 --> 00:08:09,490
How is this going to work.

131
00:08:09,620 --> 00:08:15,410
Well hey when we when we go to deployment if we want to access our production server we would have to

132
00:08:15,410 --> 00:08:17,520
just magically change the server right here.

133
00:08:17,540 --> 00:08:26,140
The address over to whatever that randomly generated word was by you dot Roku app dot com like so.

134
00:08:26,510 --> 00:08:32,840
So essentially to make the app work correctly with just this very simple very basic anchor tag we would

135
00:08:32,840 --> 00:08:39,890
have to somehow dynamically whenever we deploy our application go over our entire codebase find every

136
00:08:39,890 --> 00:08:48,380
anchor tag find every API request and magically just automatically flip it from localhost 5000 over

137
00:08:48,380 --> 00:08:50,950
to our Heroku app address.

138
00:08:51,010 --> 00:08:53,200
And to me that is a stumbling block.

139
00:08:53,270 --> 00:08:54,860
That is a big problem.

140
00:08:54,980 --> 00:08:59,890
Obviously you and I don't want to have to go over our codebase and replace all these links right here.

141
00:08:59,900 --> 00:09:01,430
Any time we go to deployment.

142
00:09:01,430 --> 00:09:02,040
Right.

143
00:09:02,140 --> 00:09:03,200
That's crazy.

144
00:09:03,200 --> 00:09:08,360
We want to just have like one setting and have everything automatically work without having to change

145
00:09:08,420 --> 00:09:10,910
our stuff around for deployment.

146
00:09:11,000 --> 00:09:14,930
So you might be thinking Hey Steven man why are you making such a big deal about this.

147
00:09:14,930 --> 00:09:23,330
Who cares let's put some little check into our codebase and say Are we in production if we are use this

148
00:09:23,330 --> 00:09:23,660
link.

149
00:09:23,660 --> 00:09:27,710
Use our Heroku app address which is where our express server sits.

150
00:09:27,710 --> 00:09:32,720
Otherwise we must be in production in which case irksome and development in which case we should use

151
00:09:32,720 --> 00:09:35,310
localhost 5000 and use it.

152
00:09:35,330 --> 00:09:37,190
You're right that would definitely work.

153
00:09:37,190 --> 00:09:43,580
We could probably add in some check to decide if we were in production or if we were in production or

154
00:09:43,580 --> 00:09:46,100
development and then changed the domain appropriately.

155
00:09:46,100 --> 00:09:50,970
I'm not going to disagree with you but you know what I'm going to say even that is too much work.

156
00:09:50,990 --> 00:09:52,310
Even that is too much.

157
00:09:52,340 --> 00:09:53,140
I don't want to do it.

158
00:09:53,210 --> 00:09:56,060
I don't want to be changing any links whatsoever.

159
00:09:56,240 --> 00:10:04,740
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.

160
00:10:04,770 --> 00:10:10,070
I want to keep my life as a front end developer as easy as possible.

161
00:10:10,140 --> 00:10:16,410
I don't want to have to do any extra magic any extra set up to dynamically generate these paths on the

162
00:10:16,410 --> 00:10:17,660
fly.

163
00:10:17,670 --> 00:10:24,240
So at this point I'm going to tell you that we have now identified what the stumbling block behind our

164
00:10:24,240 --> 00:10:31,830
separate front end and back in service is the clear stumbling block here is that sometimes we want to

165
00:10:31,830 --> 00:10:38,970
just make reference to a path and not have to really care if we are looking at our local host 5000 API

166
00:10:39,420 --> 00:10:43,380
or our production Heroku app dot com API.

167
00:10:43,380 --> 00:10:44,410
I don't want to care about that.

168
00:10:44,430 --> 00:10:50,100
I want everything to just magically work right out of the box and have everything just figure itself

169
00:10:50,100 --> 00:10:51,750
out and figure out where the API is.

170
00:10:51,750 --> 00:10:53,080
Just do it for me.

171
00:10:53,460 --> 00:10:55,170
So that's the stumbling block.

172
00:10:55,170 --> 00:11:01,080
We are now going to add a little bit of code that is going to make this link right here like Slash or

173
00:11:01,080 --> 00:11:04,070
slash Google work for us automatically.

174
00:11:04,110 --> 00:11:08,430
And so this next little bit of code that we're going to add in is the part that I had said previously

175
00:11:08,430 --> 00:11:14,610
was the like very simple very small fix to make the backend server and the front end server work nicely

176
00:11:14,610 --> 00:11:15,670
together.

177
00:11:15,690 --> 00:11:21,000
So this is going to be the fix you are going to agree with me that it is easy it's small code.

178
00:11:21,000 --> 00:11:22,780
It's a very small change.

179
00:11:22,860 --> 00:11:28,710
What it's doing however is pretty crazy and that's what we're going to spend a lot of time to discuss

180
00:11:29,010 --> 00:11:32,870
and figure out what is really going on with our server architecture.

181
00:11:33,280 --> 00:11:35,970
So you I'm really excited.

182
00:11:35,970 --> 00:11:37,110
I love this.

183
00:11:37,140 --> 00:11:37,920
I love this topic.

184
00:11:37,920 --> 00:11:38,680
I'm really excited.

185
00:11:38,680 --> 00:11:42,600
It's very complicated and I feel like you're not going to have a really good time for you what's going

186
00:11:42,600 --> 00:11:42,830
on.

187
00:11:42,870 --> 00:11:48,960
So let's do that small change to make everything just magically work regardless of if we are in development

188
00:11:48,990 --> 00:11:49,650
or production.

189
00:11:49,650 --> 00:11:50,390
Let's do it.

190
00:11:50,700 --> 00:11:54,520
So I'm going to find inside my client directory my package.

191
00:11:54,540 --> 00:11:56,190
Jason File.

192
00:11:56,180 --> 00:11:58,390
Remember this is in the client directory.

193
00:11:58,410 --> 00:12:01,560
So this is not the one in our root project.

194
00:12:01,860 --> 00:12:07,470
So we've been working on two separate or we now have the two separate package not some files we have

195
00:12:07,470 --> 00:12:09,530
been previously working on the server one.

196
00:12:09,750 --> 00:12:11,160
We are not opening up the server one.

197
00:12:11,160 --> 00:12:11,750
Close it.

198
00:12:11,820 --> 00:12:12,430
Get out of here.

199
00:12:12,450 --> 00:12:13,190
We don't want it.

200
00:12:13,440 --> 00:12:16,850
We want the package not just on file that has a name of client.

201
00:12:16,890 --> 00:12:23,400
At the very top so inside the client pack start based on file We're going to add one little piece of

202
00:12:23,400 --> 00:12:24,740
configuration in here.

203
00:12:24,780 --> 00:12:30,780
This is the line of code that is going to make everything just magically work out of the box with really

204
00:12:30,780 --> 00:12:35,520
no care in the world from us is going to seem like this front end server and the back end server just

205
00:12:35,790 --> 00:12:43,920
mess together so so ridiculously well OK I'm going to find the line that says private and writer Neith

206
00:12:43,960 --> 00:12:44,260
it.

207
00:12:44,280 --> 00:12:46,610
Honestly it doesn't really matter where you put this configuration.

208
00:12:46,620 --> 00:12:49,010
It can be anywhere in this overall object.

209
00:12:49,080 --> 00:12:55,740
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

210
00:12:55,740 --> 00:12:57,480
get the comma right after it right away.

211
00:12:57,510 --> 00:13:01,450
So I don't want to make any typos at this point inside of this proxy object.

212
00:13:01,460 --> 00:13:06,860
I'm going out on a key of slash Auth. slash Google.

213
00:13:07,090 --> 00:13:08,390
I'm going to close it out.

214
00:13:08,400 --> 00:13:15,660
So closing string like so that I'm going to assign the value of another object inside of the second

215
00:13:15,660 --> 00:13:26,900
object and give target and then as a value HTP colon slash slash localhost colon 5000.

216
00:13:27,190 --> 00:13:28,140
OK.

217
00:13:28,710 --> 00:13:30,480
So that's very much it.

218
00:13:30,480 --> 00:13:37,740
At this point we have more or less solved the entire issue of making the server and the client server

219
00:13:38,040 --> 00:13:39,450
work together nicely.

220
00:13:39,450 --> 00:13:42,020
That's it just this right here.

221
00:13:42,030 --> 00:13:47,820
So again I want to reiterate the fact that when we start talking about what is going on behind the scenes

222
00:13:47,820 --> 00:13:52,500
with this line of code you will say to me Stephen this seems insane.

223
00:13:52,500 --> 00:13:54,470
Why are we doing this.

224
00:13:54,540 --> 00:13:58,410
You're only going to say that because we're going into the behind the scenes stuff.

225
00:13:58,590 --> 00:14:01,730
If we just put in this line of code right here and I said Hey that's it.

226
00:14:01,740 --> 00:14:07,010
You know everything works you would say Oh fantastic everything worked together so nicely.

227
00:14:07,050 --> 00:14:08,870
So I can't say it enough.

228
00:14:09,120 --> 00:14:14,160
It's very easy to get this stuff working together figuring out why it's working is the hard part.

229
00:14:14,160 --> 00:14:18,120
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

230
00:14:18,120 --> 00:14:21,020
this out and just make sure everything works the way we expect.

231
00:14:21,030 --> 00:14:26,460
Now I will say we are going to get a very small error when we go through the allotted flow but it's

232
00:14:26,460 --> 00:14:27,080
totally fine.

233
00:14:27,090 --> 00:14:29,720
It's an error that we can also fix that very easily as well.

234
00:14:29,760 --> 00:14:30,840
OK.

235
00:14:30,840 --> 00:14:36,480
What I really want to prove to you right now is that inside this app J.S. file we can just put on slash

236
00:14:36,500 --> 00:14:40,470
or slash Google and somehow get over to the auth flow.

237
00:14:40,470 --> 00:14:44,390
So to test this thing out a first change over to my terminal.

238
00:14:44,910 --> 00:14:47,020
I'm going to kill the running server.

239
00:14:47,760 --> 00:14:53,150
So the both exited and I'm going to start the server back up with NPM run death.

240
00:14:53,190 --> 00:14:59,690
So our front end server the reac stuff it does have live reload but it does not automatically reload

241
00:14:59,690 --> 00:15:02,570
the server when we change the package start dates on file.

242
00:15:02,810 --> 00:15:07,220
So usually when we change the re-act components or anything like that we will get the benefit of the

243
00:15:07,220 --> 00:15:08,120
live reload.

244
00:15:08,240 --> 00:15:12,250
But that is not the case with stuff that we change in Pakistan Jason.

245
00:15:12,840 --> 00:15:13,220
OK.

246
00:15:13,250 --> 00:15:15,460
So we got kicked back over to the browser.

247
00:15:15,720 --> 00:15:22,390
It looks like we're doing the refresh right now let's wait for it to just finish its thing still starting

248
00:15:22,400 --> 00:15:27,770
the development server Well while that's loading up I'll give you a little bit of a preview when everything

249
00:15:27,770 --> 00:15:31,970
looks back up and we hover over the little link right here.

250
00:15:32,010 --> 00:15:37,970
We're going to notice that at the very bottom right is still going to display a domain of local host

251
00:15:38,070 --> 00:15:41,360
3000 slash Auth. slash Google.

252
00:15:41,360 --> 00:15:44,460
And so you might be saying they're thinking like as steve.

253
00:15:44,480 --> 00:15:46,600
You sure this stuff is going to work.

254
00:15:46,600 --> 00:15:48,420
And I can say yes it's OK.

255
00:15:48,680 --> 00:15:51,440
So there's the reload I'm going to hover over the link.

256
00:15:51,440 --> 00:15:58,220
Notice how the bottom left it says localhost 3000 slash or slash Google you and I know that is not the

257
00:15:58,220 --> 00:16:02,890
address of our waterflow it is our local host 5000.

258
00:16:02,900 --> 00:16:03,710
So what the heck.

259
00:16:03,710 --> 00:16:04,070
Whatever.

260
00:16:04,070 --> 00:16:04,710
Let's try it.

261
00:16:04,730 --> 00:16:06,520
I'm going to click the link.

262
00:16:07,250 --> 00:16:09,760
Now when I do so we will get a error.

263
00:16:09,800 --> 00:16:13,020
So we've got another redirect you or I mismatch this is OK.

264
00:16:13,130 --> 00:16:14,420
We will fix this.

265
00:16:14,420 --> 00:16:22,070
But what is way more important and way more relevant is the fact that we got into our lava flow at all.

266
00:16:22,070 --> 00:16:23,550
We got into the lava flow.

267
00:16:23,630 --> 00:16:31,520
That means that in all the different routes like API requests anchor tax whatever else getting static

268
00:16:31,550 --> 00:16:33,080
assets it doesn't matter.

269
00:16:33,080 --> 00:16:40,520
Everything that we do on the client side of our application can be easily forwarded along to our express

270
00:16:40,520 --> 00:16:41,090
server.

271
00:16:41,200 --> 00:16:44,490
And so we don't have to worry about what domain we're on or anything like that.

272
00:16:44,630 --> 00:16:51,710
We can just say try to access slash or slash Google and automatically get things redirected or forwarded

273
00:16:51,710 --> 00:16:56,200
onto localhost 5000 or wherever our API server is.

274
00:16:56,360 --> 00:16:57,160
OK.

275
00:16:57,770 --> 00:17:03,500
So at this point all I want you to really understand is that we kind of ran into a stumbling block where

276
00:17:03,500 --> 00:17:09,530
we had to manually define the domain inside of this anchor tag whenever we wanted to send a user over

277
00:17:09,530 --> 00:17:11,520
to our API server.

278
00:17:11,810 --> 00:17:17,990
That was a stumbling block because our root domain here for the API server was going to change between

279
00:17:17,990 --> 00:17:20,940
our development and our production environments.

280
00:17:20,960 --> 00:17:27,170
We did not want to have to put in any type of helpers or route routing stuff or anything like that inside

281
00:17:27,170 --> 00:17:33,220
of our code that had to dynamically figure out what domain to go to in between development and production.

282
00:17:33,230 --> 00:17:38,620
So rather than kind of deal with all that kind of stuff we just use a relative route right here.

283
00:17:38,630 --> 00:17:44,390
We then did a little bit of configuration inside the package not just on file and it appeared that everything

284
00:17:44,390 --> 00:17:47,130
just kind of magically worked for us.

285
00:17:47,940 --> 00:17:50,260
That's all I really want you to understand right now.

286
00:17:50,300 --> 00:17:55,970
So at this point we have clearly demonstrated that we can get the client server like this client re-act

287
00:17:55,970 --> 00:18:00,070
server to work together nicely with our express backend.

288
00:18:00,080 --> 00:18:05,960
So at this point we could we could very easily just like stop right here and say yeah that's it.

289
00:18:05,960 --> 00:18:07,570
Everything is working together.

290
00:18:08,570 --> 00:18:09,110
It's fine.

291
00:18:09,110 --> 00:18:10,010
Let's move on.

292
00:18:10,010 --> 00:18:12,110
Nothing else we're talking about here.

293
00:18:12,110 --> 00:18:17,600
But because we solely want to understand what is going on behind the scenes we're going to come back

294
00:18:17,600 --> 00:18:18,810
in the next section.

295
00:18:19,070 --> 00:18:24,970
We're going to fix up this little API our off you are a mismatch error.

296
00:18:25,100 --> 00:18:31,010
And then we will immediately do a quick talk just very brief about how this setting right here is working

297
00:18:31,340 --> 00:18:36,890
and then we will go into the real deep stuff and talk about why we picked the server architecture why

298
00:18:36,890 --> 00:18:40,420
this proxy thing works and all that kind of crazy stuff.

299
00:18:41,090 --> 00:18:42,160
Again I'm really excited.

300
00:18:42,320 --> 00:18:43,100
Thank you for being here.

301
00:18:43,100 --> 00:18:44,520
Thanks for listening to this.

302
00:18:44,540 --> 00:18:46,670
I love doing this stuff so let's take a break.

303
00:18:46,670 --> 00:18:50,900
We'll come back to the next section we're going to fix up the old stuff and then start talking about

304
00:18:50,900 --> 00:18:51,540
what's going on.

305
00:18:51,650 --> 00:18:53,330
So I'll see you in just a second.