1
00:00:00,140 --> 00:00:00,590
All right.

2
00:00:00,590 --> 00:00:03,560
And actually, at this point, we're done with the project.

3
00:00:03,560 --> 00:00:04,090
Yes.

4
00:00:04,100 --> 00:00:06,830
Eventually we will add the React query.

5
00:00:06,830 --> 00:00:10,360
But technically, at least in my opinion, that's an extra.

6
00:00:10,370 --> 00:00:13,490
So essentially we're done with the main project.

7
00:00:13,490 --> 00:00:20,720
And now, of course, we just want to deploy it now before we deploy the project, we do need to complete

8
00:00:20,750 --> 00:00:26,510
a few steps and for starters, I want to navigate to a login and register and I just want to remove

9
00:00:26,510 --> 00:00:27,710
those default values.

10
00:00:27,710 --> 00:00:32,840
So yes, it was useful while we were developing, but there's really no need once we push our project

11
00:00:32,840 --> 00:00:33,940
to production.

12
00:00:33,950 --> 00:00:36,170
So let's navigate to the pages.

13
00:00:36,870 --> 00:00:38,700
For starters, let's look for register.

14
00:00:39,280 --> 00:00:39,790
You know what?

15
00:00:39,790 --> 00:00:43,570
Let me close all of these first and then one by one.

16
00:00:44,420 --> 00:00:48,440
So we're now going to add default value of John.

17
00:00:49,570 --> 00:00:50,680
Of this one.

18
00:00:52,450 --> 00:00:54,070
I'll also remove this one.

19
00:00:54,940 --> 00:00:56,500
And this one as well.

20
00:00:56,890 --> 00:00:59,410
I think that should do it for.

21
00:01:00,290 --> 00:01:01,280
Register.

22
00:01:02,240 --> 00:01:03,860
Think I removed all of them.

23
00:01:04,680 --> 00:01:06,980
And pretty much the same for login.

24
00:01:06,990 --> 00:01:08,910
So let's navigate over here.

25
00:01:09,670 --> 00:01:11,470
And again, I don't want.

26
00:01:12,430 --> 00:01:13,660
Both of these values.

27
00:01:13,660 --> 00:01:17,800
So let me remove this one as well as this one.

28
00:01:18,220 --> 00:01:26,530
Then we want to navigate to the client and essentially build a production ready frontend.

29
00:01:26,680 --> 00:01:30,570
Now how we can do that, we want to navigate to our console.

30
00:01:30,580 --> 00:01:32,020
Let me clear everything.

31
00:01:32,020 --> 00:01:38,290
And of course if you want you can set up a script in a package.json That's also an option.

32
00:01:38,290 --> 00:01:43,410
But this time I'm just going to do it manually where we want to go with CD client.

33
00:01:43,420 --> 00:01:50,440
So now we navigate to the client folder and then if we want to set up a production ready application

34
00:01:50,440 --> 00:02:00,340
and we want to go with NPM, run and build, so let's build our application and then we will essentially

35
00:02:00,340 --> 00:02:04,690
move the files to our public in the server.

36
00:02:05,230 --> 00:02:07,570
So this is very, very important.

37
00:02:07,930 --> 00:02:15,520
Remember when we were setting up the image upload functionality, we created a public one and on the

38
00:02:15,520 --> 00:02:19,060
server we made sure that.

39
00:02:19,670 --> 00:02:21,660
It's publicly available.

40
00:02:21,680 --> 00:02:26,870
Basically, we went with express static and then path dot resolve.

41
00:02:26,900 --> 00:02:33,570
We're looking for Dirname and then we make our public one publicly available.

42
00:02:33,590 --> 00:02:41,510
So once we run NPM, run, build and once everything is in place, now we want to navigate to a dist

43
00:02:41,510 --> 00:02:42,140
folder.

44
00:02:42,140 --> 00:02:42,590
And you know what?

45
00:02:42,590 --> 00:02:45,860
Let me just set up everything from scratch over here.

46
00:02:45,860 --> 00:02:52,850
So we're looking for client and pretty much our production ready front end is going to be living in

47
00:02:52,850 --> 00:02:54,580
this dist folder.

48
00:02:54,590 --> 00:02:56,830
So we have multiple options.

49
00:02:56,840 --> 00:03:04,730
You can copy here from the VS code, but in my case I'll actually navigate back to my desktop.

50
00:03:04,940 --> 00:03:10,460
I'll open it up so I have dist over here and you don't want to move the folder.

51
00:03:10,580 --> 00:03:17,120
This folder, essentially you want to take everything that is inside and you want to place it here in

52
00:03:17,120 --> 00:03:17,900
the public.

53
00:03:18,680 --> 00:03:19,520
Or I'm sorry.

54
00:03:19,550 --> 00:03:20,240
My bad.

55
00:03:20,600 --> 00:03:21,320
Scratch that.

56
00:03:21,320 --> 00:03:24,590
Not in a public here in the client.

57
00:03:24,620 --> 00:03:28,040
You're looking for the public one that's in the server.

58
00:03:28,040 --> 00:03:30,260
So essentially, you're looking for the uploads.

59
00:03:30,470 --> 00:03:32,110
So copy and paste.

60
00:03:32,120 --> 00:03:35,300
So now notice this is going to be our front end.

61
00:03:35,300 --> 00:03:35,930
Correct?

62
00:03:35,930 --> 00:03:45,680
So now let's navigate back to our server and not only I want to make the public folder publicly available,

63
00:03:45,680 --> 00:03:49,160
but also I will need to set up a path.

64
00:03:49,160 --> 00:03:55,990
And essentially after all of our routes, we want to direct the user to the index.html.

65
00:03:56,000 --> 00:04:00,080
So if we take a look at the public, we'll see over here this index.html.

