1
00:00:00,210 --> 00:00:06,450
All right, and once we're done with logout user as well as fresh warnings up next, I want to get our

2
00:00:06,750 --> 00:00:07,950
front end application.

3
00:00:08,250 --> 00:00:15,420
So the one that is living here in a client production ready and in Create React app where we need to

4
00:00:15,420 --> 00:00:19,050
do is run the command ampm on build.

5
00:00:19,860 --> 00:00:27,300
And in the process, we'll create a built folder, and inside of that folder we'll have a bunch of static

6
00:00:27,300 --> 00:00:35,310
assets and those static assets are going to be our production ready application and then we'll worry

7
00:00:35,610 --> 00:00:37,640
how we can serve it, use expression.

8
00:00:38,070 --> 00:00:40,140
But first, we need to create it.

9
00:00:40,680 --> 00:00:46,980
Now I'll purposely create a command in the script, in the package JSON in the server.

10
00:00:47,580 --> 00:00:53,400
So again, we're talking about Package Jason in the server, not on the client, but I do want to create

11
00:00:53,400 --> 00:01:01,550
a command that sets up that production ready application because we'll also use that command on her

12
00:01:01,560 --> 00:01:01,920
uncle.

13
00:01:02,190 --> 00:01:04,980
So at the moment, we don't see how we'll use it.

14
00:01:05,459 --> 00:01:10,080
But since I know that we're going to do that, that's where I'll set up the separate command.

15
00:01:10,380 --> 00:01:11,880
So please do that as well.

16
00:01:12,540 --> 00:01:17,790
And first, we want to navigate to package JSON, and we just need to come up with the name.

17
00:01:18,070 --> 00:01:23,650
So in my case, I'm going to go here with build and let's call this client.

18
00:01:24,030 --> 00:01:28,110
So let's set up the quotation marks, let's say build client.

19
00:01:28,560 --> 00:01:37,410
And first we want to do is navigate to the client folder and it's also right away run, ampm run and

20
00:01:37,410 --> 00:01:37,860
then build.

21
00:01:37,960 --> 00:01:40,470
Let's add a comma, so everything is correct.

22
00:01:40,830 --> 00:01:45,390
Let's stop our server right now, and I'm going to clear the console.

23
00:01:45,750 --> 00:01:48,150
Then I want to go with npm run.

24
00:01:48,630 --> 00:01:50,910
And now let's run the build client.

25
00:01:50,910 --> 00:01:59,010
So build and then client and once create React app is done building on production ready application.

26
00:01:59,490 --> 00:02:06,780
Like I said in the client or have a build folder with a bunch of static assets.

27
00:02:07,260 --> 00:02:11,700
And essentially, this is our production ready application.

28
00:02:12,120 --> 00:02:13,890
So that is the first step.

29
00:02:14,370 --> 00:02:15,430
Now what is the next step?

30
00:02:15,480 --> 00:02:24,780
Well, we need to remember that in Express, we actually have the middleware that serves those static

31
00:02:24,780 --> 00:02:32,580
assets and the way we use that middleware regard app eight years and then we invoke express static and

32
00:02:32,580 --> 00:02:33,390
what we want to do.

33
00:02:33,570 --> 00:02:37,980
We want to point to where the Build folder is located.

34
00:02:38,250 --> 00:02:43,770
So normally when we were just setting up the API, what we did, we created somewhere here on the server.

35
00:02:44,340 --> 00:02:46,590
The folder by the name of public.

36
00:02:46,890 --> 00:02:52,500
And then we just served it, whether it was just as follows the image files and whatever.

37
00:02:52,770 --> 00:02:57,690
In this case, we're serving not production ready application.

38
00:02:57,720 --> 00:03:00,840
Our React application from the client folder.

39
00:03:01,690 --> 00:03:08,200
And then we'll worry about the routing, so we're still have one more step right now since we're using

40
00:03:08,200 --> 00:03:09,610
ES6 modules.

41
00:03:10,560 --> 00:03:17,310
It's a little bit tricky to get the name, because if you remember with passport resolve, we actually

42
00:03:17,310 --> 00:03:19,170
need it to showcase that their name.

43
00:03:19,380 --> 00:03:27,270
So current directory for the server since we need to use the absolute path since we also use that one

44
00:03:27,480 --> 00:03:28,560
somewhere on a server.

45
00:03:29,230 --> 00:03:35,220
And the tricky part here is that again, we're using six modules, so it's not as straightforward as

46
00:03:35,220 --> 00:03:39,030
what common dress where their name was available by default.

47
00:03:39,540 --> 00:03:44,820
In this case, we will need to do a little bit of acrobatics where we want to get the burning, want

48
00:03:44,820 --> 00:03:46,920
to get the file URL to path.

49
00:03:47,250 --> 00:03:52,800
So notice both of the modules and URL, and then we want to invoke Durning.

