1
00:00:00,690 --> 00:00:05,760
In the last section we spoke about how we want to only use relative links throughout everything on our

2
00:00:05,760 --> 00:00:11,850
re-act front end but somehow have all those links magically for requests over to our express server.

3
00:00:12,180 --> 00:00:17,730
Remember that part of the real issue here is the fact that if you only use a relative link the browser

4
00:00:17,730 --> 00:00:24,240
will automatically append on or excuse me prepared on the current domain to the very front of the link.

5
00:00:24,300 --> 00:00:30,090
And right now for us in the development world for our re-act server that is localhost 3000 which is

6
00:00:30,090 --> 00:00:34,470
clearly not our actual back and server at localhost 5000.

7
00:00:34,470 --> 00:00:37,710
So we fix that up by adding this little proxy thing right here.

8
00:00:37,710 --> 00:00:39,740
We'll talk about what this is in just a second.

9
00:00:39,810 --> 00:00:42,430
But before we do I want to flip back over to the browser.

10
00:00:42,450 --> 00:00:45,960
Remember that we had gotten that redirect you or I mismatch over here.

11
00:00:45,960 --> 00:00:51,360
So Google thinks that we're trying to go back to localhost 3 0 0 0 0 and slash off slash school slash

12
00:00:51,360 --> 00:00:52,040
callback.

13
00:00:52,200 --> 00:00:57,150
And it says that's not an authorized off location or off you know visit.

14
00:00:57,210 --> 00:01:04,680
So we are going to open up our developer console and add this Lincoln as an authorized callback by adding

15
00:01:04,680 --> 00:01:05,360
this link in.

16
00:01:05,370 --> 00:01:08,650
It's just going to say only on our development side.

17
00:01:08,670 --> 00:01:09,510
And this is really key.

18
00:01:09,520 --> 00:01:14,940
We're only going to add in this additional route to the development side and we're going to say you

19
00:01:14,940 --> 00:01:17,050
know what we can go to local's 3000.

20
00:01:17,070 --> 00:01:22,080
We feel completely safe allowing that behavior because this is all stuff that's only in the development

21
00:01:22,080 --> 00:01:23,030
environment.

22
00:01:23,100 --> 00:01:30,150
So our back end or seeing our production configuration of our configuration we're not changing that.

23
00:01:30,360 --> 00:01:34,400
The production configuration is still going to be super secure.

24
00:01:34,410 --> 00:01:36,310
We're not making any changes on that side.

25
00:01:36,330 --> 00:01:40,020
We're just being a little bit more flexible inside of development.

26
00:01:40,020 --> 00:01:46,980
So to add on this additional redirect your I they give us this nice little link right here that we can

27
00:01:46,980 --> 00:01:50,620
copy paste so we'll copy that thing right there.

28
00:01:51,450 --> 00:01:52,980
I will open up a new tab.

29
00:01:53,370 --> 00:01:55,630
We'll paste and flip on over there.

30
00:01:55,920 --> 00:02:01,730
So they should automatically pull up our e-mail dash def project and specifically some of the redirects

31
00:02:01,740 --> 00:02:04,140
you or I permissions around it.

32
00:02:04,170 --> 00:02:05,820
Now this is taking a second to load up.

33
00:02:05,820 --> 00:02:11,070
So while that's going I'm going to flip back over to the error message and I'm going to copy the link

34
00:02:12,030 --> 00:02:16,440
that it said that we are trying to access because this is you or I that we want to wirelessed and say

35
00:02:16,440 --> 00:02:20,060
is completely valid if someone tries to go here.

36
00:02:20,160 --> 00:02:22,520
Now we'll go back over.

37
00:02:22,520 --> 00:02:25,700
It looks like my console's is kind of moving slowly right now.

38
00:02:25,710 --> 00:02:29,080
I'm going to scroll down to the authorized redirect your I.S..

39
00:02:29,250 --> 00:02:30,980
I'm going to say that hey you know what.

40
00:02:30,980 --> 00:02:32,220
It's totally fine.

41
00:02:32,220 --> 00:02:39,390
If a user tries to redirect back to localhost 3000 again this is only for dev completely OK that we

42
00:02:39,390 --> 00:02:41,850
are relaxing some of the restrictions here.

