1
00:00:00,510 --> 00:00:05,540
We've never really wrapped up billing on both the back end and the front end of our application.

2
00:00:05,580 --> 00:00:10,170
And I think that maybe right now before we go onto the next feature we should do another deployment

3
00:00:10,230 --> 00:00:14,910
of our application to Heroku just to get everything fresh up there and make sure that our deployments

4
00:00:14,940 --> 00:00:16,590
are very current.

5
00:00:16,680 --> 00:00:22,930
Now so far in this course we've deployed to Heroku together two times in both of those cases.

6
00:00:22,980 --> 00:00:28,780
We were really just concerned with deploying the our express server because in both those cases we had

7
00:00:28,800 --> 00:00:31,120
only put together the Express server.

8
00:00:31,170 --> 00:00:37,110
So in this last little bit of code of content that we've gone through we have added in a major architectural

9
00:00:37,110 --> 00:00:40,800
piece to our application which is the client side app.

10
00:00:40,800 --> 00:00:45,930
So the entire client side app has now been integrated into our overall application and we now need to

11
00:00:45,930 --> 00:00:49,450
think about how that kind of affects our deployment process.

12
00:00:49,470 --> 00:00:52,590
I'm going to tell you right now it is going to be a somewhat big change.

13
00:00:52,680 --> 00:00:56,970
So it's not super straightforward and we're going to talk about a couple of different topics that are

14
00:00:56,970 --> 00:01:01,680
going to help you understand some of the considerations that we need to have now that we have the Create

15
00:01:01,710 --> 00:01:04,870
re-act outside of our application in here as well.

16
00:01:04,890 --> 00:01:07,320
So there's two big topics we're going to discuss here.

17
00:01:07,380 --> 00:01:13,800
The First off is how our server works inside of production versus development and then we're also going

18
00:01:13,800 --> 00:01:18,630
to talk about the build process that we use on the client side of our application.

19
00:01:18,910 --> 00:01:23,290
So two big topics we're going to go into pretty good detail on both of them.

20
00:01:23,370 --> 00:01:28,620
So the first one again we're going to talk about how the Express server's behavior is going to slightly

21
00:01:28,620 --> 00:01:31,820
change between production and development.

22
00:01:31,830 --> 00:01:36,230
Now I want to first start off by showing you a diagram that we've looked at many times throughout this

23
00:01:36,240 --> 00:01:37,050
course.

24
00:01:37,140 --> 00:01:40,820
So we had said that this is how our application works in development mode.

25
00:01:41,070 --> 00:01:47,940
We had said that whenever a browser goes to localhost 3000 the browser is essentially saying hey I need

26
00:01:47,940 --> 00:01:52,310
stuff from the re-act side of the application like I need an HD mail file.

27
00:01:52,380 --> 00:01:59,100
I need some javascript I need some CSSA whatever else the Create re-act out server that exists inside

28
00:01:59,100 --> 00:02:03,930
of our client directory right now inside of our project would see that incoming request and would say

29
00:02:03,930 --> 00:02:04,930
Okay fantastic.

30
00:02:04,950 --> 00:02:06,050
I got you covered.

31
00:02:06,080 --> 00:02:07,700
Here is your HTL document.

32
00:02:07,700 --> 00:02:09,390
Here is the javascript files.

33
00:02:09,390 --> 00:02:10,550
There you go.

34
00:02:10,890 --> 00:02:15,840
The application then booted up and made some API requests and eventually that got handled by the Express

35
00:02:15,840 --> 00:02:16,380
API.

36
00:02:16,410 --> 00:02:18,210
You know we don't really care about that so much.

37
00:02:18,210 --> 00:02:20,670
I really want to focus on that first step for right now.

38
00:02:20,790 --> 00:02:27,750
The fact that the Create re-act up server was responsible for serving up all of these assets like the

39
00:02:27,750 --> 00:02:31,140
HMO files and the javascript files.

40
00:02:31,140 --> 00:02:35,350
So this is development mode and that's how our application has been working thus far.

41
00:02:35,700 --> 00:02:40,540
So now as we start to move into production things are going to change just a little bit.

42
00:02:40,860 --> 00:02:46,440
So now we're saying that when our application makes requests to Heroku app dot com which is what our

43
00:02:46,440 --> 00:02:53,490
domain is in production right now the kind of you know the assumed flow or how we kind of want things

44
00:02:53,490 --> 00:02:59,580
to work here is to make sure that when the browser reaches out to the server and says hey I need an

