1
00:00:00,350 --> 00:00:05,850
Know the section we had a long discussion about the use of our express server in the production environment

2
00:00:06,150 --> 00:00:08,980
without create react up sitting in front of it.

3
00:00:09,000 --> 00:00:14,700
We're now going to set up our express server to make sure that it understands that there are some routes

4
00:00:14,700 --> 00:00:19,320
that it will be asked for that it might not have a specific role handler for.

5
00:00:19,770 --> 00:00:27,180
So we're going to change on over to our code editor I'm going to find the very root index.

6
00:00:27,210 --> 00:00:30,180
J.S. file inside of my root project directory.

7
00:00:30,480 --> 00:00:32,510
So here's the index not file.

8
00:00:32,710 --> 00:00:38,850
Here's all of our initial server setup and I'm going to scroll down towards the bottom where all of

9
00:00:38,850 --> 00:00:40,840
our other routing logic is.

10
00:00:40,910 --> 00:00:42,630
Here right here.

11
00:00:42,630 --> 00:00:42,830
OK.

12
00:00:42,840 --> 00:00:47,580
So right underneath this we're going to add in a little bit of configuration to make sure that express

13
00:00:47,910 --> 00:00:53,070
essentially behaves correctly when it is in the production environment.

14
00:00:53,070 --> 00:00:58,080
Now the code that we're going to add here is only supposed to be re on inside of production or when

15
00:00:58,080 --> 00:01:00,270
our application is at Heroku.

16
00:01:00,540 --> 00:01:06,990
So to ensure that it only runs this code when it's at Hoku we'll add in a simple if statement will say

17
00:01:06,990 --> 00:01:17,850
if process got EMV dot node underscore EMV is equal to production then run the code inside of here.

18
00:01:17,910 --> 00:01:23,150
So you'll recall that this is an environment variable right here that is automatically set by Heroku.

19
00:01:23,460 --> 00:01:28,780
So if we are on Heroku noti underscore D-NV must be the string production.

20
00:01:28,860 --> 00:01:34,080
And so the code inside if you're only going to run if we're in production.

21
00:01:34,620 --> 00:01:40,380
Now inside the actual statement there's two little things that we have to do to make sure that express

22
00:01:40,440 --> 00:01:43,110
handles everything in production correctly.

23
00:01:43,470 --> 00:01:50,010
The first line of code that we're going to add right here is going to be making sure that express will

24
00:01:50,010 --> 00:02:01,740
serve up production assets like our main dot J.S. file or main dots SS file.

25
00:02:02,340 --> 00:02:05,480
So it's going to be the first little piece of configuration we do.

26
00:02:05,500 --> 00:02:09,370
The second piece is going to be a little bit more crazy.

27
00:02:09,430 --> 00:02:20,170
This other one is going to say Express will serve up the index dot h to mail file if it doesn't recognize

28
00:02:20,170 --> 00:02:22,080
the route.

29
00:02:22,090 --> 00:02:26,320
Now these two right here probably seem like they might be somewhat closer related.

30
00:02:26,350 --> 00:02:32,230
So this first piece of configuration right here is meant to handle the case that the browser is asking

31
00:02:32,230 --> 00:02:38,920
for some production asset like some javascript file or some CSSA file that is hosted at a very particular

32
00:02:38,920 --> 00:02:45,330
route on inside of our express server like inside of our project directory.

33
00:02:45,340 --> 00:02:51,910
So in this case I've got a note right here of client sosh build static G-S main that references a very

34
00:02:51,910 --> 00:02:58,020
particular file inside a particular directory inside of our express project.

35
00:02:58,030 --> 00:03:02,430
So here's client built static J.S. maned.

36
00:03:02,470 --> 00:03:03,640
J.S. Right here.

37
00:03:04,060 --> 00:03:10,570
And yes I know it's got all the numbers on there don't worry about those for right now OK.

38
00:03:10,840 --> 00:03:14,920
So we'll take care of this first piece first and then we'll talk about how it's different from the second

39
00:03:14,920 --> 00:03:16,000
one over here.

40
00:03:16,000 --> 00:03:23,920
So for this first piece of configuration we'll say apt use Express dot static and we'll pass it a string

41
00:03:23,950 --> 00:03:26,710
of client slash build.

42
00:03:27,210 --> 00:03:27,940
OK.

43
00:03:28,210 --> 00:03:36,040
So this first line right here says if any get request comes in for some routes or some file or absolutely

44
00:03:36,220 --> 00:03:41,430
anything to our application and we do not understand what it's looking for.

45
00:03:41,590 --> 00:03:47,500
Like if we do not already have a route handler set up for this thing then look into the client slash

46
00:03:47,500 --> 00:03:54,160
build directory and try to see if there's some file inside of there that matches up with what this request

47
00:03:54,160 --> 00:03:55,190
is looking for.

48
00:03:55,480 --> 00:04:03,070
So in other words if someone comes looking for client build static J.S. main look into client slash

49
00:04:03,070 --> 00:04:10,100
build and see if there is a file at static G-S main and if there is go ahead and respond with that.

50
00:04:10,120 --> 00:04:13,930
So that's what this first piece of configuration is doing right here.

51
00:04:13,960 --> 00:04:15,700
Now onto the second piece.

52
00:04:15,700 --> 00:04:19,130
Now the code around this one is going to be a little bit more intense.

