1
00:00:00,180 --> 00:00:05,460
Beautiful, we're at this awesome point in our application where we want to spin up both.

2
00:00:05,700 --> 00:00:09,060
We want to spin up the frontend as well as the backend.

3
00:00:09,300 --> 00:00:12,750
So our server pictures from this point on.

4
00:00:13,680 --> 00:00:21,270
We'll work in both places extensively and technically, you can make an argument that we could set up

5
00:00:21,570 --> 00:00:22,800
multiple terminals here.

6
00:00:23,430 --> 00:00:31,680
I could spin up the server in, let's say, first one over here and then the create racked up one in

7
00:00:31,680 --> 00:00:32,340
the first one.

8
00:00:32,549 --> 00:00:36,690
So of course, I would need to navigate to the folder, declined one.

9
00:00:36,930 --> 00:00:41,450
Hopefully, that is square, and technically we could do so.

10
00:00:41,460 --> 00:00:46,080
I could even go back to my desktop and actually open up the terminal.

11
00:00:46,080 --> 00:00:47,400
That is also an option.

12
00:00:47,910 --> 00:00:55,320
But at least in my opinion, a better option is to use package by the name of concurrently, which essentially.

13
00:00:56,510 --> 00:01:00,620
Is it going to be watching for both of them if there's ever a challenge?

14
00:01:00,980 --> 00:01:04,700
Well, we'll restart that particular process.

15
00:01:05,239 --> 00:01:10,670
And if you want to find out more info, you can follow the link that I left here for the package.

16
00:01:11,030 --> 00:01:14,360
But the general idea is following where we want to install again.

17
00:01:14,380 --> 00:01:20,900
It is my preference to use it as a dependency, but you don't have to if you are a rebel and if you

18
00:01:20,900 --> 00:01:24,230
think that your approach is better, I mean, who am I to judge you?

19
00:01:24,380 --> 00:01:25,340
So let's go over here.

20
00:01:25,350 --> 00:01:26,870
Let's copy and paste the command.

21
00:01:27,020 --> 00:01:35,180
So essentially, we're installing the package and then in the package, JSON will have to do some acrobatics.

22
00:01:36,020 --> 00:01:42,340
And since it's very easy to make a typo, and since I'm pretty much always an expert on how to do it,

23
00:01:42,350 --> 00:01:46,790
especially when I'm recording, yes, I will take my sweet time.

24
00:01:47,210 --> 00:01:50,360
And I highly suggest that you do the same thing.

25
00:01:50,780 --> 00:01:54,650
So first, let's start with something that we already know.

26
00:01:55,310 --> 00:01:57,500
We already know how we can spin up the server.

27
00:01:57,980 --> 00:02:03,130
In our case, we are just doing that with no admin server, and that is equal to the start one.

28
00:02:03,560 --> 00:02:11,170
Now, the thing is eventually what I want is for my start command spent on both the server and the front

29
00:02:11,170 --> 00:02:12,480
frontend how we can do that.

30
00:02:12,500 --> 00:02:16,490
Well, first set this one up as server instead of stock.

31
00:02:16,940 --> 00:02:18,710
And what is the approach here?

32
00:02:19,010 --> 00:02:20,480
Well, let's just rename it.

33
00:02:21,360 --> 00:02:26,610
One thing we need to remember, though, that now this one is AMPM Ron server.

34
00:02:27,210 --> 00:02:30,780
So for a start, we just go with an open start for the server script.

35
00:02:30,960 --> 00:02:33,420
We need to go with AMPM Ranch server.

36
00:02:33,750 --> 00:02:35,070
So let's try that one else.

37
00:02:35,190 --> 00:02:39,750
NPM are on server and I should see the log in the console, but I don't.

38
00:02:39,870 --> 00:02:40,210
Why?

39
00:02:40,230 --> 00:02:44,580
Well, because I'm an expert on making silly mistakes, but I save the package, Jason.

40
00:02:44,970 --> 00:02:45,480
Of course not.

41
00:02:45,780 --> 00:02:46,880
So let me save it.

42
00:02:46,890 --> 00:02:52,950
Let me clear the terminal, and I'll let's try one more time and PM Ron and server.

