1 00:00:00,140 --> 00:00:00,650 All right. 2 00:00:00,650 --> 00:00:08,360 And before we start setting up the code in the front end, I also want to set up the concurrently package, 3 00:00:08,360 --> 00:00:13,560 which will allow us to spin both of them up with the same command. 4 00:00:13,580 --> 00:00:21,950 So effectively, yeah, I mean, we can open up two terminal windows and start them up one by one, 5 00:00:21,950 --> 00:00:26,870 but at least in my opinion, it's faster if you have only one command. 6 00:00:26,900 --> 00:00:28,570 So here's what we want to do. 7 00:00:28,580 --> 00:00:31,220 First of all, let's close both of them. 8 00:00:31,790 --> 00:00:36,230 For now, we won't need them in order to install the package. 9 00:00:36,930 --> 00:00:37,950 Let me showcase. 10 00:00:37,950 --> 00:00:40,050 You're looking for this command. 11 00:00:40,050 --> 00:00:47,100 So you want to go with NPM I and then concurrently package and then in the scripts we're going to set 12 00:00:47,100 --> 00:00:51,590 up two more scripts, one to set up the server. 13 00:00:51,600 --> 00:00:55,700 So in this case we just go with Node one and then server and then client. 14 00:00:55,710 --> 00:01:01,830 So first we navigate to the client and then we go with NPM run dev and then the dev command actually 15 00:01:01,830 --> 00:01:03,540 is going to be concurrently. 16 00:01:03,540 --> 00:01:04,800 So that's the package. 17 00:01:04,800 --> 00:01:07,950 Then we have kill others on fail. 18 00:01:08,010 --> 00:01:12,720 And yes, I mean I find also this name extremely funny. 19 00:01:13,320 --> 00:01:16,950 Whoever came up with that name, I'm not sure what they were thinking. 20 00:01:17,550 --> 00:01:19,380 Probably they could have used something else. 21 00:01:19,380 --> 00:01:26,100 But essentially it just means that if one of the commands fail, for example, NPM server, then it's 22 00:01:26,100 --> 00:01:27,750 not going to spin up the client. 23 00:01:27,750 --> 00:01:29,940 So don't freak out by this name. 24 00:01:30,150 --> 00:01:32,220 At least I find it extremely funny. 25 00:01:32,220 --> 00:01:37,690 And once we have this in place we will just run npm run dev and it's going to spin up both of them. 26 00:01:37,690 --> 00:01:39,700 So first let's navigate back. 27 00:01:39,730 --> 00:01:42,970 Notice I have this watch one with the. 28 00:01:43,680 --> 00:01:47,160 Hyphen hyphen, watch flag, so I'm not going to use it at all. 29 00:01:48,050 --> 00:01:50,480 And I'll remove the dev for now. 30 00:01:50,480 --> 00:01:52,430 So start from the scratch. 31 00:01:52,430 --> 00:01:58,880 So this is going to be to set up the project again, super, super useful and therefore we'll keep it. 32 00:01:59,090 --> 00:02:05,750 We want to look for server, it's going to be my command and basically we go here with Node. 33 00:02:07,600 --> 00:02:08,620 Server. 34 00:02:09,039 --> 00:02:14,470 If you want, you can add JS over here and we want to add a comma over here as well and we want to set 35 00:02:14,470 --> 00:02:15,430 up the client. 36 00:02:16,460 --> 00:02:17,870 Let's set it equal to CD. 37 00:02:17,990 --> 00:02:24,800 So first we want to navigate to the client folder and then we want to go npm run dev. 38 00:02:24,830 --> 00:02:29,470 Then let's add a comma and now let's finally set up the command we're going to use. 39 00:02:29,480 --> 00:02:36,470 And yes, pretty much I'm sticking to this NPM run dev because we have that already on the client and 40 00:02:36,470 --> 00:02:39,710 I think it's just easier to remember otherwise. 41 00:02:39,710 --> 00:02:45,200 I mean, while I'm recording, I'll definitely forget which command I have for the server and for the 42 00:02:45,200 --> 00:02:46,340 frontend and all that. 43 00:02:46,340 --> 00:02:51,950 So we want to go here with this funny name concurrently, which as a side note, I always make errors 44 00:02:51,950 --> 00:02:54,350 when I have to spell it. 45 00:02:54,620 --> 00:02:58,430 And here let's go with kill others. 46 00:02:59,480 --> 00:03:00,410 On fail. 47 00:03:00,680 --> 00:03:05,840 And essentially this is where we provide the commands we want to run together. 48 00:03:06,660 --> 00:03:10,680 And as far as the syntax, the package uses the escape syntax. 49 00:03:10,680 --> 00:03:12,000 So what am I talking about? 50 00:03:12,030 --> 00:03:17,490 Well, for example, if I want to run npm run server, notice how? 51 00:03:18,370 --> 00:03:20,170 Everything turns red over here. 52 00:03:20,170 --> 00:03:27,010 So in order to fix it, we need to look for the quotation mark and add the escape. 53 00:03:27,010 --> 00:03:29,290 And the same goes with the closing one. 54 00:03:29,290 --> 00:03:35,320 So look for the closing quotation mark and then add the escape. 55 00:03:35,320 --> 00:03:38,320 And now notice how everything looks good. 56 00:03:38,320 --> 00:03:42,640 And we want to do the same thing with NPM run client. 57 00:03:42,640 --> 00:03:44,230 So let me just copy and paste. 58 00:03:44,230 --> 00:03:45,640 I think it's going to be faster. 59 00:03:46,460 --> 00:03:47,660 And let's just change it around. 60 00:03:47,660 --> 00:03:51,440 So this is not going to be server, it's going to be client. 61 00:03:51,470 --> 00:03:53,600 Then let's open up the terminal. 62 00:03:53,600 --> 00:03:59,420 And now again, we're looking for NPM run and dev and check it out. 63 00:03:59,450 --> 00:04:07,400 If everything is correct, not only our server is going to be running on 5100, but also our local host. 64 00:04:07,400 --> 00:04:10,760 And with this in place, we are ready to move on to the next step.