1 00:00:00,050 --> 00:00:00,390 All right. 2 00:00:00,410 --> 00:00:06,830 And our first task is going to be setting up ES6 modules on the server. 3 00:00:06,830 --> 00:00:10,520 So essentially, remember how we worked in the client. 4 00:00:11,500 --> 00:00:15,430 Every time we needed something, we just went with import syntax. 5 00:00:15,430 --> 00:00:20,030 For the longest time, Node was using a little bit different approach. 6 00:00:20,050 --> 00:00:22,060 It's called Commonjs. 7 00:00:22,090 --> 00:00:24,250 Again, the idea is exactly the same. 8 00:00:24,460 --> 00:00:28,480 Essentially, you're not writing your entire code in one file. 9 00:00:28,780 --> 00:00:34,780 You are creating folders and files and all that, and then you just import whatever you need. 10 00:00:34,810 --> 00:00:37,660 And technically you can still use commonjs. 11 00:00:37,690 --> 00:00:44,260 Again, the idea is going to be exactly the same, but since we're using ES6 modules on the front end, 12 00:00:44,260 --> 00:00:46,030 it kind of makes sense that. 13 00:00:46,690 --> 00:00:48,610 We do the same thing on the back end. 14 00:00:48,640 --> 00:00:52,070 Now it's not happening right out of the gate. 15 00:00:52,090 --> 00:00:56,890 First, we need to navigate to Package.json in the root. 16 00:00:56,920 --> 00:01:02,740 Again, I'm going to be annoying and I'm just going to keep repeating that it's in the root and effectively 17 00:01:02,740 --> 00:01:05,980 in here we want to go with Json syntax. 18 00:01:05,980 --> 00:01:10,510 So essentially we need to go with double quotation marks. 19 00:01:10,510 --> 00:01:12,190 Yes, that's important. 20 00:01:12,310 --> 00:01:17,180 And notice right away we get the suggestion and we want to go with module. 21 00:01:17,200 --> 00:01:20,720 Let's save it and let's create a test file. 22 00:01:20,740 --> 00:01:21,210 You know what? 23 00:01:21,220 --> 00:01:22,560 Let's create two of them. 24 00:01:22,570 --> 00:01:27,550 Let's call this test, um, named. 25 00:01:28,550 --> 00:01:35,510 JS and also create test and default. 26 00:01:35,970 --> 00:01:37,560 JS Okay, good. 27 00:01:37,590 --> 00:01:39,630 Then in the test named. 28 00:01:40,530 --> 00:01:43,200 Let's create a value. 29 00:01:43,200 --> 00:01:47,910 And if we want to export something, we simply add export in front of it. 30 00:01:47,910 --> 00:01:55,620 And I fully understand that this might be a little bit redundant since we did use the ES6 modules already 31 00:01:55,710 --> 00:02:00,090 in the client, But I just want to make sure that we all are on the same page. 32 00:02:00,090 --> 00:02:07,410 So for example, over here I could go with value and set it equal to 42 and I'm sorry, I'm setting 33 00:02:07,410 --> 00:02:08,340 this up in a default. 34 00:02:08,340 --> 00:02:10,370 This should be named My bad. 35 00:02:10,380 --> 00:02:19,920 And then let's go over here and let's say the test default one some value and I'm going to set it equal 36 00:02:19,920 --> 00:02:22,230 to whatever some value. 37 00:02:22,960 --> 00:02:27,100 Basically I want to showcase that we have a few approaches. 38 00:02:27,920 --> 00:02:34,280 One is the named one where we have the variable and we just add over here the export in front of it. 39 00:02:34,280 --> 00:02:39,950 And when it comes to default, just like on the front end, we get one default export per file. 40 00:02:39,950 --> 00:02:47,600 So let's say if I want to set this one up as a default, I go with export and then default and. 41 00:02:48,550 --> 00:02:49,900 Some value. 42 00:02:49,900 --> 00:02:51,880 So backing the server. 43 00:02:51,880 --> 00:03:00,130 If I want to access the named one we need to go import then value since names need to match over here 44 00:03:00,130 --> 00:03:04,480 in this case from and then we navigate to a test named. 45 00:03:04,480 --> 00:03:08,410 And when it comes to a default one, well we can change it. 46 00:03:08,410 --> 00:03:11,470 So in here I can call this a random value. 47 00:03:11,470 --> 00:03:17,290 And again, we're looking from and we want to get it from the test default. 48 00:03:17,290 --> 00:03:24,250 So if we log both of these values over here, one is going to be value and one is going to be a random 49 00:03:24,250 --> 00:03:24,580 value. 50 00:03:24,580 --> 00:03:32,500 It's not going to be probably surprise when I run node server that in the. 51 00:03:33,200 --> 00:03:33,750 Console. 52 00:03:33,770 --> 00:03:34,770 I'll see the values. 53 00:03:34,790 --> 00:03:37,310 Now, here's the major, major, major, major. 54 00:03:37,340 --> 00:03:37,720 Gotcha. 55 00:03:37,730 --> 00:03:45,580 We need to remember when we work with ES6 modules on a node, we do need to add this JS extension. 56 00:03:45,590 --> 00:03:50,780 So remember when we were working in the client, I mean, we were not adding it, right? 57 00:03:50,780 --> 00:03:53,180 We just went with the file name and we're good to go. 58 00:03:53,210 --> 00:04:01,130 When you're working in Node and you use ES6 modules, yes, we need to add the JS extension, so we 59 00:04:01,130 --> 00:04:02,750 need to navigate here. 60 00:04:02,750 --> 00:04:04,040 All of this is correct. 61 00:04:04,040 --> 00:04:05,480 We just need to add these. 62 00:04:05,510 --> 00:04:08,090 JS Again, let's navigate back. 63 00:04:09,130 --> 00:04:10,270 To our. 64 00:04:11,090 --> 00:04:12,200 Integrated terminal. 65 00:04:12,200 --> 00:04:14,930 If you want to go back, just press arrow up. 66 00:04:15,410 --> 00:04:19,930 Effectively, you can just look for the latest commands and check it out. 67 00:04:19,940 --> 00:04:22,990 Now we have 42 and some value. 68 00:04:23,000 --> 00:04:28,130 Now there are some variations to this and I'll try to cover them during the course. 69 00:04:28,130 --> 00:04:30,680 Basically the idea again is the same. 70 00:04:30,680 --> 00:04:35,120 We just can have a little bit different syntax, but the main idea is not going to change. 71 00:04:35,120 --> 00:04:38,780 So we have one default per file which you can use. 72 00:04:38,780 --> 00:04:43,310 And of course then when you import, you can name this however you please. 73 00:04:43,310 --> 00:04:48,980 And then with the named ones, yes, you do need to use the same value. 74 00:04:49,250 --> 00:04:56,480 And in order to get started with modules, with ES6 modules and Node, we need to type type module in 75 00:04:56,480 --> 00:05:04,730 package.json and whenever we want to use our modules, we need to remember to use the JS extension, 76 00:05:04,730 --> 00:05:07,910 which probably I'll forget as I'm working on a project. 77 00:05:07,910 --> 00:05:15,000 Just a fair warning since it's very easy to get used to the client, one where you don't have to do 78 00:05:15,000 --> 00:05:20,550 that, and then when you start working on a node you're like, Oh wow, I need to keep typing those 79 00:05:20,580 --> 00:05:22,050 JS extensions. 80 00:05:22,080 --> 00:05:23,250 Hopefully that is clear. 81 00:05:23,250 --> 00:05:26,730 And now we can move on to the next topic.