43
00:02:53,640 --> 00:02:58,890
And it looks like everything is cracked because I can see servers listening on port five thousand.

44
00:02:59,130 --> 00:03:00,570
OK, that's a beautiful start.

45
00:03:00,900 --> 00:03:06,420
Now I want to do the same thing with our client, and here to set up is following we need to come up

46
00:03:06,420 --> 00:03:07,020
with a name.

47
00:03:07,350 --> 00:03:12,270
So in my case, I'm going to go with client and landing multiple flavors.

48
00:03:12,280 --> 00:03:15,230
You can either go with npm start.

49
00:03:15,240 --> 00:03:15,780
Why?

50
00:03:15,960 --> 00:03:23,100
Well, because remember for Create React app, that's the command in the client package JSON and very,

51
00:03:23,100 --> 00:03:25,590
very important in the client package.

52
00:03:25,590 --> 00:03:28,440
Jason, what is the command here start?

53
00:03:28,710 --> 00:03:31,830
That's why we're using it in our server as well.

54
00:03:32,100 --> 00:03:36,000
And then I want to go with hyphen hyphen prefix client.

55
00:03:36,510 --> 00:03:36,900
Why?

56
00:03:37,020 --> 00:03:42,240
Well, because that signals where I'm going to run the npm start now.

57
00:03:42,480 --> 00:03:45,690
Alternatively, you can just go see the client and npm start.

58
00:03:46,140 --> 00:03:47,280
This is really up to you.

59
00:03:47,820 --> 00:03:51,270
Whichever option you prefer better.

60
00:03:51,750 --> 00:03:53,550
And I think I'm going to go with this one.

61
00:03:53,880 --> 00:03:59,700
So let me go to the package JSON and let me close the client one because knowing me, I'll probably

62
00:03:59,700 --> 00:04:04,800
make the changes over there and then spend half an hour running around like a headless chicken looking

63
00:04:04,800 --> 00:04:06,150
for the bug.

64
00:04:06,570 --> 00:04:14,850
So let's go here with a client of mine and we want to go with ampm start half-and-half and then we're

65
00:04:14,850 --> 00:04:21,000
going to go with prefix and then we'll set up our folder, which conveniently enough is client.

66
00:04:21,209 --> 00:04:27,070
So let me start my server right now and let me go with npm run client.

67
00:04:27,840 --> 00:04:28,560
Let me see here.

68
00:04:28,800 --> 00:04:30,090
I saved the package JSON.

69
00:04:30,540 --> 00:04:36,180
I mean, that would have been a disaster if I do the same thing twice, but it wouldn't be the first

70
00:04:36,180 --> 00:04:36,450
time.

71
00:04:36,870 --> 00:04:38,330
So let me wait a little bit.

72
00:04:38,340 --> 00:04:41,190
I mean, sometimes it takes a little bit of time.

73
00:04:41,640 --> 00:04:43,380
Hopefully, everything is correct.

74
00:04:43,380 --> 00:04:48,090
And yep, I can see that the front end is spinning up on localhost 3000.

75
00:04:48,540 --> 00:04:51,090
And since that is happening, you know what I can do as well.

76
00:04:51,360 --> 00:04:56,760
I can actually set them side by side because, like I said, pretty much from now on, we'll be working

77
00:04:56,760 --> 00:04:57,540
with both of them.

78
00:04:57,870 --> 00:05:00,930
So it kind of makes sense if we have the initial set up.

79
00:05:01,530 --> 00:05:08,520
So let's say here that I want the Visual Studio code and left hand side and then the browser on the

80
00:05:08,520 --> 00:05:09,090
right hand side.

81
00:05:09,360 --> 00:05:10,590
Again, this is a Mac thing.

82
00:05:10,590 --> 00:05:12,750
It has nothing to do with my stack.

83
00:05:13,110 --> 00:05:16,950
So client works, server works, and now we just want to combine them.

84
00:05:16,950 --> 00:05:17,400
Correct?

85
00:05:17,730 --> 00:05:19,680
So first, let me stop everything.

86
00:05:20,040 --> 00:05:28,710
Let me clear my terminal and then we're looking for to read me and notice the concurrently package uses

87
00:05:28,710 --> 00:05:31,620
the scapegoats, so we'll set up the command.