43
00:02:41,850 --> 00:02:47,500
So make that change and then we'll click save and just let it do its thing.

44
00:02:47,520 --> 00:02:54,060
Now remember that whenever we change a redirect you or I on Google as we just did right here or whenever

45
00:02:54,060 --> 00:03:00,180
we add a new one it takes a couple of minutes for that new authorized redirector II to actually percolate

46
00:03:00,240 --> 00:03:01,890
around Google's servers.

47
00:03:01,890 --> 00:03:03,530
It's not an instantaneous thing.

48
00:03:03,570 --> 00:03:09,050
It kind of takes a minute or two for a taxi like kick in and allow it to be permissible as a redirect.

49
00:03:09,120 --> 00:03:11,040
So we're not going to test this again just yet.

50
00:03:11,040 --> 00:03:12,970
We're going to talk about some other topic.

51
00:03:13,110 --> 00:03:17,460
Give it a minute or two and it we'll come back and this link out again or test the oil flow again and

52
00:03:17,460 --> 00:03:20,420
just make sure everything's working OK.

53
00:03:20,700 --> 00:03:24,900
So while that is kind of doing its thing and percolating.

54
00:03:24,900 --> 00:03:29,720
I want to talk a little bit more about that configuration that we added inside the package Jason.

55
00:03:29,940 --> 00:03:33,050
Specifically this little proxy thing right here.

56
00:03:33,120 --> 00:03:36,640
So we had said define some sort of proxy.

57
00:03:36,950 --> 00:03:41,510
And if we read that it's as plain-English we can really read it as being make a proxy.

58
00:03:41,670 --> 00:03:50,070
If anyone tries to visit the route slash off slash Google on our re-act server automatically for the

59
00:03:50,070 --> 00:03:57,690
request on to localhost five thousand and then it is just kind of implied by this rule that if we go

60
00:03:57,690 --> 00:04:04,010
to our slush Google we want to go to localhost 5000 slash off slash Google.

61
00:04:04,080 --> 00:04:07,230
So we don't have to actually specify or kind of like spell this out.

62
00:04:07,230 --> 00:04:13,410
In particular this proxy thing is going to automatically assume that when we are trying to go over to

63
00:04:13,410 --> 00:04:16,630
this other domain it's going to carry over the route for us.

64
00:04:16,710 --> 00:04:17,580
OK.

65
00:04:18,000 --> 00:04:23,120
So let's talk about what's really going on here and why this is really working.

66
00:04:23,190 --> 00:04:26,730
Now this is not really in-depth talk that I spoke about.

67
00:04:27,120 --> 00:04:29,780
This is just kind of a little bit of high level.

68
00:04:29,820 --> 00:04:32,070
Hey what does this kind of doing for us.

69
00:04:32,070 --> 00:04:32,780
OK.

70
00:04:33,360 --> 00:04:36,290
So we're going to check out a diagram.

71
00:04:36,290 --> 00:04:42,180
So this is a diagram that really truly models what is going on with our server in the development mode.

72
00:04:42,210 --> 00:04:49,890
So in development like running on our local machine when we are running our application like our server

73
00:04:49,920 --> 00:04:56,280
for the re-act side and our server for the express application on our local machine we can imagine that

74
00:04:56,280 --> 00:04:59,190
there's kind of like these two distinct layers.

75
00:04:59,520 --> 00:05:07,680
Side of our application inside of our browser whenever we go to localhost 3000 in access our create

76
00:05:07,680 --> 00:05:08,900
re-act up server.

77
00:05:09,090 --> 00:05:15,150
It's going to return to us that bundle don't just file that contains all of our development assets like

78
00:05:15,150 --> 00:05:19,350
the re-act library all the different components all that kind of good stuff.

79
00:05:19,350 --> 00:05:26,100
And then any time that a reactor application needs any sort of data from our API or from our express

80
00:05:26,100 --> 00:05:35,100
application that request is going to go to there create re-act up server to a proxy that is automatically

81
00:05:35,100 --> 00:05:43,200
built in and included with create re-act up server that proxy is then going to take that request and

82
00:05:43,200 --> 00:05:45,960
forward it on to the Express API.

83
00:05:46,380 --> 00:05:51,960
And so that is exactly what we did right here with this little bit of configuration.

