1
00:00:00,050 --> 00:00:00,480
Okay.

2
00:00:00,530 --> 00:00:06,110
And once we're done with our initial deploy up next, let's make some improvements to our app.

3
00:00:06,320 --> 00:00:10,310
For starters, let's build our front end programmatically.

4
00:00:10,550 --> 00:00:17,840
You see, our current setup works, but every time we'll make some changes to our front end before we

5
00:00:17,840 --> 00:00:22,460
push our project up to a GitHub and essentially deploy it.

6
00:00:22,460 --> 00:00:28,190
Because at the moment we do have continuous deployment, which means that every time I'll push this

7
00:00:28,190 --> 00:00:35,180
up to a GitHub render, we'll start rebuilding our project, which is really, really awesome.

8
00:00:35,180 --> 00:00:42,560
But if we make some changes to the front end before we push it up to a GitHub, we will need to manually

9
00:00:42,560 --> 00:00:46,800
build our front end first, just like we did in the previous video.

10
00:00:46,820 --> 00:00:52,940
Basically, we will have to navigate their build the front end and then move it to a public one.

11
00:00:52,970 --> 00:00:53,870
Otherwise.

12
00:00:54,600 --> 00:00:59,700
Well, as far as the front end is concerned, we're still deploying the old one.

13
00:00:59,730 --> 00:01:00,450
Correct.

14
00:01:00,450 --> 00:01:04,709
And obviously, that's not something we want, so let's fix it.

15
00:01:04,739 --> 00:01:13,020
So for starters, we essentially want to set up a new script in the package Json, and then in the server

16
00:01:13,020 --> 00:01:14,740
we'll just change the path.

17
00:01:14,760 --> 00:01:18,240
So if we navigate to a package Json.

18
00:01:19,190 --> 00:01:21,560
Of course, you'll notice our setup project one.

19
00:01:22,040 --> 00:01:23,990
And what are we doing over here?

20
00:01:24,020 --> 00:01:25,790
Well, we go with PMI.

21
00:01:26,060 --> 00:01:28,730
So we install dependencies on the server.

22
00:01:28,760 --> 00:01:34,220
Then we navigate to a client and then we also install dependencies.

23
00:01:34,250 --> 00:01:34,810
Correct.

24
00:01:34,820 --> 00:01:37,250
So this is for setting up the project.

25
00:01:37,250 --> 00:01:44,330
And essentially I want to keep this command because this is very useful if I pull it from the GitHub.

26
00:01:44,360 --> 00:01:51,160
Now the change I want to make is to add one more command and that is npm run build.

27
00:01:51,170 --> 00:01:53,840
So essentially I want to copy and paste.

28
00:01:53,840 --> 00:01:57,920
So at the moment, of course the name is the same, but I'm going to change this around.

29
00:01:58,040 --> 00:01:59,660
I'm going to go with setup.

30
00:02:00,140 --> 00:02:01,280
Production.

31
00:02:01,670 --> 00:02:02,810
Hyphen app.

32
00:02:02,810 --> 00:02:04,010
And in here.

33
00:02:04,220 --> 00:02:11,420
Like I said, I only want to add one more thing and that is NPM run and build.

34
00:02:11,630 --> 00:02:14,030
So npm run, build.

35
00:02:14,030 --> 00:02:15,500
And now essentially.

36
00:02:16,290 --> 00:02:22,260
Every time we run this command, not only will install dependencies, but will also immediately build

37
00:02:22,260 --> 00:02:23,340
our frontend.

38
00:02:23,340 --> 00:02:29,760
And once we have this in place, now we can navigate to a server and instead of pointing to a public

39
00:02:29,760 --> 00:02:38,540
one now I'm going to point to a client Dist, since that's where my newest frontend is going to be located.

40
00:02:38,550 --> 00:02:40,620
So this is very, very important.

41
00:02:40,650 --> 00:02:42,330
Don't keep the public one.

42
00:02:42,360 --> 00:02:49,740
As a side note, we'll actually remove the public one when we fix our update user functionality, but

43
00:02:49,740 --> 00:02:52,860
I don't want to do it right now, so make sure that you change here.

44
00:02:52,860 --> 00:02:55,320
This static one, it's not going to be public.