88
00:05:32,100 --> 00:05:38,820
I mean, pretty popular is going with Dev, but I just find it annoying that I have to go npm run moron

89
00:05:39,030 --> 00:05:43,650
and then the command that it's always my preference if I can shorten this up.

90
00:05:43,650 --> 00:05:45,180
And that's why I was going to start.

91
00:05:45,420 --> 00:05:49,440
I know that for some people, it might be a little bit confusing since it's the same command that we

92
00:05:49,440 --> 00:05:50,970
used in React.

93
00:05:51,060 --> 00:05:52,620
In my case, actually, it's the opposite.

94
00:05:52,950 --> 00:05:53,860
I prefer that one.

95
00:05:54,210 --> 00:05:57,720
And then we go with concurrently, and this is a doozy.

96
00:05:57,750 --> 00:05:59,940
Usually, I make some kind of spelling error.

97
00:06:00,540 --> 00:06:03,690
Luckily, I have my extension to catch that.

98
00:06:03,990 --> 00:06:09,210
And then we have this violent kill others on fail, which sounds very scary.

99
00:06:09,570 --> 00:06:14,880
The end of the day is just kills the command if one of them dies, so it kills all of them.

100
00:06:15,120 --> 00:06:19,650
If one of them dies again, they probably could have come up with something less violent.

101
00:06:19,650 --> 00:06:20,890
But who am I to judge?

102
00:06:20,910 --> 00:06:22,200
I didn't create that package.

103
00:06:22,740 --> 00:06:29,220
And in here, like I said, we have escape codes and then we want to run our commands.

104
00:06:29,250 --> 00:06:31,960
We want to run server and client.

105
00:06:31,980 --> 00:06:32,370
Correct?

106
00:06:32,670 --> 00:06:33,990
That's what we have in a script.

107
00:06:34,500 --> 00:06:36,150
So let's set this one up.

108
00:06:36,390 --> 00:06:44,220
We're back in a package, Jason out of comma here, and let's go head, start and run.

109
00:06:44,610 --> 00:06:49,500
I mean, this is definitely going to be a doozy, so I will take my sweet time concurrently.

110
00:06:50,930 --> 00:06:55,100
And hopefully that is correct when we have the violent one kill.

111
00:06:56,090 --> 00:06:58,970
Others on fail.

112
00:06:59,480 --> 00:07:01,730
And then let's do those scapegoats.

113
00:07:02,800 --> 00:07:08,830
Where we set up the dash and then the court and all right away set up both of them and in between them,

114
00:07:09,070 --> 00:07:14,790
you want to run the commands, you want to go with an p.m. or on server, correct?

115
00:07:15,250 --> 00:07:19,450
And then we have an opinion on client side of the same thing.

116
00:07:19,450 --> 00:07:27,120
Artscape quotes mother one and then inside of it, let's Typekit sucker and PM run.

117
00:07:27,580 --> 00:07:28,630
And then client.

118
00:07:28,750 --> 00:07:31,120
And hopefully I didn't set this up in the client folder.

119
00:07:31,570 --> 00:07:33,430
I mean, that would be just hilarious.

120
00:07:33,880 --> 00:07:40,030
Now it's around a.m. start, but there's one last thing that I want to showcase, and I'll do that once

121
00:07:40,030 --> 00:07:41,190
both of them are running.

122
00:07:41,260 --> 00:07:48,670
So there's one tiny thing that I want to add because while I was developing, I was just hitting some

123
00:07:48,670 --> 00:07:52,030
weird bugs if I didn't add that prefix.

124
00:07:52,390 --> 00:07:53,110
So at the moment?

125
00:07:54,010 --> 00:08:03,130
As you can see, the server is running at 5000, and I also can see nicely my front, then correct on

126
00:08:03,130 --> 00:08:03,700
three thousand.

127
00:08:04,060 --> 00:08:08,680
So let's try everything out, whether everything works so here in the server.

128
00:08:08,980 --> 00:08:13,070
I'm just going to add some dummy code regardless of where you do that.

129
00:08:13,090 --> 00:08:14,740
I'm going to go with log online.

130
00:08:14,920 --> 00:08:15,310
Hello.

131
00:08:15,340 --> 00:08:15,750
That's it.