84
00:05:51,960 --> 00:05:56,240
We said hey proxy that is included with create re-act up.

85
00:05:56,430 --> 00:06:03,840
If anyone tries accessing slash slash Google on the re-act server right here automatically for that

86
00:06:03,840 --> 00:06:07,380
request onto localhost 5000 and that's it.

87
00:06:07,410 --> 00:06:09,500
That's pretty much the entire ballgame.

88
00:06:09,540 --> 00:06:15,000
So for any different API route that we need to get access to from the browser from the Riak side of

89
00:06:15,000 --> 00:06:21,270
our application we can make use of that proxy to automatically for the request on to the node or express

90
00:06:21,330 --> 00:06:22,180
API.

91
00:06:22,680 --> 00:06:24,970
And we can just put the route in.

92
00:06:25,050 --> 00:06:31,800
Everything is going to work magically now I said this was the development mode.

93
00:06:31,870 --> 00:06:36,910
So this is only for development and you might really notice that when we set up the proxy I used right

94
00:06:36,910 --> 00:06:39,210
here local host 5000.

95
00:06:39,220 --> 00:06:40,190
So you might be thinking.

96
00:06:40,210 --> 00:06:42,430
All right Stephen that's great.

97
00:06:42,430 --> 00:06:44,540
But what happens when we deploy the Roku.

98
00:06:44,710 --> 00:06:51,840
Does that mean we have to go back to the proxy and also set up what was it like by you whatever dot

99
00:06:51,910 --> 00:06:55,120
road to our dot com like what's going on here.

100
00:06:55,120 --> 00:06:56,380
Does this actually work out.

101
00:06:56,380 --> 00:06:58,130
Does everything actually fix itself.

102
00:06:58,180 --> 00:07:01,960
And the answer is yes it automatically does everything for us.

103
00:07:01,960 --> 00:07:03,470
We don't have to worry about it.

104
00:07:03,520 --> 00:07:11,680
And here is why in production this is super important in production to create re-act apps server does

105
00:07:11,680 --> 00:07:16,320
not even exist in production.

106
00:07:16,480 --> 00:07:25,270
When we deploy our out Trochu everything is going to change in production before we deploy our application.

107
00:07:25,510 --> 00:07:32,290
We're going to build our re-act project when we build our re-act project create re-act up is going to

108
00:07:32,290 --> 00:07:38,290
take all of the different javascript files all the different CSSA files everything inside of here.

109
00:07:38,440 --> 00:07:45,850
It's going to run web pack and Babel over all those files and then save a final production final build

110
00:07:45,910 --> 00:07:50,620
of our application into this public folder right here.

111
00:07:50,840 --> 00:07:57,650
Then whenever a user comes to our application running on Heroku we were only going to be running our

112
00:07:57,650 --> 00:08:03,860
known express API and anytime someone comes to our application we will just automatically send them

113
00:08:03,860 --> 00:08:11,840
back our h HTML file and the new Java the newly built javascript file that was just placed into that

114
00:08:12,500 --> 00:08:14,120
public folder right here.

115
00:08:14,420 --> 00:08:16,920
So I can even show you what this looks like in practice right.

116
00:08:17,000 --> 00:08:19,310
We can kind of test this out very easily.

117
00:08:19,310 --> 00:08:25,720
I can open up a new tab in my terminal and then change into the client directory.

118
00:08:26,000 --> 00:08:33,380
Then inside of here I'll run the command and then run build when I do this to create re-act app application

119
00:08:33,410 --> 00:08:40,530
is going to automatically create an optimized production build and then it will stuff it into our builds

120
00:08:40,580 --> 00:08:43,410
directory right here.

121
00:08:43,460 --> 00:08:47,590
So let's just give it a minute to do its thing when we get that finalized outputs.

122
00:08:47,690 --> 00:08:48,270
That is it.

123
00:08:48,290 --> 00:08:49,910
That's the entire re-act application.

124
00:08:49,910 --> 00:08:55,850
We no longer have any need whatsoever to run the Create re-act application at all because the only thing

125
00:08:55,850 --> 00:09:01,700
create racked up is really doing for us is giving us things like the live reload and some lynching's

126
00:09:01,700 --> 00:09:04,650
some air checking all that kind of good stuff.

