1 00:00:00,400 --> 00:00:03,210 Okay, so now we're going to start on our back end. 2 00:00:03,220 --> 00:00:07,300 So right now we have a front end folder and we just have a git ignore in the root. 3 00:00:07,300 --> 00:00:10,990 So I'm currently running the React dev server from the front end folder. 4 00:00:10,990 --> 00:00:12,910 I'm going to just stop that for now. 5 00:00:12,910 --> 00:00:19,390 And what I'm going to do is keep this terminal open, but go to my other terminal here, which is in 6 00:00:19,390 --> 00:00:22,690 the root because right now we're going to be working in the root. 7 00:00:22,690 --> 00:00:29,320 So first thing we want to do is create a server side package.json and any dependencies that we're going 8 00:00:29,320 --> 00:00:33,190 to install are going to go into a node modules folder in the root. 9 00:00:33,190 --> 00:00:38,680 So let's go ahead and run NPM init and we're just going to go through the questions here. 10 00:00:38,680 --> 00:00:42,730 So for the package name I'll stick with Pro shop V to version. 11 00:00:42,730 --> 00:00:47,260 I'm going to put 2.00.0, but you guys don't have to. 12 00:00:47,260 --> 00:00:53,980 This is just because I already have the first version in another repository and then description will 13 00:00:53,980 --> 00:00:57,490 say e-commerce. 14 00:00:58,650 --> 00:01:04,700 Application built with the mern stack. 15 00:01:06,370 --> 00:01:07,990 And then entry point. 16 00:01:08,020 --> 00:01:12,010 I'm actually going to use server dot JS instead of index. 17 00:01:12,010 --> 00:01:13,660 Just my preference. 18 00:01:13,750 --> 00:01:16,310 And let's see, we don't need any of this stuff. 19 00:01:16,330 --> 00:01:19,570 Author You guys are free to put your own name. 20 00:01:19,720 --> 00:01:25,390 And then I'm going to use an MIT license and that's that'll be good. 21 00:01:25,570 --> 00:01:30,430 All right, so now we have our package dot Json on the in the root here. 22 00:01:30,580 --> 00:01:31,540 Now. 23 00:01:32,530 --> 00:01:39,730 When it comes to modules and bringing in JavaScript modules and packages by default. 24 00:01:39,730 --> 00:01:46,180 With Node.js, it uses Commonjs, which is the you know, const something equals require something. 25 00:01:46,180 --> 00:01:47,910 It's the require syntax. 26 00:01:47,920 --> 00:01:49,420 I actually don't want to use that. 27 00:01:49,420 --> 00:01:55,060 I want to use the Is module syntax just like we use on the front end where we say import something from 28 00:01:55,060 --> 00:01:55,840 something. 29 00:01:55,840 --> 00:02:03,160 So in order to do that we just have to go to the package.json and we need to add a type module value. 30 00:02:03,160 --> 00:02:09,520 So I'm going to go, let's see, I'll go right under the right, under the description here and I'm 31 00:02:09,520 --> 00:02:14,320 going to put in type and I'm going to set that to module. 32 00:02:14,320 --> 00:02:15,610 So here we have Commonjs. 33 00:02:15,640 --> 00:02:16,510 That's the default. 34 00:02:16,510 --> 00:02:20,290 I'm going to use module that means that we can use is modules. 35 00:02:20,620 --> 00:02:22,240 All right, So we'll save that. 36 00:02:23,020 --> 00:02:27,250 Now our entry point is going to be in a folder called Back End. 37 00:02:27,250 --> 00:02:28,750 So let's create that. 38 00:02:28,750 --> 00:02:33,430 And then inside back end, we're going to have a server.js file. 39 00:02:33,430 --> 00:02:39,160 That's just what I like to call it, if you want to call it App.js or Index.js, that's fine as well, 40 00:02:39,160 --> 00:02:43,600 but I usually stick with server when it's my my server's entry point. 41 00:02:43,600 --> 00:02:46,600 So for now, let's just do a console log. 42 00:02:46,600 --> 00:02:53,590 We'll just do a Hello world console log and then in the package.json in the route I'm going to trade 43 00:02:53,620 --> 00:03:00,550 test trade, I'm going to replace test with Start and then we're going to get rid of this and we want 44 00:03:00,550 --> 00:03:02,200 it to run that server file. 45 00:03:02,200 --> 00:03:07,510 So we're going to say Node and then run back end because that's the folder it's in. 46 00:03:07,510 --> 00:03:11,320 So back end slash server.js. 47 00:03:12,140 --> 00:03:13,370 So let's save that. 48 00:03:13,370 --> 00:03:17,630 And now if I come down here and I run from the root npm start. 49 00:03:18,150 --> 00:03:21,050 You should see the console log of Hello World. 50 00:03:21,060 --> 00:03:23,280 So let's close up package.json. 51 00:03:23,280 --> 00:03:28,980 And before we do anything else in our server.js, let's install our express dependencies. 52 00:03:28,980 --> 00:03:35,160 So make sure you're in the root, not in the front end and say NPM install express. 53 00:03:35,250 --> 00:03:40,980 So that's the web framework we'll be using on the back end to create our routes and so on. 54 00:03:40,980 --> 00:03:47,040 So in the server, let's get rid of this console log now and we're going to import Express. 55 00:03:47,040 --> 00:03:49,710 So I'm using the ES module syntax. 56 00:03:49,710 --> 00:03:55,050 So we should be able to say import express from express. 57 00:03:55,080 --> 00:04:03,210 The default Commonjs syntax would be like this const express equals require express. 58 00:04:03,210 --> 00:04:07,800 But I want to stick to this because that's ultimately that's what we're using on the front end. 59 00:04:07,800 --> 00:04:12,840 So I don't want to have two different standards, even though that's, you know, I've done it plenty 60 00:04:12,840 --> 00:04:18,060 of times in the past, but more recently I've been using ES modules in the back end. 61 00:04:18,060 --> 00:04:23,280 So we have express let's, let's also create a variable for a port. 62 00:04:23,280 --> 00:04:26,970 So I'm going to say const port and set that to 5000. 63 00:04:27,000 --> 00:04:29,550 We have the front end server running on 3000. 64 00:04:29,550 --> 00:04:34,980 So I want the back end running on 5000 and then let's initialize Express. 65 00:04:35,010 --> 00:04:38,550 Okay, so we just creating a variable called app setting it to express. 66 00:04:38,550 --> 00:04:40,590 Then we're going to create our first route. 67 00:04:40,590 --> 00:04:42,720 So let's say app dot get. 68 00:04:42,900 --> 00:04:49,530 So we're making a get request and this one will just be two slash and I'm going to just not use copilot 69 00:04:49,530 --> 00:04:50,400 for this. 70 00:04:50,550 --> 00:04:51,840 We'll just type it out. 71 00:04:52,320 --> 00:04:52,500 All right. 72 00:04:52,560 --> 00:04:53,760 And then we have a function. 73 00:04:53,760 --> 00:04:57,660 You can use a regular function or an arrow function as the callback here. 74 00:04:57,660 --> 00:05:02,280 And this is going to take in a request and a response object. 75 00:05:02,640 --> 00:05:03,000 All right. 76 00:05:03,000 --> 00:05:07,860 And then what we want to do here, whoops, that should be a comma, not a period. 77 00:05:08,600 --> 00:05:15,290 And then what I'm going to do here is just take my response object and call send and just send some 78 00:05:15,320 --> 00:05:17,710 text that says API. 79 00:05:18,150 --> 00:05:20,420 Yeah, we'll just say API is running. 80 00:05:20,810 --> 00:05:21,080 All right. 81 00:05:21,080 --> 00:05:25,280 So that's our first route and then we need to start the server up. 82 00:05:25,280 --> 00:05:33,140 So we want to take our app variable and we want to listen on the port that I created above and then 83 00:05:33,140 --> 00:05:39,440 we'll just have an arrow function here that will say console dot log and we'll put in some backticks 84 00:05:39,440 --> 00:05:46,610 and we'll say server running on port and then whatever that port variable is, which is 5000 right now. 85 00:05:46,610 --> 00:05:47,870 So let's save that. 86 00:05:47,870 --> 00:05:55,220 And if we come down here and run NPM start, we should see server running on port 5000, right? 87 00:05:55,220 --> 00:06:03,230 And then if I go over to the browser here and I go to localhost 5000, I'm going to see API is running. 88 00:06:03,710 --> 00:06:07,250 Now, we're not really going to have anything on the home route here. 89 00:06:07,250 --> 00:06:14,460 Ultimately, this is going to load our React application if we go to our root domain, which obviously 90 00:06:14,460 --> 00:06:19,170 won't be localhost 5000 when we deploy, but it is for our production. 91 00:06:19,530 --> 00:06:26,850 But we will have routes like slash API slash products and that will give us all of our products and 92 00:06:26,850 --> 00:06:27,600 so on. 93 00:06:27,930 --> 00:06:35,280 So for data, just to begin with, we're going to just use a file just like we did in the front end, 94 00:06:35,280 --> 00:06:35,760 right? 95 00:06:35,760 --> 00:06:39,720 In fact, what I'm going to do is in our front end where we have our products. 96 00:06:39,750 --> 00:06:45,690 JS I don't want to move this because then our front end will break because right now that's what it's 97 00:06:45,690 --> 00:06:46,050 using. 98 00:06:46,050 --> 00:06:47,850 But I do want to just copy it. 99 00:06:47,850 --> 00:06:52,890 So if we can just copy this and then bring it into our back end. 100 00:06:52,890 --> 00:06:56,280 And in the back end we'll create a folder called Data. 101 00:06:57,060 --> 00:07:00,540 And then let's pop that products in there. 102 00:07:00,620 --> 00:07:00,830 Okay. 103 00:07:00,840 --> 00:07:03,780 So right now we have two separate products files. 104 00:07:04,050 --> 00:07:06,930 Right now, the front end is using the front end products. 105 00:07:06,930 --> 00:07:13,530 JS But ultimately I want to be able to have it, get it from this back end, and then ultimately after 106 00:07:13,530 --> 00:07:15,750 that, we'll have it from the database. 107 00:07:16,320 --> 00:07:20,240 So let's create a route that will serve those products. 108 00:07:20,250 --> 00:07:23,610 So first thing I'm going to do is bring that in. 109 00:07:23,610 --> 00:07:31,410 Actually, let's go up here and let's say import products from data slash products. 110 00:07:31,410 --> 00:07:36,990 Now remember, since we're using ES modules on the back end here, you do have to use Dot JS for your 111 00:07:36,990 --> 00:07:38,910 own JavaScript modules. 112 00:07:39,490 --> 00:07:45,610 And then I'm going to go under this route here and let's say we'll just use copilot here. 113 00:07:45,610 --> 00:07:47,500 So we'll say App.get. 114 00:07:47,500 --> 00:07:54,100 So we'll get request to API products and then we're just sending a Json response with the products. 115 00:07:54,100 --> 00:07:57,790 So now if I save that, I'm going to have to restart the server. 116 00:07:57,940 --> 00:08:01,030 I'm going to in the next video, install something called Nodemon. 117 00:08:01,030 --> 00:08:02,470 So we don't have to keep doing this. 118 00:08:02,470 --> 00:08:06,940 But right now we do have to just run NPM, start again. 119 00:08:06,940 --> 00:08:16,630 And then if we go to slash API products, we should see some Json with our products and I do have an 120 00:08:16,630 --> 00:08:17,710 extension installed. 121 00:08:17,710 --> 00:08:21,220 I believe it's called Json formatter. 122 00:08:21,340 --> 00:08:25,540 I have so many extensions installed, I'm not sure which one it is, but I believe it's called Json 123 00:08:25,540 --> 00:08:27,970 formatter and it makes it look nice and neat. 124 00:08:27,970 --> 00:08:32,200 So if yours doesn't look like this and you want to install that extension, you can. 125 00:08:33,470 --> 00:08:33,830 All right. 126 00:08:33,830 --> 00:08:36,049 So now we're serving all the products. 127 00:08:36,049 --> 00:08:39,530 Let's create a route for a single product. 128 00:08:39,530 --> 00:08:41,450 So for that we're going to do. 129 00:08:42,340 --> 00:08:45,070 Let's just go ahead and paste this in right here. 130 00:08:45,070 --> 00:08:51,250 So for that, we're going to do API slash products, slash colon ID, which is a placeholder for whatever 131 00:08:51,250 --> 00:08:57,070 the ID, And then right now, since we only have our products in a JavaScript file, basically it's 132 00:08:57,070 --> 00:08:57,890 just an array. 133 00:08:57,910 --> 00:09:05,320 We're using find to say, well, you know, go through the products and if the product ID or underscore 134 00:09:05,350 --> 00:09:11,290 ID matches the ID that's in the URL, then we're going to return that product. 135 00:09:11,380 --> 00:09:11,890 Okay. 136 00:09:11,890 --> 00:09:18,070 So now if we save and we go to, let's say, products, well, we got to restart the server. 137 00:09:19,500 --> 00:09:22,110 And let's go to product one. 138 00:09:22,410 --> 00:09:23,250 And there we go. 139 00:09:23,250 --> 00:09:24,840 We get the first product. 140 00:09:25,410 --> 00:09:27,660 Okay, So very, very simple right now. 141 00:09:27,660 --> 00:09:33,180 But it gives us enough to start to think about fetching data from our front end. 142 00:09:33,510 --> 00:09:38,130 But before we do that, I just want to do a couple small things in the back end. 143 00:09:38,160 --> 00:09:44,820 I want to be able to just have this, you know, watch the file and so we don't have to restart it every 144 00:09:44,820 --> 00:09:46,120 time we make a change. 145 00:09:46,140 --> 00:09:51,780 We're also going to use a tool called concurrently that will allow us to run our back end server and 146 00:09:51,780 --> 00:09:54,360 our front end React server at the same time.