50
00:03:53,340 --> 00:03:54,510
File your old path.

51
00:03:54,840 --> 00:04:00,730
And remember, I said that when it comes to this six modules in node, there's always this important

52
00:04:00,730 --> 00:04:01,560
matter and URL.

53
00:04:01,830 --> 00:04:03,210
Once you have something tricky.

54
00:04:03,330 --> 00:04:10,800
So this is again that case, and I got this whole deal is because we are using a six modules and their

55
00:04:10,800 --> 00:04:13,710
name is not accessible by default.

56
00:04:14,100 --> 00:04:18,750
And we also import the path because we want to use it here in the express stack.

57
00:04:19,050 --> 00:04:20,250
So let's get cracking.

58
00:04:20,730 --> 00:04:23,550
We have our production ready application.

59
00:04:23,760 --> 00:04:24,480
We build one.

60
00:04:24,540 --> 00:04:25,350
Ready to go.

61
00:04:25,830 --> 00:04:26,700
So that's done.

62
00:04:27,060 --> 00:04:34,230
So now what I want to do is go with all of these imports and then let's copy and paste them in the server.

63
00:04:34,710 --> 00:04:37,860
So let's go back where we have the server address.

64
00:04:38,160 --> 00:04:39,360
Let's copy and paste.

65
00:04:39,570 --> 00:04:46,200
And once I have all my imports in place, let's keep on scrolling right after the express JSON.

66
00:04:46,560 --> 00:04:49,140
Let's go here with app that use.

67
00:04:49,800 --> 00:04:53,400
Let's invoke it and we'll go with express static.

68
00:04:53,760 --> 00:04:56,520
And then let's go with path dot resolve.

69
00:04:57,300 --> 00:05:03,210
And then let's bask in the underscore underscore their name, which we haven't set up yet, so we still

70
00:05:03,210 --> 00:05:05,310
need to add those lines of code.

71
00:05:05,640 --> 00:05:11,070
So let's add a comma here, and we'll go here with client and then build.

72
00:05:11,370 --> 00:05:16,670
Basically, this is where our static assets are going to be located.

73
00:05:16,710 --> 00:05:21,720
And if you remember these static assets, what that means is that they are publicly available.

74
00:05:21,960 --> 00:05:27,300
So once we open up the application, I'll be able to showcase, for example, that if we navigate to

75
00:05:27,300 --> 00:05:30,960
localhost 5000 and then forward slash favorite, can I call?

76
00:05:31,290 --> 00:05:32,490
I'll have access ActionScript.

77
00:05:32,550 --> 00:05:32,960
Why?

78
00:05:32,980 --> 00:05:35,100
Because that is my public asset.

79
00:05:35,490 --> 00:05:39,630
Now we're not done because like I said, we still need to do two things.

80
00:05:39,630 --> 00:05:42,540
We still need to set up the routes being at.

81
00:05:43,170 --> 00:05:48,150
And we also want to get that Bernie, because by default, it's not going to be available.

82
00:05:48,570 --> 00:05:49,280
So you know what?

83
00:05:49,290 --> 00:05:54,450
Let me move this sucker up because I'll set up their name right above here anyway.

84
00:05:55,290 --> 00:05:56,520
Let me go back to the read.

85
00:05:56,760 --> 00:06:02,950
Now, I'm not going to retype this because again, this is just a workaround to get that their name.

86
00:06:02,970 --> 00:06:04,680
So let me go back to the server.

87
00:06:05,100 --> 00:06:06,060
Let me set it up.

88
00:06:06,330 --> 00:06:11,090
And now we have the third name, so everything should be correct now.

89
00:06:11,100 --> 00:06:11,710
And here it looks.

90
00:06:11,710 --> 00:06:13,460
They have three on this course.

91
00:06:13,660 --> 00:06:14,820
Now let me fix that one.

92
00:06:15,390 --> 00:06:22,500
And last thing that we want to do right after both of our API roots, we actually want to set up the

93
00:06:22,500 --> 00:06:31,130
get route and we want to say whatever is the URL, we want to direct the Gertrude's to the index.

94
00:06:31,450 --> 00:06:32,280
The amount why?

95
00:06:32,790 --> 00:06:39,150
Well, because in here in the client building, in the index, actually, you know, we have our React

96
00:06:39,150 --> 00:06:39,570
router.

97
00:06:39,840 --> 00:06:45,420
So what we need to understand is that right now, our React application is going to be the frontend

98
00:06:45,930 --> 00:06:47,040
for our server.

99
00:06:47,400 --> 00:06:54,990
So every route the route goes to our server, we want to pointed to the indexation email and from there,

100
00:06:55,290 --> 00:06:57,630
the React router will do its job.

101
00:06:58,170 --> 00:07:01,530
And the reason why we want to do that after about two years.

102
00:07:02,130 --> 00:07:05,250
Well, because we don't want to have any conflict.

