1 00:00:02,160 --> 00:00:05,180 So we did refactor this code as I told you 2 00:00:05,180 --> 00:00:06,850 but still, I also told you 3 00:00:06,850 --> 00:00:09,038 that it would not work like that. 4 00:00:09,038 --> 00:00:10,463 Why? 5 00:00:10,463 --> 00:00:12,750 Because as I mentioned before, 6 00:00:12,750 --> 00:00:15,630 just referring to functions like this 7 00:00:15,630 --> 00:00:19,523 won't work if they do sit in another file. 8 00:00:20,380 --> 00:00:23,600 That does actually work in the browser 9 00:00:23,600 --> 00:00:25,890 but not with NodeJS. 10 00:00:25,890 --> 00:00:30,100 There you have a strict separation between files. 11 00:00:30,100 --> 00:00:33,800 Therefore, by the way, in restaurant-data.js, 12 00:00:33,800 --> 00:00:35,810 the code would also not work 13 00:00:35,810 --> 00:00:39,400 because I'm accessing the fs thing here, 14 00:00:39,400 --> 00:00:43,100 which is coming from the built-in fs package, 15 00:00:43,100 --> 00:00:45,490 which is part of NodeJS. 16 00:00:45,490 --> 00:00:49,050 And whilst I am requiring this here in app.js, 17 00:00:49,050 --> 00:00:53,490 I am not requiring it here in restaurant-data.js, 18 00:00:53,490 --> 00:00:56,220 and here, the same thing applies. 19 00:00:56,220 --> 00:01:00,250 Just because some function or some value 20 00:01:00,250 --> 00:01:02,880 is available in file A 21 00:01:02,880 --> 00:01:06,203 does not make it available in file B. 22 00:01:07,120 --> 00:01:10,560 So if we wanna use the file system package here 23 00:01:10,560 --> 00:01:12,720 in restaurant-data.js, 24 00:01:12,720 --> 00:01:16,320 we again have to require it here like this 25 00:01:16,320 --> 00:01:18,803 by calling require fs again. 26 00:01:20,340 --> 00:01:22,870 And that is a super important rule. 27 00:01:22,870 --> 00:01:25,160 If you wanna use a certain value, 28 00:01:25,160 --> 00:01:28,890 or object or function in a file, 29 00:01:28,890 --> 00:01:31,490 and it's not defined in that file, 30 00:01:31,490 --> 00:01:34,380 then you have to require it. 31 00:01:34,380 --> 00:01:36,590 Now, that will fix this error. 32 00:01:36,590 --> 00:01:38,380 But it does not fix the issue 33 00:01:38,380 --> 00:01:41,390 that these functions, which we wrote ourselves 34 00:01:41,390 --> 00:01:45,493 in restaurant-data.js won't be available in app.js. 35 00:01:46,650 --> 00:01:49,840 But we can fix them with the new knowledge we got. 36 00:01:49,840 --> 00:01:54,380 All we have to do is require our own file. 37 00:01:54,380 --> 00:01:57,570 And that is something we haven't done up to this point 38 00:01:57,570 --> 00:02:01,110 but it is something which hopefully makes a lot of sense. 39 00:02:01,110 --> 00:02:03,940 You can require built-in packages 40 00:02:03,940 --> 00:02:07,550 and you can require third-party packages. 41 00:02:07,550 --> 00:02:11,080 You can also require your own files, 42 00:02:11,080 --> 00:02:14,420 which might contain extra functionality. 43 00:02:14,420 --> 00:02:16,163 And that's what we'll do here. 44 00:02:17,520 --> 00:02:20,370 I'll add it below the built-in packages 45 00:02:20,370 --> 00:02:23,060 and below the third-party packages, 46 00:02:23,060 --> 00:02:25,010 not because that's required 47 00:02:25,010 --> 00:02:27,590 but because that's a common way of structuring 48 00:02:27,590 --> 00:02:30,686 your different requirements so to say. 49 00:02:30,686 --> 00:02:32,740 I'll add my own requirement 50 00:02:32,740 --> 00:02:36,713 for my own file below these require statements. 51 00:02:38,690 --> 00:02:41,320 And for that, I will add a constant, 52 00:02:41,320 --> 00:02:46,320 which I name resData for restaurant data, 53 00:02:46,940 --> 00:02:50,850 and I will require my own file here. 54 00:02:50,850 --> 00:02:54,250 Now, how do you require your own file? 55 00:02:54,250 --> 00:02:57,383 You don't just use the file name. 56 00:02:58,280 --> 00:02:59,500 That would not work, 57 00:02:59,500 --> 00:03:02,740 no matter if you add an extension or not. 58 00:03:02,740 --> 00:03:07,260 Instead, you have to add a path to your own file. 59 00:03:07,260 --> 00:03:10,010 You don't add a path for the built-in 60 00:03:10,010 --> 00:03:11,860 and third-party packages. 61 00:03:11,860 --> 00:03:14,030 There you just use the package name. 62 00:03:14,030 --> 00:03:17,430 But for your own files, you add a full path. 63 00:03:17,430 --> 00:03:19,960 So if you that restaurant-data.js file 64 00:03:19,960 --> 00:03:23,950 would be in the same folder as app.js, 65 00:03:23,950 --> 00:03:26,360 then you would add ./ 66 00:03:26,360 --> 00:03:30,370 which simply creates a relative path in NodeJS, 67 00:03:30,370 --> 00:03:34,110 telling NodeJS that this file is a neighbor, 68 00:03:34,110 --> 00:03:38,720 a sibling file of the file in which you have this code. 69 00:03:38,720 --> 00:03:41,720 And you do omit the file extension. 70 00:03:41,720 --> 00:03:44,793 You don't have to add .js here. 71 00:03:45,870 --> 00:03:49,330 Here, however, restaurant-data is not in the same folder 72 00:03:49,330 --> 00:03:52,250 as app.js, instead it is in a sub folder. 73 00:03:52,250 --> 00:03:54,510 It's in the util folder. 74 00:03:54,510 --> 00:03:59,510 And hence, the correct path would be ./util/restaurant-data. 75 00:04:01,670 --> 00:04:05,770 That is how you express a path in NodeJS 76 00:04:05,770 --> 00:04:08,080 in such a require statement. 77 00:04:08,080 --> 00:04:11,540 Folders and files are separated with slashes 78 00:04:11,540 --> 00:04:13,600 and you start with ./ 79 00:04:13,600 --> 00:04:18,600 to make it clear that this path is relative from app.js 80 00:04:18,750 --> 00:04:19,853 in this case. 81 00:04:21,959 --> 00:04:24,870 That's how you include this file. 82 00:04:24,870 --> 00:04:26,960 However, there is an extra step, 83 00:04:26,960 --> 00:04:29,280 which we also have to perform. 84 00:04:29,280 --> 00:04:31,778 This is the correct way of requiring it 85 00:04:31,778 --> 00:04:36,170 but by default, your files don't expose anything 86 00:04:36,170 --> 00:04:37,540 to other files. 87 00:04:37,540 --> 00:04:40,450 So just because we have these two functions 88 00:04:40,450 --> 00:04:44,610 and this constant here in this restaurant-data.js file 89 00:04:44,610 --> 00:04:48,830 does not mean that this is then automatically requireable 90 00:04:49,730 --> 00:04:51,120 by other files. 91 00:04:51,120 --> 00:04:52,133 It's not. 92 00:04:53,850 --> 00:04:57,770 Instead, you have to explicitly mark which parts 93 00:04:57,770 --> 00:05:01,480 of this file should be made available to other files 94 00:05:02,360 --> 00:05:06,260 and you do that by adding an extra instruction at the bottom 95 00:05:06,260 --> 00:05:08,050 of this file. 96 00:05:08,050 --> 00:05:12,600 You write module.exports 97 00:05:12,600 --> 00:05:16,017 and set this equal to a JavaScript object 98 00:05:16,017 --> 00:05:19,280 in which you can now add the different things 99 00:05:19,280 --> 00:05:20,773 which you wanna expose. 100 00:05:21,860 --> 00:05:25,670 For example, if I wanna expose getStoredRestaurants, 101 00:05:25,670 --> 00:05:28,483 I could add it like this. 102 00:05:29,950 --> 00:05:31,830 Here I have the key name, 103 00:05:31,830 --> 00:05:36,290 which I can use in other files to refer to this function, 104 00:05:36,290 --> 00:05:38,660 and here I have a pointer to the thing 105 00:05:38,660 --> 00:05:40,720 which I wanna expose. 106 00:05:40,720 --> 00:05:43,600 And very often, you'll have the same names here 107 00:05:43,600 --> 00:05:45,823 but you could choose different names. 108 00:05:47,050 --> 00:05:50,320 So this name on the right side of the colon here 109 00:05:50,320 --> 00:05:54,030 is the name of the thing which you wanna expose 110 00:05:54,030 --> 00:05:55,530 to other files. 111 00:05:55,530 --> 00:05:57,490 So this is not up to you. 112 00:05:57,490 --> 00:05:59,880 If you do change it down here, 113 00:05:59,880 --> 00:06:01,700 you also have to change it up here 114 00:06:01,700 --> 00:06:03,313 in the function definition. 115 00:06:04,390 --> 00:06:06,540 This name on the left side of the colon, 116 00:06:06,540 --> 00:06:08,450 on the other hand, is up to you, 117 00:06:08,450 --> 00:06:10,730 and is the name by which you are able 118 00:06:10,730 --> 00:06:14,670 to then use this function in other files. 119 00:06:14,670 --> 00:06:16,370 Here I'll stick to the same name 120 00:06:16,370 --> 00:06:19,033 but I could choose a different name here on the left. 121 00:06:19,950 --> 00:06:23,650 Very important, you don't add parentheses here, 122 00:06:23,650 --> 00:06:26,600 you don't execute getStoredRestaurants. 123 00:06:26,600 --> 00:06:29,440 Instead you just use the name of the function 124 00:06:29,440 --> 00:06:32,100 because you don't wanna expose the result 125 00:06:32,100 --> 00:06:33,860 of calling that function 126 00:06:33,860 --> 00:06:35,610 but the function overall 127 00:06:35,610 --> 00:06:38,870 so that it can be called in other files. 128 00:06:38,870 --> 00:06:41,293 That's why you only use the name here. 129 00:06:42,780 --> 00:06:47,033 And then I add a comma to also expose storeRestaurants, 130 00:06:48,740 --> 00:06:53,633 and here I'll also point at storeRestaurants like this. 131 00:06:54,950 --> 00:06:57,280 And now with that, I am exposing, 132 00:06:57,280 --> 00:07:01,433 or exporting as it's called, these two functions. 133 00:07:02,500 --> 00:07:06,160 Now, because of this extra addition in app.js, 134 00:07:06,160 --> 00:07:09,940 requiring this file will actually work. 135 00:07:09,940 --> 00:07:13,270 And there, we now have this resData object, 136 00:07:13,270 --> 00:07:14,660 this name is up to you, 137 00:07:14,660 --> 00:07:16,640 which is in the end just this object, 138 00:07:16,640 --> 00:07:18,580 which you are exporting, 139 00:07:18,580 --> 00:07:21,920 so it will be an object with two methods 140 00:07:21,920 --> 00:07:25,010 because I am exposing two functions here 141 00:07:25,010 --> 00:07:28,030 and functions in an object become a method 142 00:07:28,030 --> 00:07:30,303 or we call them a method. 143 00:07:31,940 --> 00:07:35,510 So now we can use the resData object here in app.js 144 00:07:35,510 --> 00:07:36,900 to call these functions 145 00:07:36,900 --> 00:07:40,100 and that's then the last step we've gotta do. 146 00:07:40,100 --> 00:07:42,610 So if I wanna get my StoredRestaurants, 147 00:07:42,610 --> 00:07:46,150 I don't call getStoredRestaurants like this, 148 00:07:46,150 --> 00:07:50,723 but instead, I execute a resData.getStoredRestaurants. 149 00:07:51,720 --> 00:07:54,360 So I refer to this exported object 150 00:07:54,360 --> 00:07:57,633 and then there I call this specific method. 151 00:07:58,710 --> 00:08:00,910 And I'll do the same for storing. 152 00:08:00,910 --> 00:08:04,553 So for saving restaurants back into this JSON file. 153 00:08:05,750 --> 00:08:08,950 And now we can do the same in all the other places 154 00:08:08,950 --> 00:08:11,510 where we are getting our restaurants, 155 00:08:11,510 --> 00:08:13,680 like here when we get the details 156 00:08:13,680 --> 00:08:15,383 for a specific restaurant. 157 00:08:16,430 --> 00:08:19,230 I can now replace this code here 158 00:08:19,230 --> 00:08:23,760 with the resData.getstoredRestaurants, 159 00:08:23,760 --> 00:08:26,070 and then I just have to store the result 160 00:08:26,070 --> 00:08:29,170 of calling this function in a variable 161 00:08:29,170 --> 00:08:30,610 or constant here, 162 00:08:30,610 --> 00:08:32,770 and since I'm using storedRestaurants 163 00:08:32,770 --> 00:08:34,620 as a name everywhere here, 164 00:08:34,620 --> 00:08:39,193 I will just store it in a storedRestaurants constant. 165 00:08:41,150 --> 00:08:43,950 And the same here where I get all the restaurants. 166 00:08:43,950 --> 00:08:47,810 I replace this code here with this line 167 00:08:47,810 --> 00:08:50,080 where I call getStoredRestaurants 168 00:08:50,080 --> 00:08:54,443 and store that in a constant named storedRestaurants. 169 00:08:55,700 --> 00:08:58,020 Now, with that, if I save everything, 170 00:08:58,020 --> 00:09:00,650 this actually crashes and it crashes 171 00:09:00,650 --> 00:09:03,390 because in restaurant-data.js, 172 00:09:03,390 --> 00:09:06,300 I'm not just using the fs package 173 00:09:06,300 --> 00:09:10,310 but I'm, of course, also using the built-in path package. 174 00:09:10,310 --> 00:09:12,970 And I'm not requiring this here yet 175 00:09:12,970 --> 00:09:15,700 but as I mentioned, we should require everything 176 00:09:15,700 --> 00:09:18,880 that we rely on because just because it's required 177 00:09:18,880 --> 00:09:22,123 in another file doesn't make it available here. 178 00:09:23,040 --> 00:09:25,660 So to make this built-in path package available 179 00:09:25,660 --> 00:09:29,250 here as well, we should add this path constant, 180 00:09:29,250 --> 00:09:31,920 which we get by requiring path. 181 00:09:31,920 --> 00:09:33,703 So this built-in package. 182 00:09:36,040 --> 00:09:38,393 And that's another step which we need to take. 183 00:09:39,620 --> 00:09:41,350 Now, with that, we're almost done 184 00:09:41,350 --> 00:09:43,550 but now there is a subtle error, 185 00:09:43,550 --> 00:09:45,330 which we also have to fix 186 00:09:45,330 --> 00:09:48,410 to make sure that everything works. 187 00:09:48,410 --> 00:09:51,390 And that error is related to this line 188 00:09:51,390 --> 00:09:53,473 in restaurant-data.js. 189 00:09:54,900 --> 00:09:57,910 In there, I am constructing a path 190 00:09:57,910 --> 00:10:00,090 to this restaurants.json file 191 00:10:00,090 --> 00:10:02,883 and I copied over the code from app.js. 192 00:10:03,730 --> 00:10:08,730 This way of constructing a path was correct inside of app.js 193 00:10:08,760 --> 00:10:12,883 but it's not correct in this restaurant-data.js file. 194 00:10:13,839 --> 00:10:15,410 And it isn't correct here 195 00:10:15,410 --> 00:10:16,950 because what I'm doing here 196 00:10:16,950 --> 00:10:18,500 is I'm constructing a path 197 00:10:18,500 --> 00:10:21,240 where I start in the directory 198 00:10:21,240 --> 00:10:25,660 where this file is in, so in the util folder. 199 00:10:25,660 --> 00:10:27,910 Then I dive into a data folder 200 00:10:27,910 --> 00:10:30,283 and then there I look for restaurants.json. 201 00:10:31,950 --> 00:10:33,270 Now, this is incorrect 202 00:10:33,270 --> 00:10:34,890 because the data folder 203 00:10:34,890 --> 00:10:36,790 is not inside of util, 204 00:10:36,790 --> 00:10:39,913 it's instead on a higher level. 205 00:10:41,250 --> 00:10:43,480 Hence, we need to fix this path. 206 00:10:43,480 --> 00:10:46,800 I wanna start in my current directory util 207 00:10:46,800 --> 00:10:50,720 but then I first of all wanna go up one level 208 00:10:50,720 --> 00:10:52,310 to the project folder 209 00:10:52,310 --> 00:10:54,103 and then go into data. 210 00:10:55,330 --> 00:10:56,830 And we can easily do that 211 00:10:56,830 --> 00:11:00,680 by adding an extra segment here in path.join 212 00:11:00,680 --> 00:11:03,033 and that's the dot dot segment. 213 00:11:04,050 --> 00:11:05,710 Now, this might look strange 214 00:11:05,710 --> 00:11:07,430 but that's a standard way 215 00:11:07,430 --> 00:11:09,590 in programming of expressing 216 00:11:09,590 --> 00:11:13,360 that you wanna go to a higher level directory 217 00:11:13,360 --> 00:11:16,340 so that you wanna go to the parent directory 218 00:11:16,340 --> 00:11:18,793 of the directory you are currently in. 219 00:11:19,730 --> 00:11:21,910 So if this points to util, 220 00:11:21,910 --> 00:11:25,830 then this here, after going up one level, 221 00:11:25,830 --> 00:11:28,630 will point at the project folder. 222 00:11:28,630 --> 00:11:31,620 And then there we have a data folder 223 00:11:31,620 --> 00:11:33,043 into which we can dive. 224 00:11:34,420 --> 00:11:35,940 So that's a little adjustment, 225 00:11:35,940 --> 00:11:37,410 which we have to make here 226 00:11:37,410 --> 00:11:41,690 to navigate into the correct folder in our project 227 00:11:41,690 --> 00:11:44,493 that contains this restaurants.json file. 228 00:11:45,920 --> 00:11:47,990 And with that, if we save this, 229 00:11:47,990 --> 00:11:50,420 if I reload here on restaurants, 230 00:11:50,420 --> 00:11:52,960 I get my recommended restaurants. 231 00:11:52,960 --> 00:11:54,620 We can view the details. 232 00:11:54,620 --> 00:11:57,713 And we will also be able to share a restaurant. 233 00:11:58,550 --> 00:12:01,550 But now we restructured our code 234 00:12:01,550 --> 00:12:05,230 and our app.js file is a little bit leaner. 235 00:12:05,230 --> 00:12:08,270 And whilst all of this was a lot of new knowledge, 236 00:12:08,270 --> 00:12:11,570 which might not seem like it was worth the effort, 237 00:12:11,570 --> 00:12:14,610 after all, we didn't move that much code, 238 00:12:14,610 --> 00:12:16,210 it is crucial to be aware 239 00:12:16,210 --> 00:12:18,970 of refactoring in general 240 00:12:18,970 --> 00:12:21,770 and of how you can split your code 241 00:12:21,770 --> 00:12:24,550 across multiple files in Express 242 00:12:25,400 --> 00:12:28,080 because in any realistic website 243 00:12:28,080 --> 00:12:31,100 that you are going to build with Node and Express, 244 00:12:31,100 --> 00:12:33,520 code splitting like this will be common 245 00:12:33,520 --> 00:12:36,820 and is something you have to understand. 246 00:12:36,820 --> 00:12:40,150 And that's why we will actually not stop here 247 00:12:40,150 --> 00:12:43,803 but take it even a step further in the next lecture.