66
00:04:00,080 --> 00:04:04,430
So this is going to be our entry point to the front end application.

67
00:04:04,430 --> 00:04:10,820
And the reason why we want to place it after all of the routes, but before the error out is because

68
00:04:10,820 --> 00:04:14,270
from the front end we will still use our back end.

69
00:04:14,540 --> 00:04:18,990
So this is going to be only for all of the get routes.

70
00:04:19,019 --> 00:04:25,980
We want to point them to index HTML and the way it's going to look like we're going to go with app dot

71
00:04:25,980 --> 00:04:26,920
and get.

72
00:04:26,940 --> 00:04:28,890
So pretty much for all of the routes.

73
00:04:28,890 --> 00:04:31,890
But again, we're talking about our front end.

74
00:04:31,890 --> 00:04:38,880
So if, for example, we'll be requesting something from the server, we'll hit these ones first, then

75
00:04:38,880 --> 00:04:42,420
we want to add a comma so we'll have req and res.

76
00:04:42,510 --> 00:04:49,110
This is going to be our controller essentially, and we just want to go with res dot and then not send

77
00:04:49,110 --> 00:04:49,740
date.

78
00:04:49,950 --> 00:04:55,890
We want to send the file and now we are looking for the public one and then index.html.

79
00:04:55,890 --> 00:04:58,470
So in here pretty much the same.

80
00:04:58,470 --> 00:05:02,280
How we were doing it over here with path dot resolve.

81
00:05:02,310 --> 00:05:07,320
Now we want to add the index one so we'll look for path dot resolve.

82
00:05:07,350 --> 00:05:09,690
Then underscore, underscore dirname.

83
00:05:09,690 --> 00:05:11,730
We already have the code for it.

84
00:05:11,730 --> 00:05:12,450
Correct.

85
00:05:12,480 --> 00:05:17,220
Then forward slash public and then comma.

86
00:05:17,220 --> 00:05:20,180
And now we want to look for index HTML.

87
00:05:20,420 --> 00:05:24,530
So index and HTML, let's save it.

88
00:05:24,530 --> 00:05:28,760
And now we don't want to run this from the client.

89
00:05:28,790 --> 00:05:31,670
So first of all, let me move up now.

90
00:05:31,670 --> 00:05:33,710
I'm actually back in my route.

91
00:05:33,710 --> 00:05:40,850
I want to clear everything and instead of running NPM run dev, we want to go with Node and then we're

92
00:05:40,850 --> 00:05:44,480
looking for server since this is the file we're going to use.

93
00:05:44,480 --> 00:05:52,070
And when it comes to a browser, we're actually looking for localhost and then 5100, that's where our

94
00:05:52,070 --> 00:05:53,540
project is located.

95
00:05:53,540 --> 00:05:57,200
So again, we're not spinning up concurrently right now.

96
00:05:57,230 --> 00:05:59,180
We're actually spinning up our project.

97
00:05:59,180 --> 00:06:01,550
And let me mention something very important.

98
00:06:01,550 --> 00:06:09,230
The project needs to work locally on Port 5100 or whatever port you have.

99
00:06:09,500 --> 00:06:16,430
If it doesn't work, it's not going to magically work once we push this up to a render platform.

100
00:06:16,430 --> 00:06:21,420
So please, if you have any issues, troubleshoot them, use the course Q&A.

101
00:06:21,870 --> 00:06:28,860
Otherwise, if you push the project up to render with the bugs, it's going to be way harder to troubleshoot

102
00:06:28,860 --> 00:06:29,220
them.

103
00:06:29,220 --> 00:06:31,920
So now let me navigate back to my browser again.

104
00:06:31,920 --> 00:06:40,050
I'm not looking for 5173 actually want to go here and I want to look for 5100.

105
00:06:40,050 --> 00:06:42,570
So this is where my project is located.

106
00:06:42,600 --> 00:06:48,450
Now, I'm not going to test each and every functionality, but I do want to log in first as a demo one

107
00:06:48,450 --> 00:06:50,720
just so I can see whether everything works.

108
00:06:50,730 --> 00:06:54,690
Notice I can still nicely get the jobs, the pagination works.

109
00:06:54,690 --> 00:07:00,150
I can take a look at the stats, I can take a look at the profile if I try to change something here.

110
00:07:00,870 --> 00:07:03,630
I shouldn't be able to because I'm a demo user.

111
00:07:03,630 --> 00:07:05,180
So now let me log out.

112
00:07:05,190 --> 00:07:08,340
Let me log in as John.

113
00:07:08,340 --> 00:07:10,800
So again, I'm not going to be registering.

114
00:07:10,920 --> 00:07:17,310
I think it's faster if I just log in and let me go with my famous password.

115
00:07:17,310 --> 00:07:18,600
Let's submit.

116
00:07:18,630 --> 00:07:19,200
Yep.

117
00:07:19,200 --> 00:07:23,850
Login successful notice I still get the image and all that so everything is correct.

118
00:07:24,090 --> 00:07:26,970
And let me just try to add the job in here.

119
00:07:26,970 --> 00:07:28,590
I'm going to go with front end.

120
00:07:29,450 --> 00:07:31,890
And the company again is going to be Apple.

121
00:07:31,910 --> 00:07:35,060
Let's click on Submit and check it out.

122
00:07:35,420 --> 00:07:37,680
I can also create the jobs.

123
00:07:37,700 --> 00:07:44,240
So pretty much once I can see that the main functionalities work, it's pretty clear that everything

124
00:07:44,240 --> 00:07:45,650
else is also going to work.

125
00:07:45,650 --> 00:07:51,620
So now we're ready to push this up to production, essentially deploy our entire project.