1 00:00:00,950 --> 00:00:05,640 In the last section we started to explore some of the different files inside of our new client project 2 00:00:05,940 --> 00:00:09,080 that we generated inside the server directory. 3 00:00:09,090 --> 00:00:13,830 We also spoke a little bit about how this includes its own separate server and how having that separate 4 00:00:13,830 --> 00:00:20,040 server is actually going to save us a lot of time in the long run because it gives us some great initial 5 00:00:20,040 --> 00:00:21,970 set up right out of the box. 6 00:00:22,200 --> 00:00:27,480 In this section we're now going to continue by figuring out how we can very easily run both the server 7 00:00:27,570 --> 00:00:31,460 and the client together in a fairly elegant fashion. 8 00:00:31,530 --> 00:00:36,620 We'll first get started by changing back over to the terminal where I have the existing client running. 9 00:00:36,930 --> 00:00:42,960 I'm going to kill the client like so and then I'm going to change back into the server directory. 10 00:00:43,070 --> 00:00:46,180 So I'm going to go up one level and now I'm back into the server. 11 00:00:46,530 --> 00:00:52,410 So my first question to you is how in the world would we get both the server and the client to run together 12 00:00:52,410 --> 00:00:53,550 at the same time. 13 00:00:53,940 --> 00:00:56,780 Well there's definitely an easy way in a hard way. 14 00:00:57,040 --> 00:01:03,780 So to get the server and the client working simultaneously or running at the same time a very kind of 15 00:01:03,780 --> 00:01:04,550 straight forward. 16 00:01:04,560 --> 00:01:11,040 But I would call hard way would be to open up a second terminal window change into the client directory 17 00:01:12,190 --> 00:01:19,230 run NPM start over there to start up the client server change back over to the server window and then 18 00:01:19,230 --> 00:01:22,100 run NPM run dev which starts our server up. 19 00:01:22,440 --> 00:01:26,960 So now we have both the development and the backend server. 20 00:01:26,970 --> 00:01:31,320 We're seeing the front end and the back end server working together at the same time. 21 00:01:31,320 --> 00:01:35,470 Now obviously we don't really want to have to always be spinning up to separate windows like this. 22 00:01:35,580 --> 00:01:40,500 And I bet at this point in time you might even be wondering how I open up to windows simultaneously. 23 00:01:40,500 --> 00:01:43,740 So clearly there must be a slightly better solution than this. 24 00:01:43,800 --> 00:01:45,420 And there definitely it's. 25 00:01:45,450 --> 00:01:50,370 So rather than always opening up two separate windows we're going to make use of a little package called 26 00:01:50,460 --> 00:01:56,700 concurrently that's going to help us run two separate servers with a single command. 27 00:01:56,840 --> 00:02:00,120 I'm going to first start off by closing both the client and the server. 28 00:02:00,210 --> 00:02:06,260 And remember you can do that by pressing Control-C and I'm going to flip back over to my code editor 29 00:02:07,620 --> 00:02:09,370 inside of my server directory. 30 00:02:09,420 --> 00:02:12,330 I will find my package got Jesus on file. 31 00:02:12,360 --> 00:02:14,480 So here's the package it's on file. 32 00:02:14,610 --> 00:02:17,770 And here are some of the scripts that we've been working on already. 33 00:02:17,850 --> 00:02:21,510 Now something we're going to tell you right now and we're going to repeat many times throughout this 34 00:02:21,510 --> 00:02:22,470 course. 35 00:02:22,530 --> 00:02:25,580 We now have two separate package. 36 00:02:25,600 --> 00:02:34,230 JS some files one package Jason file exists on the server and records all the development assets or 37 00:02:34,230 --> 00:02:37,300 all the assets that we need for our back end server. 38 00:02:37,770 --> 00:02:44,550 The second packet package that Jason File is inside of the client directory and records all of the dependencies 39 00:02:44,760 --> 00:02:50,140 of our front end application and some of the different scripts that it uses as well. 40 00:02:50,160 --> 00:02:55,200 So throughout the rest of this course it's really really critical that we both make sure that we are 41 00:02:55,200 --> 00:03:00,210 working on the correct package not just on file at any given time. 42 00:03:00,540 --> 00:03:05,970 I will be sure to spend a tremendous amount of effort to be very clear on which package not just on 43 00:03:05,980 --> 00:03:07,320 file We're working with. 44 00:03:07,320 --> 00:03:13,080 Starting right now I'm going to tell you make sure you're in the package not just on file in the server 45 00:03:13,080 --> 00:03:14,060 directory. 46 00:03:14,100 --> 00:03:17,510 So at the very top you should see a name of server right here. 47 00:03:17,910 --> 00:03:22,840 And in general your file right now should look very much like the one I have on my screen. 48 00:03:23,350 --> 00:03:23,620 OK. 49 00:03:23,620 --> 00:03:25,280 So anyways let's get back to it. 50 00:03:25,290 --> 00:03:25,940 We're going to. 51 00:03:25,970 --> 00:03:26,520 Right. 52 00:03:26,520 --> 00:03:31,800 Are we going to make use of a little module that's going to help us run both the client and the server 53 00:03:31,980 --> 00:03:35,900 with a single command at the same time. 54 00:03:35,940 --> 00:03:41,700 So inside my scripts section right here I'm going to add on two additional scripts. 55 00:03:41,970 --> 00:03:46,530 So the first thing I'm going to do is add on an additional script that is going to start up the client 56 00:03:46,530 --> 00:03:48,320 side of our application. 57 00:03:48,450 --> 00:03:56,100 So going to make a new script called client like so for the actual script that gets executed right here. 58 00:03:56,100 --> 00:04:02,240 I'm going to run the command NPM run start because remember that's how we start up the client. 59 00:04:02,250 --> 00:04:03,690 Now there's just one little issue. 60 00:04:03,720 --> 00:04:11,430 If we executed this command right now from our from our terminal it would execute the command NPM run 61 00:04:11,430 --> 00:04:17,010 start in the context of the server directory and that would just start up our server which is definitely 62 00:04:17,010 --> 00:04:17,850 not what we want. 63 00:04:17,850 --> 00:04:24,360 We want to start up our clients so we need to somehow run the command and run start from within the 64 00:04:24,360 --> 00:04:26,780 client directory to do so. 65 00:04:27,000 --> 00:04:34,620 We're going to add on an additional argument to this thing we'll say dash dash prefix client like so. 66 00:04:34,980 --> 00:04:41,480 So this essentially says run the command NPM run start from within the client directory. 67 00:04:41,610 --> 00:04:47,310 So go into the client directory where our new re-act project is sitting and start that development server 68 00:04:47,340 --> 00:04:48,740 up. 69 00:04:49,030 --> 00:04:54,570 OK so now we've got one command to start up our backend one command to start up the client. 70 00:04:54,570 --> 00:04:59,680 Now we will combine the two of them together by creating one more commands. 71 00:05:00,360 --> 00:05:03,930 So I'm going to call this new command and this is going to be very confusing. 72 00:05:03,930 --> 00:05:10,590 Just very briefly I want to call this new one death notice so we still have an old script up here called 73 00:05:10,590 --> 00:05:10,990 dev. 74 00:05:11,010 --> 00:05:15,310 I'm going to change this old one to be called server. 75 00:05:15,630 --> 00:05:18,810 So that's how we were starting up our back and server previously right. 76 00:05:18,810 --> 00:05:20,730 We were running NPM run dev. 77 00:05:20,730 --> 00:05:23,080 So I would make sure that just stays consistent. 78 00:05:23,100 --> 00:05:27,480 So we're going to make sure that we start up our server now by running the command and run server. 79 00:05:27,660 --> 00:05:28,170 We're not. 80 00:05:28,380 --> 00:05:31,090 We are not going to actually run this thing by hand-write here. 81 00:05:31,110 --> 00:05:36,720 They will both be both the server and the client will be started up by the dev script. 82 00:05:36,780 --> 00:05:37,010 OK. 83 00:05:37,020 --> 00:05:42,990 So inside of here for this script we're going to run the command concurrently please triple check your 84 00:05:42,990 --> 00:05:44,360 spelling on this one. 85 00:05:44,490 --> 00:05:49,080 And when concurrently is executed it's going to run two separate commands. 86 00:05:49,080 --> 00:05:57,810 The first one is going to be forward slash double quotes NPM run server forward slash double quotes 87 00:05:59,040 --> 00:06:05,510 and I'm going to put a space in and another forward slash double quotes NPM run client. 88 00:06:05,520 --> 00:06:08,570 And then again forward slash or I keep saying forward slash. 89 00:06:08,570 --> 00:06:12,560 I apologize these are all backslashes my mistake and they're going to close it off. 90 00:06:12,580 --> 00:06:15,380 Lexa OK. 91 00:06:15,450 --> 00:06:16,460 So that's pretty much it. 92 00:06:16,470 --> 00:06:21,360 Now the last thing we have to do is install concurrently as an MP module and then we can test this entire 93 00:06:21,360 --> 00:06:27,870 thing out when we execute concurrently or we execute really the def command right here concurrently 94 00:06:27,870 --> 00:06:34,410 is going to take this command and this command right here and execute both them at the exact same time. 95 00:06:34,410 --> 00:06:39,300 Now if you're curious about these backslashes that we've been using in here they are to escape these 96 00:06:39,320 --> 00:06:43,560 double quotes because remember everything in this file has to have double quotes around it. 97 00:06:43,590 --> 00:06:49,410 So if we did not escape it essentially whatever's parsing this file right here would think that we actually 98 00:06:49,410 --> 00:06:53,720 want to end this script early like this would be the whole script right here and now. 99 00:06:53,790 --> 00:06:59,100 NPM run server right here this text would be not enclosed in quotes and so would be a syntax error. 100 00:06:59,220 --> 00:07:01,420 And so that's the only reason we're using these backslashes. 101 00:07:01,440 --> 00:07:03,970 Were trying to escape the double quotes. 102 00:07:04,860 --> 00:07:09,750 OK so let's install occur concurrently and give this a shot back at my terminal and make sure that I'm 103 00:07:09,750 --> 00:07:14,700 still inside the server directory or doing human stall dashed out safe. 104 00:07:15,180 --> 00:07:16,980 Concurrently. 105 00:07:17,880 --> 00:07:23,190 That's a really small module so it should only take a second or two to install and then after that is 106 00:07:23,190 --> 00:07:28,320 finished installing we can then start up both the client and the server at the same time by running 107 00:07:28,320 --> 00:07:30,260 the command NPM run death. 108 00:07:30,720 --> 00:07:31,040 OK. 109 00:07:31,050 --> 00:07:32,510 So it's all done well now. 110 00:07:32,520 --> 00:07:35,060 Execute NPM run dev. 111 00:07:35,250 --> 00:07:40,850 And when we do so we're going to start to see two sets of outputs appear on the screen at the same time. 112 00:07:40,860 --> 00:07:43,020 So here is our node 1 stuff right here. 113 00:07:43,350 --> 00:07:48,360 And then in just a second we will also see starting the development server which is the message that 114 00:07:48,360 --> 00:07:52,060 gets emitted by our re-act development server. 115 00:07:52,650 --> 00:07:54,300 Ok so this is definitely looking pretty good. 116 00:07:54,300 --> 00:07:59,940 Let's just kind of let it run its course just to make sure everything is running okay. 117 00:08:00,000 --> 00:08:00,760 Any second now. 118 00:08:00,780 --> 00:08:01,650 OK there we go. 119 00:08:01,710 --> 00:08:06,890 So now we can open our browser back up refresh the page at localhost 3000. 120 00:08:06,900 --> 00:08:08,430 Everything here looks good. 121 00:08:08,430 --> 00:08:13,980 And of course we can still access our server over on this other port that we have been using previously 122 00:08:14,220 --> 00:08:16,020 localhost 5000. 123 00:08:16,030 --> 00:08:19,790 And let's do like say API slash current user. 124 00:08:20,390 --> 00:08:23,460 And if I go over here I am still logged in. 125 00:08:23,820 --> 00:08:24,230 OK. 126 00:08:24,330 --> 00:08:25,650 So this is looking pretty good. 127 00:08:25,680 --> 00:08:29,580 We now have both the client and the server running at the same time. 128 00:08:29,610 --> 00:08:33,330 So like I said getting these things working together is not the worst thing in the world. 129 00:08:33,510 --> 00:08:38,100 All we did was run this simple script right here to get both them running at the same time and really 130 00:08:38,100 --> 00:08:43,140 at the end the day we barely even needed this right we could have just ran the two separate terminal 131 00:08:43,140 --> 00:08:44,750 windows to get things working. 132 00:08:44,760 --> 00:08:51,910 So again I can't say it enough getting the re-act server in our back and API to work is not that bad. 133 00:08:52,490 --> 00:08:52,730 OK. 134 00:08:52,740 --> 00:08:53,700 So this is looking great. 135 00:08:53,850 --> 00:08:56,430 Let's now take a break and continue in the next section.