127
00:09:04,880 --> 00:09:09,340
That's all the Create re-act out that server is doing and we don't need any that behavior in production.

128
00:09:09,680 --> 00:09:17,140
So now OK it looks like everything is completed if we change into our public or excuse me it's not the

129
00:09:17,150 --> 00:09:19,750
public directory my mistake it's the build directory right here.

130
00:09:19,760 --> 00:09:21,030
So here's the build directory.

131
00:09:21,200 --> 00:09:23,130
Here's our index HTL file.

132
00:09:23,240 --> 00:09:24,610
Here's the static folder.

133
00:09:24,680 --> 00:09:29,180
And here is our entire javascript application inside the japes folder.

134
00:09:29,210 --> 00:09:30,840
So maynt J.S. Right here.

135
00:09:30,860 --> 00:09:32,690
That's the entire application.

136
00:09:32,690 --> 00:09:38,540
So when we move into production we no longer have to run the Create react app server all we have to

137
00:09:38,540 --> 00:09:45,290
do is one time build our application commit this stuff deploy the application to Roku and then we leave

138
00:09:45,290 --> 00:09:50,010
it up to the Express server to serve all of these different javascript files.

139
00:09:50,090 --> 00:09:58,250
So that is why for all this proxy stuff that we set up we really only have to worry about making sure

140
00:09:58,250 --> 00:10:04,790
that we set the proxy for our development environment because they create racked up server doesn't even

141
00:10:04,790 --> 00:10:07,150
exist inside production.

142
00:10:07,220 --> 00:10:08,890
Now you might still be wondering.

143
00:10:08,920 --> 00:10:10,540
You might have this lingering doubt.

144
00:10:10,550 --> 00:10:15,500
You might be thinking Well Steven if you're telling me that the Create locked up server doesn't exist

145
00:10:15,500 --> 00:10:21,020
in production how do we do all this like Route real route to rewriting or how do we figure out the domain

146
00:10:21,020 --> 00:10:22,120
and production.

147
00:10:22,130 --> 00:10:24,440
Well remember that's the whole key.

148
00:10:24,440 --> 00:10:30,320
That's the reason everything works out so well when we just use the relative route when we use relative

149
00:10:30,320 --> 00:10:36,620
routes throughout our application the browser will automatically prepend on the current domain to this

150
00:10:36,620 --> 00:10:37,550
address right here.

151
00:10:37,550 --> 00:10:45,170
So in development when we access our create re-act up server at local host 3000 the browser is going

152
00:10:45,170 --> 00:10:49,010
to think that this link wants to take us to localhost 3000.

153
00:10:49,190 --> 00:10:55,010
And that's why we need that this proxy right here so that we will automatically take that request to

154
00:10:55,010 --> 00:10:59,330
look lose 3000 and forwarded on to our express server at 5000.

155
00:10:59,480 --> 00:11:07,480
But in production when our application loads up the browser sees that we are at Bayu dot Heroku out

156
00:11:07,470 --> 00:11:08,730
dot com or whatever.

157
00:11:08,990 --> 00:11:16,340
And so at that point in time in production this link right here will automatically turn into bayou or

158
00:11:16,340 --> 00:11:21,330
whatever it is and whatever your application name is by you dot Heroku app dot com.

159
00:11:21,350 --> 00:11:23,350
That's the beauty of all this stuff.

160
00:11:23,480 --> 00:11:29,230
It all just works so perfectly between development and production.

161
00:11:29,550 --> 00:11:31,120
So that's entirety.

162
00:11:31,770 --> 00:11:32,120
OK.

163
00:11:32,240 --> 00:11:35,310
So just one more time because that last point is like the real clincher.

164
00:11:35,360 --> 00:11:40,950
Remember the entire idea behind the proxy right here is to rewrite requests from localhost 3000 slash

165
00:11:40,950 --> 00:11:44,410
or slash Google to localised 5000.

166
00:11:44,780 --> 00:11:50,540
We have to do that because in our development world we are running the two servers we've got to create

167
00:11:50,540 --> 00:11:54,430
re-act out server and we've got to know Jesus server on the backend.

168
00:11:54,620 --> 00:11:59,650
So any API request from the browser has to be proxied over to the Express API.

169
00:11:59,870 --> 00:12:05,090
But when we deploy our application we no longer make use of create re-act up at all.