132
00:08:15,790 --> 00:08:20,140
That's all I want to do, and I'll add a few of them just so I can see in our terminal.

133
00:08:20,470 --> 00:08:28,360
So non-audit, every time I make some changes, what is happening while no admin is spinning up my server?

134
00:08:28,430 --> 00:08:28,830
Correct.

135
00:08:28,850 --> 00:08:29,980
So that is cool.

136
00:08:30,490 --> 00:08:35,169
Now also, let's try out the frontend where I'm going to go to the client.

137
00:08:35,620 --> 00:08:40,809
And since I can see the dashboard page, I mean, kind of makes sense if I go to pages and then that's

138
00:08:40,809 --> 00:08:43,390
board, and let's just add a page or here.

139
00:08:43,659 --> 00:08:44,590
So let's hear it.

140
00:08:45,040 --> 00:08:52,600
So I can see nicely that the refresh work I have the page and I'm starting up the server.

141
00:08:53,080 --> 00:08:59,170
Now the problem is this one, these are lawyers, because what that means that we're also spinning up

142
00:08:59,170 --> 00:09:05,010
the server and while developing the application, I actually ran into some issues.

143
00:09:05,020 --> 00:09:11,830
If this is the case and in order to resolve those issues, I actually found a fix where where we have

144
00:09:11,830 --> 00:09:12,730
the node one.

145
00:09:13,330 --> 00:09:17,020
We're going to go with hyphen, hyphen, ignore and client.

146
00:09:17,500 --> 00:09:24,430
So this is 40 node and be in package where essentially we're just ignoring this client one.

147
00:09:24,550 --> 00:09:31,870
And as a result, when run making changes here, then we're not going to restart the server, which

148
00:09:31,870 --> 00:09:37,390
is very, very important because again, at some point I was just hitting bugs and it was really annoying.

149
00:09:37,690 --> 00:09:44,870
So with me, stop everything and where I have the server, I want to this ignore client, so I find

150
00:09:44,870 --> 00:09:48,580
hyphen and ignore and then client.

151
00:09:48,700 --> 00:09:51,090
So let's go back to our package.

152
00:09:51,100 --> 00:09:52,960
Jason Nash Nash.

153
00:09:53,710 --> 00:09:56,590
Nor a man we're looking for to client one.

154
00:09:56,980 --> 00:09:57,730
And now what?

155
00:09:57,730 --> 00:10:03,820
You'll notice that if I start up the server again, and of course, now what I'm talking about the server,

156
00:10:04,180 --> 00:10:05,830
I'm talking about the entire thing.

157
00:10:06,130 --> 00:10:07,480
So I'm talking about the application.

158
00:10:07,480 --> 00:10:13,120
So from now on, if I say server, I'm not specifically talking about the express server.

159
00:10:13,120 --> 00:10:14,560
I'm talking about the entire thing.

160
00:10:14,860 --> 00:10:18,390
Now I'll try to remember, use the application word.

161
00:10:18,400 --> 00:10:20,830
So basically, I'll say I'll restart the application.

162
00:10:20,830 --> 00:10:25,600
But if I forget to, please keep in mind that both of them pretty much mean the same thing.

163
00:10:25,780 --> 00:10:30,610
And what you'll notice right now that if I go back to the dashboard and if I remove, I'm not going

164
00:10:30,610 --> 00:10:33,910
to see those console logs, and this was exactly what I was looking for.

165
00:10:34,120 --> 00:10:36,700
So let me just try it out with the server, whether this works.

166
00:10:36,970 --> 00:10:40,990
So instead of four console logs with hello, I'm just going to go with two.

167
00:10:41,320 --> 00:10:43,120
So in this case, I can clearly see the two.

168
00:10:43,330 --> 00:10:48,480
But if again, I'm going to do something on a frontend, I won't see those followers.

169
00:10:48,520 --> 00:10:48,890
Why?

170
00:10:48,910 --> 00:10:51,520
Well, because I only care about the front end.

171
00:10:51,900 --> 00:10:55,960
And if your result is exactly the same, we're moving in the right direction.

172
00:10:56,230 --> 00:11:03,210
I'm going to remove those silly, hollow logs from the server, and now we can move on to our next topic.