53
00:04:19,180 --> 00:04:22,530
So just bear with me as we go through this after we write the code.

54
00:04:22,600 --> 00:04:24,860
We'll then talk about exactly what it's doing.

55
00:04:25,030 --> 00:04:32,530
We're first going to require in a module called Path and then immediately after that we'll say apt get

56
00:04:33,280 --> 00:04:40,450
inside the string or here we're going to put a star like so then we're going to add in a callback or

57
00:04:40,450 --> 00:04:51,630
a arrow function say rock rez it inside the body the function will say rez dots and file path don't

58
00:04:51,700 --> 00:04:52,500
resolve

59
00:04:54,760 --> 00:04:56,280
underscore underscore.

60
00:04:56,360 --> 00:04:57,870
This is two separate underscores.

61
00:04:57,880 --> 00:05:02,550
Write your name and then we're going to pass in a couple of different strings.

62
00:05:02,680 --> 00:05:09,730
Client build and then index dot HMO and I'm going to zoom out for just a minute so you can see the whole

63
00:05:09,730 --> 00:05:12,160
line.

64
00:05:12,160 --> 00:05:14,910
OK so what's going on with this one.

65
00:05:15,060 --> 00:05:16,440
Of course you can read the comment right.

66
00:05:16,440 --> 00:05:24,030
You're essentially this says if someone makes a request for a route that we do not understand just serve

67
00:05:24,030 --> 00:05:25,660
it up the HMO document.

68
00:05:25,770 --> 00:05:32,250
If we don't know what this route is we will just assume that the react route or side of our application

69
00:05:32,280 --> 00:05:33,910
is responsible for this route.

70
00:05:33,930 --> 00:05:38,110
So we're just going to kick the user over to our client side application.

71
00:05:38,130 --> 00:05:42,810
Now your very first question here might be well Stephen if we've got this thing that says if you don't

72
00:05:42,900 --> 00:05:45,630
understand the route give them the HMO file.

73
00:05:45,630 --> 00:05:51,240
How are we going to make sure that express does doesn't do this instead of giving whoever making the

74
00:05:51,240 --> 00:05:54,260
request some file that they are actually asking for it.

75
00:05:54,330 --> 00:05:58,580
And my answer to that is that it's all about the order of operations here.

76
00:05:58,590 --> 00:06:07,050
So when a request comes into express express we'll first check to see if there is some specific file

77
00:06:07,170 --> 00:06:10,060
that matches up with what that request is looking for.

78
00:06:10,380 --> 00:06:17,010
If there is it's going to answer the request with this line right here if there's not express will then

79
00:06:17,040 --> 00:06:22,890
continue on down and we'll find this next route handler which we can essentially think of as the absolute

80
00:06:22,890 --> 00:06:25,140
catchall inside of our application.

81
00:06:25,440 --> 00:06:31,530
This route right here this code right here this line basically says if we have nothing inside of our

82
00:06:31,530 --> 00:06:38,230
author out file and nothing inside of our billing routes file and there's no file inside of our client

83
00:06:38,230 --> 00:06:41,890
slash Bill directory that matches up with what this request is looking for.

84
00:06:42,010 --> 00:06:42,920
Well then fine.

85
00:06:42,930 --> 00:06:45,420
We've exhausted all possibilities.

86
00:06:45,840 --> 00:06:46,350
Fine.

87
00:06:46,410 --> 00:06:49,180
Just give them back the index HMO file.

88
00:06:49,350 --> 00:06:52,310
So this is essentially the catchall case right here.

89
00:06:52,410 --> 00:06:58,020
That assumes that all previous attempts to match up the incoming request with some actual resource has

90
00:06:58,020 --> 00:07:00,360
failed.

91
00:07:00,360 --> 00:07:00,760
OK.

92
00:07:00,840 --> 00:07:07,470
So this is kind of like part 1 of handling some of the changes we have to do for getting our application

93
00:07:07,470 --> 00:07:09,260
to work on Heroku.

94
00:07:09,300 --> 00:07:12,860
So just one last time I know that we've kind of covered this like three times now.

95
00:07:12,870 --> 00:07:18,600
But remember the entire idea here is that there are some routes that can be answered or some requests

96
00:07:18,600 --> 00:07:24,540
that can be answered by the Express server some that are looking for very specific files that exist

97
00:07:24,540 --> 00:07:29,710
inside of our client build directory and then there are some that have to be answered by the index studies

98
00:07:29,720 --> 00:07:35,400
small file because the assumption is that re-act router knows what to do with this route.

99
00:07:35,400 --> 00:07:38,510
OK so we've now done kind of part one of configuration here.

100
00:07:38,550 --> 00:07:40,670
We're going to take a break right now at this point.

101
00:07:40,680 --> 00:07:46,410
I want to remind you that if this still seems like weird and confusing as soon as we deploy this to

102
00:07:46,480 --> 00:07:51,330
Heroku I am just really positive that as you kind of play around with this a little bit you're going

103
00:07:51,330 --> 00:07:56,310
to get a much better sense of what's going on here with those configuration.

104
00:07:56,310 --> 00:07:58,360
So at this point let's take a quick break.

105
00:07:58,380 --> 00:08:04,430
When we come back in the next section we're going to make sure that our client project is properly built.

106
00:08:04,470 --> 00:08:08,780
When ever we deploy to production so I'll see you in just a minute.