170
00:12:05,090 --> 00:12:07,330
Create re-act app exists only.

171
00:12:07,370 --> 00:12:08,240
So purpose.

172
00:12:08,240 --> 00:12:14,220
No other reason besides this to give us a good development experience and help us make good re-act apps.

173
00:12:14,420 --> 00:12:17,510
So in production we no longer use this server at all.

174
00:12:17,510 --> 00:12:19,630
It completely just disappears.

175
00:12:19,880 --> 00:12:25,490
So right before we deploy our app we're going to use create re-act out to build a production finalized

176
00:12:25,490 --> 00:12:30,350
version of our re-act application and then when we actually go out to her Roku and serve everything

177
00:12:30,350 --> 00:12:36,320
up we have the no new Express API which will automatically serve all those public assets like the bundle

178
00:12:36,320 --> 00:12:37,010
J file.

179
00:12:37,010 --> 00:12:38,070
It's actually called mange.

180
00:12:38,090 --> 00:12:39,530
Yes but you get the idea.

181
00:12:39,620 --> 00:12:41,330
They'll serve the main dodgiest file.

182
00:12:41,420 --> 00:12:45,230
It'll serve our route a file all the CSSA all that kind of stuff.

183
00:12:45,320 --> 00:12:52,350
And in development when all that re-act out stuff loads up inside the browser there's no longer a local

184
00:12:52,350 --> 00:12:59,590
who's 3000 there's no longer our local host 5000 it's all being executed on her app dot com.

185
00:12:59,610 --> 00:13:04,800
So all of these relative links that we have inside of our application automatically get rewritten by

186
00:13:04,800 --> 00:13:12,240
the browser as Heroku app dot com slash Auth. slash Google or whatever other whatever other API routes

187
00:13:12,240 --> 00:13:13,470
we have as well.

188
00:13:14,070 --> 00:13:14,890
OK.

189
00:13:15,450 --> 00:13:19,030
So at this point hopefully that all makes sense.

190
00:13:19,400 --> 00:13:21,780
Ignacio right now hopefully that will make sense.

191
00:13:21,780 --> 00:13:27,300
So this is the point at which I feel like hopefully you're getting a sense that the server architecture

192
00:13:27,300 --> 00:13:32,250
that we picked here of having like to create re-act up and then the Express server right behind it.

193
00:13:32,250 --> 00:13:34,410
Hopefully it feels like that all makes a lot of sense.

194
00:13:34,410 --> 00:13:39,930
I'm hoping that's the case right now because to me this stuff all seems to be working like amazingly

195
00:13:39,930 --> 00:13:45,060
beautifully in development we get create re-act up and all the benefits it brings but we don't have

196
00:13:45,060 --> 00:13:48,680
to worry about any crazy configuration of routes or anything like that.

197
00:13:48,900 --> 00:13:53,880
And then when we go to production to create re-act up server falls away and everything is kind of magically

198
00:13:53,880 --> 00:13:55,400
works.

199
00:13:55,410 --> 00:14:00,750
So at this point hopefully I've convinced you that our setup is completely reasonable and makes a lot

200
00:14:00,750 --> 00:14:04,160
of sense and generally just works OK.

201
00:14:04,980 --> 00:14:07,340
Now we're going to take a break.

202
00:14:07,530 --> 00:14:13,200
When we come back in the next section we're going to kind of jump into the behind the scenes stuff where

203
00:14:13,200 --> 00:14:16,590
we figure out how some this stuff really works.

204
00:14:16,590 --> 00:14:21,510
And that is the very scary part that's the Partridge said you're going to say Steven Like why did we

205
00:14:21,510 --> 00:14:22,560
pick this stupid server.

206
00:14:22,560 --> 00:14:23,790
What's going on here.

207
00:14:23,850 --> 00:14:24,960
So let's take a break.

208
00:14:24,960 --> 00:14:26,140
We're going to come back next.

209
00:14:26,140 --> 00:14:30,320
Our next section will do it talk and maybe it's not as scary as I think.

210
00:14:30,330 --> 00:14:30,990
You know whatever.

211
00:14:31,080 --> 00:14:33,940
So let's go into the next section and get to it.

212
00:14:33,940 --> 00:14:35,380
So I'll see you in just a second.