45
00:02:59,580 --> 00:03:05,580
aged female file and I need a javascript file we are hoping that the Express server is going to somehow

46
00:03:05,580 --> 00:03:12,390
respond with all of the relevant assets because that whole create react up layer has now disappeared.

47
00:03:12,390 --> 00:03:13,050
Its gone.

48
00:03:13,050 --> 00:03:14,400
It doesnt exist anymore.

49
00:03:14,610 --> 00:03:17,700
When we are working inside of the production world.

50
00:03:18,240 --> 00:03:18,630
OK.

51
00:03:18,690 --> 00:03:23,550
So this is kind of what our whole discussion is about how do we make sure that the Express server rights

52
00:03:23,550 --> 00:03:29,700
year understands that when its running in production mode it needs to be in charge of handling all of

53
00:03:29,700 --> 00:03:30,600
these assets.

54
00:03:30,600 --> 00:03:32,720
That's the big point of discussion.

55
00:03:32,730 --> 00:03:37,290
Number one that we're going to discuss now we are going to look at a couple of different diagrams very

56
00:03:37,290 --> 00:03:42,420
shortly that's going to help you understand that before we do I want to remind you of one very quick

57
00:03:42,420 --> 00:03:43,740
little thing.

58
00:03:43,800 --> 00:03:50,370
Now at some point in the course earlier we had very quickly ran a little build script inside of our

59
00:03:50,370 --> 00:03:51,650
client project.

60
00:03:51,840 --> 00:03:56,760
And so I really just want to kind of reiterate on what this public assets thing right here is you'll

61
00:03:56,760 --> 00:04:03,840
recall that at our command line if we change into our client directory and then run the script NPM run

62
00:04:03,840 --> 00:04:04,470
build.

63
00:04:04,740 --> 00:04:07,760
And this is a script that is implemented by Create re-act up.

64
00:04:07,800 --> 00:04:09,360
So we didn't put the script together.

65
00:04:09,390 --> 00:04:11,640
It came with our STARTING package.

66
00:04:11,640 --> 00:04:18,590
This will build a kind of production version of all of the assets inside the client side of our project.

67
00:04:18,630 --> 00:04:20,580
So you can see very cleanly or very plainly right.

68
00:04:20,580 --> 00:04:23,140
You're creating an optimized production build.

69
00:04:23,370 --> 00:04:28,920
So when we want to deploy at some point in time we have to run this command right here and make sure

70
00:04:28,920 --> 00:04:35,460
that we generate these kind of production assets that are really capable and the ones that we want to

71
00:04:35,460 --> 00:04:35,910
serve.

72
00:04:35,910 --> 00:04:39,920
When the app is in production so what reminds you about that.

73
00:04:39,930 --> 00:04:40,650
Now here's hoping.

74
00:04:40,660 --> 00:04:40,910
OK.

75
00:04:40,920 --> 00:04:42,300
So it's all done right there.

76
00:04:42,300 --> 00:04:47,700
So when we run that build command and run build it dumps these files.

77
00:04:47,700 --> 00:04:55,650
So this main javascript file in this main CSSA file right here into a directory of build slash static

78
00:04:55,740 --> 00:05:01,090
slash CSSA slash main and then essentially the same thing for the javascript file as well.

79
00:05:01,120 --> 00:05:06,270
And so if we try to find that inside of our project structure Here's our server directory.

80
00:05:06,510 --> 00:05:09,720
Here's the client folder Here's that build folder.

81
00:05:09,960 --> 00:05:10,760
Static.

82
00:05:10,790 --> 00:05:11,560
J.S..

83
00:05:11,580 --> 00:05:11,870
And.

84
00:05:11,880 --> 00:05:12,280
OK.

85
00:05:12,290 --> 00:05:16,460
There's the actual javascript file that we want to serve up to our users.

86
00:05:16,630 --> 00:05:22,390
And then you'll also notice inside of the static directory itself is our index.

87
00:05:22,410 --> 00:05:28,370
Each HTML file the one that we actually want to serve that is kind of the root h DML document.

88
00:05:28,380 --> 00:05:33,510
So again I just want to remind you that we have to run that NPM run build command and all the output

89
00:05:33,510 --> 00:05:37,940
from that is put into client slash build slash static.

90
00:05:38,000 --> 00:05:38,490
OK.

91
00:05:38,550 --> 00:05:44,370
So that might Let's look at a diagram that's going to help us understand why it's going to be kind of

92
00:05:44,370 --> 00:05:50,210
a challenge to get the express side of our application to serve up these public assets.