45
00:02:55,410 --> 00:03:01,740
It's actually going to be our client and then list and the same is going to be with this index.html.

46
00:03:01,740 --> 00:03:03,480
So let's try it over here.

47
00:03:03,480 --> 00:03:10,770
So instead of dot forward slash public, we're going to go with dot forward slash client forward slash

48
00:03:10,770 --> 00:03:12,210
and then Dist again.

49
00:03:12,210 --> 00:03:15,990
This is where our newest frontend is going to be located.

50
00:03:15,990 --> 00:03:20,550
And essentially we want to do the same thing here with this index HTML.

51
00:03:20,670 --> 00:03:28,620
So instead of pointing to the index.html which is located in the public one, we're pointing to a client

52
00:03:28,620 --> 00:03:29,160
dist.

53
00:03:29,160 --> 00:03:32,130
And before we push this up to a GitHub.

54
00:03:32,930 --> 00:03:35,180
And change the command in the renderer.

55
00:03:35,480 --> 00:03:39,050
I want to test it locally and this is super, super important.

56
00:03:39,050 --> 00:03:45,740
Again, it's always easier to troubleshoot bugs while you're still working locally.

57
00:03:45,740 --> 00:03:50,000
It's much harder to do it when you push something up to production.

58
00:03:50,090 --> 00:03:56,810
Yes, if there are no bugs, project is going to work locally and then we can push it up to a GitHub

59
00:03:56,810 --> 00:04:00,180
and then of course Render is going to rebuild our project.

60
00:04:00,200 --> 00:04:01,550
So let me start over here.

61
00:04:01,550 --> 00:04:02,870
Let me clear everything.

62
00:04:02,870 --> 00:04:07,820
And basically in order to test it locally, I want to navigate to a client.

63
00:04:08,060 --> 00:04:12,250
We're going to remove the node modules since of course we'll run our command.

64
00:04:12,260 --> 00:04:16,430
I also right away want to remove the dist now.

65
00:04:16,430 --> 00:04:20,480
I already removed it in between the videos, but make sure you do that.

66
00:04:20,510 --> 00:04:24,050
Make sure that you remove the dist so you don't have the old one.

67
00:04:24,140 --> 00:04:28,850
Then let's navigate to a server and let's remove the node modules.

68
00:04:28,970 --> 00:04:34,710
And this is totally optional, but it's always my preference to also remove the package lock.

69
00:04:34,710 --> 00:04:42,210
But again, you don't have to technically do this, so let's remove those files then Let's run our command.

70
00:04:42,210 --> 00:04:44,040
Remember, what is the command?

71
00:04:44,070 --> 00:04:47,820
We want to go with NPM run and then set up.

72
00:04:48,550 --> 00:04:49,720
Production.

73
00:04:50,620 --> 00:04:51,480
An app.

74
00:04:51,490 --> 00:04:52,600
Let's run this.

75
00:04:52,630 --> 00:04:59,560
You'll notice that not only we installed dependencies, but we also right away build our front end.

76
00:04:59,560 --> 00:05:06,010
So just imagine that you made some changes to a front end and essentially now you want to build it from

77
00:05:06,010 --> 00:05:06,910
the scratch.

78
00:05:07,120 --> 00:05:12,700
So we installed dependencies, we navigate to the client, we installed dependencies over there and

79
00:05:12,700 --> 00:05:16,550
also we right away perform NPM run, build.

80
00:05:16,570 --> 00:05:21,790
Now this might take a little bit of time, so I'll stop the video and I'll resume once everything is

81
00:05:21,790 --> 00:05:24,970
complete and once the command has finished running.

82
00:05:24,970 --> 00:05:30,850
Now we want to again clear in my case and we want to go with node server.

83
00:05:30,850 --> 00:05:35,130
So not NPM run dev, we're not spinning up concurrently.

84
00:05:35,140 --> 00:05:38,380
We're going with node and server.

85
00:05:38,380 --> 00:05:44,530
And as far as the browser, we're looking for port 5100.

86
00:05:44,560 --> 00:05:48,370
So not again our 5173.

87
00:05:48,400 --> 00:05:53,750
We're looking for localhost and then 5100.