103
00:07:05,700 --> 00:07:10,680
Again, we're talking about only the get roads that go to our application.

104
00:07:11,250 --> 00:07:19,850
But before we route them to indexation email, we want to check whether any of them are to the API auth

105
00:07:19,860 --> 00:07:21,420
or jobs if they are.

106
00:07:21,780 --> 00:07:24,420
Then, of course, we want to direct the user over there.

107
00:07:24,780 --> 00:07:26,700
So let's go here with app on them.

108
00:07:26,700 --> 00:07:32,320
Please keep in mind that, of course, we'll have access to these right from our front end application.

109
00:07:32,340 --> 00:07:33,450
Hopefully that makes sense.

110
00:07:33,840 --> 00:07:41,400
So let's go here and get I want to say that every guest wrote that will get again after we have tried

111
00:07:41,400 --> 00:07:41,940
these two.

112
00:07:42,570 --> 00:07:45,840
So once we have tried these two, let's just look for all to get out.

113
00:07:46,140 --> 00:07:51,510
And then let's around them to the client build and more specifically, indexation IMO.

114
00:07:51,870 --> 00:07:55,470
So let's go here with our callback function, say Rec.

115
00:07:56,450 --> 00:08:04,040
Rose Nunn said of the function, Let's go with arrest and then we have a special method send file.

116
00:08:04,430 --> 00:08:07,940
And now we're just want to provide the path to the indexation ammo.

117
00:08:08,480 --> 00:08:13,910
So any get out and get that message to them after we have tried reached you.

118
00:08:14,060 --> 00:08:15,650
Hopefully, that is clear.

119
00:08:15,950 --> 00:08:22,250
So let's say here path dot resolve and then let's pass them again that their name because remember when

120
00:08:22,250 --> 00:08:28,420
just set it up and man, let's look for words, climb forwards, build.

121
00:08:28,890 --> 00:08:32,030
And then we also want to do the same thing with indexation their money.

122
00:08:32,090 --> 00:08:33,799
So now we have the correct path.

123
00:08:34,400 --> 00:08:38,480
Now keep in mind that, you know, package Jason.

124
00:08:38,870 --> 00:08:46,290
The moment with npm start we run concurrently, which spins up what spins up our server.

125
00:08:46,790 --> 00:08:48,650
And it also spins up our client.

126
00:08:49,070 --> 00:08:54,500
Now that's not what we want anymore, because we already created our production ready application over

127
00:08:54,500 --> 00:08:55,880
here in the build one.

128
00:08:56,150 --> 00:09:00,710
So instead, what we want to do, we want to run node and then the server.

129
00:09:00,860 --> 00:09:03,800
So I don't want to spin up the Create React app.

130
00:09:04,070 --> 00:09:06,110
I just want to spin up the server.

131
00:09:06,500 --> 00:09:11,720
And yes, that's the same thing we'll do on Heroku in a few videos.

132
00:09:11,960 --> 00:09:14,360
We're not going to invoke concurrently.

133
00:09:14,780 --> 00:09:18,540
We'll invoke the node and whatever is our phone.

134
00:09:18,710 --> 00:09:20,830
So in my case, that is server jass.

135
00:09:21,200 --> 00:09:26,450
So let me clear everything here, and let's go with node and that server.

136
00:09:26,880 --> 00:09:32,330
And in this case, we're not looking for localhost three thousand.

137
00:09:33,280 --> 00:09:36,490
Please keep that in mind if we go to your local host 3000.

138
00:09:36,910 --> 00:09:41,470
Actually, there's going to be nothing there because we're not the running the Create React app.

139
00:09:41,770 --> 00:09:46,970
Instead, what we want to do, we want to go with local host and then 5000.

140
00:09:47,830 --> 00:09:48,370
Check it out.

141
00:09:48,740 --> 00:09:53,260
And this is our application and everything works as it should.

142
00:09:53,710 --> 00:09:55,900
So let me go here quickly.

143
00:09:56,290 --> 00:09:58,120
Our game just showcases that.

144
00:09:58,630 --> 00:10:06,310
And again, I know I keep repeating this, but hopefully it is clear that using Create React app, we

145
00:10:06,310 --> 00:10:13,390
created our front and application and that is our public assets right now.

146
00:10:14,050 --> 00:10:18,820
So we use express static to serve them as our public assets.

147
00:10:19,360 --> 00:10:23,800
And if you remember, I said that I'll showcase that by accessing the favorite coin, which is actually

148
00:10:23,800 --> 00:10:24,460
in the build one.

149
00:10:24,820 --> 00:10:32,830
So if we go again with local 5000, whereas the server and if we go to favicon, I call one of, you

150
00:10:32,830 --> 00:10:35,830
know, actually this is my favorite gone.

151
00:10:36,340 --> 00:10:41,320
And with this in place now, I can start setting up these security packages.