93
00:05:50,330 --> 00:05:53,690
OK so we're going to look at this diagram right here.

94
00:05:53,940 --> 00:05:58,170
So I'm going to zoom out for just a second so you can get a overall picture of what's going on here

95
00:05:58,650 --> 00:05:59,540
in this diagram.

96
00:05:59,550 --> 00:06:03,770
We have the browser at the bottom we've got the Express server right here.

97
00:06:03,930 --> 00:06:08,730
And then we can kind of imagine that up here are some actual production assets that we want to serve

98
00:06:08,730 --> 00:06:10,420
up to our users.

99
00:06:10,680 --> 00:06:15,600
So let's walk through this process and try to understand why going through all this and getting our

100
00:06:15,600 --> 00:06:21,660
express server to serve up these assets will be a challenge I'm going to zoom back in.

101
00:06:21,970 --> 00:06:29,060
There we go so right here I've got one request kind of diagrammed out and there's three requests on

102
00:06:29,060 --> 00:06:29,750
here in total.

103
00:06:29,780 --> 00:06:32,720
I want to focus on this first request right here.

104
00:06:33,080 --> 00:06:40,430
Now at this point we were just working on a request handler inside of our express application that would

105
00:06:40,430 --> 00:06:47,630
take a post request to API slash Strype express would say Oh you're trying to give me a stripe token

106
00:06:47,840 --> 00:06:49,640
it would process the request.

107
00:06:49,640 --> 00:06:50,740
We had some logic.

108
00:06:50,890 --> 00:06:55,380
And at the end of the day stra express said OK response complete.

109
00:06:55,400 --> 00:06:56,670
I'm going to send something back.

110
00:06:56,690 --> 00:07:03,500
So essentially if we made a post request to API slash Strype to our express server the Express server

111
00:07:03,500 --> 00:07:05,450
would say Oh fantastic I gotcha.

112
00:07:05,480 --> 00:07:06,440
We're good.

113
00:07:06,440 --> 00:07:11,030
I'm going to take care of this request and reply back to you like there's some very clear configuration

114
00:07:11,390 --> 00:07:16,160
inside of our express server that handles this route in particular.

115
00:07:16,340 --> 00:07:20,810
Now as we start to think about some of the demands that are going to be placed on our express server

116
00:07:20,810 --> 00:07:25,330
here very shortly life is going to get a little bit more complicated.

117
00:07:25,400 --> 00:07:33,720
So what happens if we make a get request to the path slash surveys inside of our application.

118
00:07:34,070 --> 00:07:38,600
You might say Stephen when you talk about slash surveys that's not a route that's defined on our express

119
00:07:38,600 --> 00:07:40,780
server and that's totally accurate.

120
00:07:40,790 --> 00:07:47,430
We have not defined a route handler called slash surveys on our express server.

121
00:07:47,870 --> 00:07:49,850
We have defined that route.

122
00:07:49,850 --> 00:07:52,520
So your local host 3000 right here slash surveys.

123
00:07:52,640 --> 00:07:58,920
This is a route that is defined inside of our re-act router configuration remember.

124
00:07:58,970 --> 00:08:09,370
So if we go into our client SIRC components apt Jr's file inside of here we had a bunch of configuration

125
00:08:09,670 --> 00:08:11,540
for re-act rhetoric here.

126
00:08:11,630 --> 00:08:16,980
And so here's a route of like Slash surveys and a route of surveys slash knew.

127
00:08:17,410 --> 00:08:23,770
And so it's really the assumption here is really that they're are going to be some routes that are being

128
00:08:23,770 --> 00:08:27,660
handled by re-act router inside of our application.

129
00:08:27,820 --> 00:08:33,930
And then this other set of routes that are being handled by the Express server.

130
00:08:34,450 --> 00:08:42,340
So what we have to do we have to instruct the express server that if it ever sees a request for some

131
00:08:42,340 --> 00:08:47,650
route that it doesn't actually know about we are going to make the assumption on the express server

132
00:08:47,980 --> 00:08:54,680
that whoever is making this request is probably trying to access a route that is defined by re-act router.

133
00:08:54,970 --> 00:08:59,210
So the express server is going to say Oh you're making a get request for surveys.

134
00:08:59,380 --> 00:09:01,330
I have no idea what that route is.

135
00:09:01,360 --> 00:09:05,230
I assume that you're trying to get a route that is defined by re-act router.

136
00:09:05,350 --> 00:09:08,110
So I'll tell you what you're looking for Slash surveys.