88
00:05:53,840 --> 00:06:01,160
And again the application needs to work, so everything should work over here locally and only then

89
00:06:01,160 --> 00:06:02,750
we push it up to production.

90
00:06:02,750 --> 00:06:08,750
Now again, I'm not going to test each and every functionality, but I do want to take it for a test

91
00:06:08,750 --> 00:06:09,430
drive.

92
00:06:09,440 --> 00:06:14,870
All jobs, stats and all that so everything looks correct and effectively.

93
00:06:14,870 --> 00:06:17,990
Like I said, we have continuous deployment right now.

94
00:06:17,990 --> 00:06:19,280
What that means.

95
00:06:19,310 --> 00:06:26,090
Well, we can push this up to a GitHub and render is going to rebuild our application, which is obviously

96
00:06:26,090 --> 00:06:27,340
super, super cool.

97
00:06:27,350 --> 00:06:34,040
Now we can push everything up with the help of integrated terminal so we can provide the command or

98
00:06:34,040 --> 00:06:35,660
we can use the VS code.

99
00:06:35,660 --> 00:06:37,490
So notice over here this tab.

100
00:06:37,520 --> 00:06:39,680
Essentially, this is a source control.

101
00:06:39,740 --> 00:06:44,360
It shows me right away all of the changes I made in my project.

102
00:06:44,480 --> 00:06:50,180
And essentially we just want to provide over here the commit message, then commit and then push it

103
00:06:50,180 --> 00:06:51,830
up to a GitHub.

104
00:06:51,830 --> 00:06:57,170
So in here I'll say fixed or fix front end.

105
00:06:57,470 --> 00:07:04,070
Then let's commit this and notice over here, once I click on those three dots, I have this option

106
00:07:04,100 --> 00:07:05,000
of push.

107
00:07:05,240 --> 00:07:08,180
So essentially we just push this up to a GitHub.

108
00:07:08,180 --> 00:07:15,140
And now if we navigate to a GitHub, if everything is correct, we should see the latest commit message.

109
00:07:15,140 --> 00:07:16,610
Now we're not done.

110
00:07:16,610 --> 00:07:21,380
We also need to go to a render and change our build command.

111
00:07:21,380 --> 00:07:24,530
So let's navigate to the render platform.

112
00:07:24,530 --> 00:07:30,470
We're looking for our application, then we're looking for the settings and we just need to keep on

113
00:07:30,470 --> 00:07:32,090
scrolling, keep on scrolling.

114
00:07:32,090 --> 00:07:37,310
And remember our initial build command was this one NPM install.

115
00:07:37,460 --> 00:07:46,250
But of course now we want to run NPM run setup production app since we want to build the front end on

116
00:07:46,250 --> 00:07:47,330
render as well.

117
00:07:47,330 --> 00:07:51,200
So let's go here with NPM run setup.

118
00:07:52,010 --> 00:07:54,470
Then production and app.

119
00:07:54,500 --> 00:07:56,810
Let's save the changes.

120
00:07:57,020 --> 00:08:05,450
Let's navigate right now to I guess, the logs since I want to showcase how everything is taking place.

121
00:08:05,450 --> 00:08:07,410
So now let's navigate over here.

122
00:08:07,430 --> 00:08:14,850
Notice we can deploy the latest commit or we can nicely clear the build cache and deploy from the scratch.

123
00:08:14,870 --> 00:08:16,280
So let me click on that.

124
00:08:16,280 --> 00:08:16,850
In here.

125
00:08:16,850 --> 00:08:25,640
We nicely see the command render is running and again, that is our NPM run setup production app.

126
00:08:25,640 --> 00:08:31,210
And essentially what's happening right now, we're programmatically building our front end on render.

127
00:08:31,220 --> 00:08:32,890
It looks like it was a success.

128
00:08:32,900 --> 00:08:39,289
So now let's navigate to the URL and again, I'm just going to test with the demo user.

129
00:08:39,320 --> 00:08:39,919
Yep.

130
00:08:40,010 --> 00:08:42,590
Take a test drive and again have the stats.

131
00:08:42,590 --> 00:08:45,590
I have all jobs so everything is correct.

132
00:08:45,590 --> 00:08:50,120
And with this in place we can start working on the next step.