137
00:09:08,110 --> 00:09:09,700
The best thing I can do for you.

138
00:09:09,700 --> 00:09:16,370
Like the only thing I can really do is to hand you back the index HVM elth file.

139
00:09:16,390 --> 00:09:21,720
So the express ever hands back the index each G-mail file so goes back to the browser.

140
00:09:22,150 --> 00:09:29,200
Then inside of that index HTL file there is a script tag to load up our javascript bundle.

141
00:09:29,200 --> 00:09:36,280
So then the index file in the browser says hey if I'm going to work correctly like as the e-mail file

142
00:09:36,460 --> 00:09:40,640
I really need this javascript file is also also hosted by the server.

143
00:09:40,840 --> 00:09:44,940
And so then the browser says OK I guess I got to fetch this other javascript file.

144
00:09:45,130 --> 00:09:51,020
And so it goes back to the Express server asking for client build static J.S. maynt.

145
00:09:51,160 --> 00:09:58,090
J.S. again we have to instruct the Express server in some fashion that if it doesn't recognize this

146
00:09:58,090 --> 00:10:04,280
route it should forward it on and grab this javascript file right here and send it back to the browser.

147
00:10:04,330 --> 00:10:10,300
And so at that point in time the browser now has access to the HTL document to the react side of our

148
00:10:10,300 --> 00:10:16,240
application it flows both of them up inside the browser re-act router looks up or loads up excuse me

149
00:10:16,500 --> 00:10:23,930
react rodder sees the current you are l of something like Heroku out dot com slash surveys and the reactor

150
00:10:23,930 --> 00:10:31,080
router says OK based on this you are well I'm going to decide to show the dashboard component so I know

151
00:10:31,090 --> 00:10:35,990
that everything we just went through as I just described it was very quick and I said it very quickly

152
00:10:36,020 --> 00:10:38,870
and I didn't go into a lot of detail.

153
00:10:39,100 --> 00:10:44,230
The reason for that is that we are going to go through this whole set up process and then when we finally

154
00:10:44,230 --> 00:10:49,270
finish the whole deployment you will see this entire process in action and it'll start to make a lot

155
00:10:49,270 --> 00:10:53,220
more sense outside of like me just showing you diagrams all day.

156
00:10:53,740 --> 00:10:54,080
OK.

157
00:10:54,100 --> 00:10:58,930
So just one more time I want to clarify that the big challenge right now is getting the Express server

158
00:10:59,170 --> 00:11:03,470
to recognize that there are some routes that it is responsible for.

159
00:11:03,580 --> 00:11:06,540
There are some routes that it should say.

160
00:11:06,580 --> 00:11:07,720
I don't know what to do with this.

161
00:11:07,720 --> 00:11:11,300
I'm going to send you to our index page html document.

162
00:11:11,530 --> 00:11:19,330
And then there are even more routes that are trying to access very specific development Sumi very specific

163
00:11:19,390 --> 00:11:22,210
assets like the main JSA file.

164
00:11:22,300 --> 00:11:28,120
So there's these three type of types of routes that express now has to be aware of just to be really

165
00:11:28,120 --> 00:11:32,560
clear like there is a very big distinction between these two routes right here.

166
00:11:32,560 --> 00:11:38,920
One last surveys right here express has to understand that it's going to send back the HMO document

167
00:11:39,280 --> 00:11:44,140
and the other one express has to understand that don't send back the HMO document.

168
00:11:44,140 --> 00:11:50,610
This is a reference to an actual file so sent back this actual file rather than the HMO document.

169
00:11:51,100 --> 00:11:51,650
OK.

170
00:11:51,790 --> 00:11:54,460
So if this all seems kind of nasty right now.

171
00:11:54,550 --> 00:11:55,830
Yeah I probably should.

172
00:11:55,840 --> 00:11:57,970
This is some pretty darn confusing stuff.

173
00:11:57,970 --> 00:12:02,680
But again once we start to wire everything up I'm very confident it's going to start to make a lot more

174
00:12:02,680 --> 00:12:03,740
sense.

175
00:12:03,760 --> 00:12:07,740
So now that we've kind of discussed what the problem is let's take a break.

176
00:12:07,750 --> 00:12:12,120
We're going to come back in the next section and we're going to out in some code to our express server

177
00:12:12,460 --> 00:12:17,920
to make it understand that there's these other routes that it needs to be aware of inside of our application.

178
00:12:17,920 --> 00:12:19,860
So I'll see you in just a minute.