1 00:00:02,210 --> 00:00:06,000 Now the first step is to test your website. 2 00:00:06,000 --> 00:00:07,740 Now, when it comes to testing websites, 3 00:00:07,740 --> 00:00:09,800 we actually have two approaches, 4 00:00:09,800 --> 00:00:13,160 of which we only saw one in this course. 5 00:00:13,160 --> 00:00:16,470 You can of course test your website manually. 6 00:00:16,470 --> 00:00:19,253 But you can also test it in an automated way. 7 00:00:20,090 --> 00:00:22,490 Now, when we speak about manual testing, 8 00:00:22,490 --> 00:00:25,000 it really just means what it sounds like. 9 00:00:25,000 --> 00:00:27,340 You test your website yourself, 10 00:00:27,340 --> 00:00:30,300 you test for common user behaviors. 11 00:00:30,300 --> 00:00:33,880 Also, maybe for a couple of strange behaviors 12 00:00:33,880 --> 00:00:37,880 users might have for a couple of potential bugs. 13 00:00:37,880 --> 00:00:40,510 You want to therefore test for such a rare, 14 00:00:40,510 --> 00:00:43,650 but still possible scenarios as well. 15 00:00:43,650 --> 00:00:45,810 And if possible, you might want to invite 16 00:00:45,810 --> 00:00:49,310 a couple of friends or other people who also help you 17 00:00:49,310 --> 00:00:52,030 test your website, because it turns out 18 00:00:52,030 --> 00:00:55,240 you're pretty bad at finding your own bugs. 19 00:00:55,240 --> 00:00:57,913 Other people often are way better at that. 20 00:00:59,270 --> 00:01:00,900 Now that's manual testing. 21 00:01:00,900 --> 00:01:02,840 And that is what you'll always do, 22 00:01:02,840 --> 00:01:04,933 no matter which website you build. 23 00:01:06,110 --> 00:01:10,120 Now, you can enhance this by also adding automated testing, 24 00:01:10,120 --> 00:01:12,230 which is a bit more advanced though. 25 00:01:12,230 --> 00:01:14,500 Hence, it's also not covered in this course 26 00:01:14,500 --> 00:01:16,220 and not the focus of this course. 27 00:01:16,220 --> 00:01:17,810 You could build entire courses 28 00:01:17,810 --> 00:01:20,680 on just that topic alone instead. 29 00:01:20,680 --> 00:01:24,690 Because the idea with automated testing is that you actually 30 00:01:24,690 --> 00:01:28,930 write code, scripts that test your code, 31 00:01:28,930 --> 00:01:31,170 your website automatically. 32 00:01:31,170 --> 00:01:35,513 So you write code that tests code. Yes, this is a thing. 33 00:01:36,570 --> 00:01:39,980 And with that, you can then write code that tests 34 00:01:39,980 --> 00:01:42,720 individual building blocks of your site, 35 00:01:42,720 --> 00:01:45,050 or entire user flows. 36 00:01:45,050 --> 00:01:47,700 And of course you would typically try to write a lot of 37 00:01:47,700 --> 00:01:51,210 testing scripts so that you test all the key features and 38 00:01:51,210 --> 00:01:55,010 behaviors on your site, and the advantage of such automated 39 00:01:55,010 --> 00:01:58,160 tests, then is that whenever you change something 40 00:01:58,160 --> 00:02:01,100 about your website, you don't have to test it all 41 00:02:01,100 --> 00:02:05,610 manually again. Though you should always also test manually. 42 00:02:05,610 --> 00:02:06,980 But you can also then just run 43 00:02:06,980 --> 00:02:08,889 your automated testing scripts. 44 00:02:08,889 --> 00:02:12,000 And they will do a bunch of tests for you, 45 00:02:12,000 --> 00:02:14,150 way more comprehensive and quicker 46 00:02:14,150 --> 00:02:16,440 than you would be able to do it. 47 00:02:16,440 --> 00:02:18,370 But again, it's an advanced topic. 48 00:02:18,370 --> 00:02:20,440 Therefore, I wanted to mention it here 49 00:02:20,440 --> 00:02:22,290 because you should be aware of it, 50 00:02:22,290 --> 00:02:25,120 but we'll not dive into it here. 51 00:02:25,120 --> 00:02:29,290 Now the two example sites I provided to you should work, 52 00:02:29,290 --> 00:02:31,450 but of course you can also test it. 53 00:02:31,450 --> 00:02:33,930 I mean the static site is fairly easy to test. 54 00:02:33,930 --> 00:02:37,390 You can look for typos here and that's it, I guess. 55 00:02:37,390 --> 00:02:39,970 For the dynamic-site what we can do is, 56 00:02:39,970 --> 00:02:44,070 we can open this integrated terminal here, and navigate 57 00:02:44,070 --> 00:02:48,370 into this dynamic-site folder with CD dynamic-site, 58 00:02:48,370 --> 00:02:51,060 and then run NPM install. 59 00:02:51,060 --> 00:02:54,040 The first time that we got this project, 60 00:02:54,040 --> 00:02:57,110 because the node modules folder doesn't exist yet, 61 00:02:57,110 --> 00:02:58,400 as you learned. 62 00:02:58,400 --> 00:03:01,710 And then you can run NPM Start to Start, a little script 63 00:03:01,710 --> 00:03:03,850 which I set up and packaged on Jason, 64 00:03:03,850 --> 00:03:06,893 which starts the server with help of nodemon. 65 00:03:08,400 --> 00:03:12,510 And then you can visit local host 3000, though actually 66 00:03:12,510 --> 00:03:15,350 you need a database server to be up and running a 67 00:03:15,350 --> 00:03:18,360 MongoDB database server. 68 00:03:18,360 --> 00:03:22,410 Otherwise running NPM Start probably already crashed. 69 00:03:22,410 --> 00:03:25,830 So you have to install MongoDB and start a 70 00:03:25,830 --> 00:03:28,850 MongoDB server locally on your system, 71 00:03:28,850 --> 00:03:31,930 as we did it before in this course as well. 72 00:03:31,930 --> 00:03:35,690 And once you've got that, you can visit local host 3000. 73 00:03:35,690 --> 00:03:38,040 And now you can also click this Like button, 74 00:03:38,040 --> 00:03:40,740 and you'll see a Like counter go up here. 75 00:03:40,740 --> 00:03:45,153 And I also log the time when this page was last liked. 76 00:03:46,360 --> 00:03:48,693 That's the dynamic part of this site. 77 00:03:49,910 --> 00:03:51,750 So I think it works. 78 00:03:51,750 --> 00:03:55,370 And hence, I'm happy with how we tested this. 79 00:03:55,370 --> 00:03:57,620 Of course, bigger sites like the Online Shop 80 00:03:57,620 --> 00:04:00,940 should take more testing and you very likely will 81 00:04:00,940 --> 00:04:04,210 be able to find some room for improvement there. 82 00:04:04,210 --> 00:04:05,980 But for this page it's done, 83 00:04:05,980 --> 00:04:08,670 but we got more steps to go through of course. 84 00:04:08,670 --> 00:04:13,000 Testing our website is just one part of this first step. 85 00:04:13,000 --> 00:04:17,180 The second part is to prepare our code for deployment. 86 00:04:17,180 --> 00:04:19,300 And here I also mention a feature called 87 00:04:19,300 --> 00:04:23,320 environment variables, which I also want to come back to. 88 00:04:23,320 --> 00:04:27,490 Now, what do I mean with preparing our code for deployment? 89 00:04:27,490 --> 00:04:29,413 With that I mean that you will, for example, 90 00:04:29,413 --> 00:04:32,630 want to remove and replace all dummy values 91 00:04:32,630 --> 00:04:35,010 that you might have somewhere in your code, 92 00:04:35,010 --> 00:04:37,333 with correct concrete values. 93 00:04:38,200 --> 00:04:41,230 You also want to replace any testing data or keys, 94 00:04:41,230 --> 00:04:43,240 with real data and keys. 95 00:04:43,240 --> 00:04:45,320 And specifically you might, for example, 96 00:04:45,320 --> 00:04:47,900 remember that for the Online Shop 97 00:04:47,900 --> 00:04:52,500 we used Stripe and there also the Stripe API key. 98 00:04:52,500 --> 00:04:54,960 And I did mention in that core section 99 00:04:54,960 --> 00:04:58,210 that we were in testing mode. You, for example, 100 00:04:58,210 --> 00:05:02,390 would want to switch to the real mode in Stripe. 101 00:05:02,390 --> 00:05:05,370 For which you need to activate your account 102 00:05:05,370 --> 00:05:09,860 and use the API key connected to this real mode, 103 00:05:09,860 --> 00:05:12,240 before you proceed with deployment. 104 00:05:12,240 --> 00:05:15,580 And of course, this would mean that you take the API key 105 00:05:15,580 --> 00:05:17,270 for a non testing mode, 106 00:05:17,270 --> 00:05:19,150 and put that into your code 107 00:05:19,150 --> 00:05:22,290 instead of the testing mode API key. 108 00:05:22,290 --> 00:05:24,810 But when it comes to having different values 109 00:05:24,810 --> 00:05:28,050 for development and deployment. As we, for example, 110 00:05:28,050 --> 00:05:32,130 would have it with the API key used by Stripe. 111 00:05:32,130 --> 00:05:34,780 But as we, for example, will also have it with 112 00:05:34,780 --> 00:05:37,820 the MongoDB database URL, 113 00:05:37,820 --> 00:05:40,060 because we'll use a different hosting provider 114 00:05:40,060 --> 00:05:44,420 for our deployed website than we do in local development. 115 00:05:44,420 --> 00:05:47,490 In such cases, swapping these values and codes 116 00:05:47,490 --> 00:05:51,170 all the time can get very annoying and error prone, 117 00:05:51,170 --> 00:05:53,360 because you manually have to update the code 118 00:05:53,360 --> 00:05:55,670 when you want to move it onto a remote machine. 119 00:05:55,670 --> 00:05:57,430 And then you have to update it again, 120 00:05:57,430 --> 00:06:00,010 if you want to develop on your local machine again. 121 00:06:00,010 --> 00:06:02,830 You constantly have to switch between values 122 00:06:02,830 --> 00:06:06,270 possibly in different places of your code. 123 00:06:06,270 --> 00:06:09,510 That's where a feature called environment variables 124 00:06:09,510 --> 00:06:12,370 comes in handy. Environment variables is 125 00:06:12,370 --> 00:06:14,030 a feature that exists, 126 00:06:14,030 --> 00:06:18,570 not just in NodeJS, but in any programming language. 127 00:06:18,570 --> 00:06:21,910 All programming languages have a feature like this. 128 00:06:21,910 --> 00:06:25,930 And the idea is that you can use a variable 129 00:06:25,930 --> 00:06:29,520 in a place where you need a value. So, for example, 130 00:06:29,520 --> 00:06:33,060 in a place where you need the API key 131 00:06:33,060 --> 00:06:36,060 or the MongoDB database URL. 132 00:06:36,060 --> 00:06:37,800 So you use a variable here 133 00:06:37,800 --> 00:06:40,690 and you use a special kind of variable, 134 00:06:40,690 --> 00:06:44,060 which is not set somewhere in your code. 135 00:06:44,060 --> 00:06:48,110 But which instead, is set in the environment. For example, 136 00:06:48,110 --> 00:06:50,920 on a remote machine that will host your code. 137 00:06:50,920 --> 00:06:54,900 And that is then injected into the running website code 138 00:06:54,900 --> 00:06:58,030 once it starts running on that remote machine, 139 00:06:58,030 --> 00:07:00,560 or whichever machine it runs on. 140 00:07:00,560 --> 00:07:02,950 So it's a variable, that's not set in the code, 141 00:07:02,950 --> 00:07:04,147 but in the environment, 142 00:07:04,147 --> 00:07:07,230 but which will be available in your code. 143 00:07:07,230 --> 00:07:08,800 And for example, here, 144 00:07:08,800 --> 00:07:11,160 if I quit this development server here. 145 00:07:11,160 --> 00:07:14,830 We could replace this MongoDB URL 146 00:07:14,830 --> 00:07:17,630 with such environment variable. 147 00:07:17,630 --> 00:07:21,240 For this, I'll add a regular variable here, 148 00:07:21,240 --> 00:07:25,580 mongodbUri, or mongodbUrl could be the name. 149 00:07:25,580 --> 00:07:27,263 It's basically the same thing. 150 00:07:28,380 --> 00:07:30,400 And here we could have a default value of 151 00:07:30,400 --> 00:07:34,080 mongodb://localhost:27017, 152 00:07:34,080 --> 00:07:36,853 which is our local development value. 153 00:07:37,800 --> 00:07:40,790 And we can then of course use the mongodbUrl 154 00:07:40,790 --> 00:07:42,750 variable down here. 155 00:07:42,750 --> 00:07:45,660 But with that, we're not using an environment variable, 156 00:07:45,660 --> 00:07:47,683 we're using a regular variable. 157 00:07:48,560 --> 00:07:52,060 But now we can add an if check to override this value, 158 00:07:52,060 --> 00:07:54,830 if a more specific environment variable 159 00:07:54,830 --> 00:07:58,050 with such a URL is set. 160 00:07:58,050 --> 00:08:00,280 And for this in NodeJS, 161 00:08:00,280 --> 00:08:03,500 and it will be different in other programming languages, 162 00:08:03,500 --> 00:08:05,740 but the documentation of those languages 163 00:08:05,740 --> 00:08:08,260 will tell you which code is correct. 164 00:08:08,260 --> 00:08:12,120 In NodeJS you get access to these environment variables, 165 00:08:12,120 --> 00:08:14,610 which are injected by the environment 166 00:08:14,610 --> 00:08:16,150 into this running code, 167 00:08:16,150 --> 00:08:20,330 by accessing the global process object. 168 00:08:20,330 --> 00:08:21,897 This is not defined by us, 169 00:08:21,897 --> 00:08:25,210 it's made available by NodeJS instead. 170 00:08:25,210 --> 00:08:30,210 And on process, you have a env property for environment. 171 00:08:31,720 --> 00:08:34,070 And that is an object which contains 172 00:08:34,070 --> 00:08:35,809 all the environment variables 173 00:08:35,809 --> 00:08:40,453 that are exposed to your NodeJS program by the environment. 174 00:08:42,000 --> 00:08:43,530 Therefore, of course you have to know 175 00:08:43,530 --> 00:08:45,850 which variables will be exposed. 176 00:08:45,850 --> 00:08:48,230 But since you will deploy your code 177 00:08:48,230 --> 00:08:50,620 to some remote machine on your own, 178 00:08:50,620 --> 00:08:53,130 and you can then configure that remote machine 179 00:08:53,130 --> 00:08:56,570 to expose and provide certain environment variables. 180 00:08:56,570 --> 00:08:58,810 You as a developer can decide which 181 00:08:58,810 --> 00:09:00,913 environment variables you want later. 182 00:09:02,060 --> 00:09:07,060 And here I'll add a MONGODB_URL environment variable. 183 00:09:08,310 --> 00:09:13,310 And if that is set, if this is truth, if that is found. 184 00:09:13,700 --> 00:09:15,440 Then I'll set mongodbUrl 185 00:09:16,300 --> 00:09:19,853 equal to that environment variable value. 186 00:09:21,340 --> 00:09:24,430 Now in local development, for example, this will not be set. 187 00:09:24,430 --> 00:09:27,740 So in local development, this will still be used. 188 00:09:27,740 --> 00:09:29,640 But later once we deploy this, 189 00:09:29,640 --> 00:09:32,060 we will ensure that this environment variable 190 00:09:32,060 --> 00:09:33,940 is set in the environment, 191 00:09:33,940 --> 00:09:36,010 and therefore then this will be used instead. 192 00:09:36,010 --> 00:09:37,750 And hence, will connect to the server 193 00:09:37,750 --> 00:09:41,360 with that value stored in this environment variable, 194 00:09:41,360 --> 00:09:43,823 instead of the default variable here. 195 00:09:45,420 --> 00:09:46,860 Now, still as mentioned, 196 00:09:46,860 --> 00:09:49,690 we can run NPM Start here on the local machine, 197 00:09:49,690 --> 00:09:52,500 because this is not set. Hence we don't overwrite it, 198 00:09:52,500 --> 00:09:55,190 instead we use the starting value. 199 00:09:55,190 --> 00:09:57,620 But now we're using an environment variable here 200 00:09:57,620 --> 00:10:00,070 and we don't have to swap code manually. 201 00:10:00,070 --> 00:10:01,440 Instead, we can just configure 202 00:10:01,440 --> 00:10:03,183 the environment appropriately. 203 00:10:04,130 --> 00:10:06,390 I'll come back to environment variables later. 204 00:10:06,390 --> 00:10:09,560 But that is what you should know about them right now. 205 00:10:09,560 --> 00:10:11,870 In the front end code this does of course matter, 206 00:10:11,870 --> 00:10:13,550 because there all the code is 207 00:10:13,550 --> 00:10:15,600 evaluated in the browser anyways. 208 00:10:15,600 --> 00:10:17,680 And therefore there we got no code 209 00:10:17,680 --> 00:10:19,700 that would run on a remote machine, 210 00:10:19,700 --> 00:10:23,090 and in the remote machine environment therefore. 211 00:10:23,090 --> 00:10:26,480 Now last, but not least, there's always one specific aspect 212 00:10:26,480 --> 00:10:27,530 you should be aware of. 213 00:10:27,530 --> 00:10:31,590 If you have a website where users can upload something. 214 00:10:31,590 --> 00:10:32,720 Like in the Online Shop 215 00:10:32,720 --> 00:10:35,950 where the product images could be uploaded. 216 00:10:35,950 --> 00:10:39,770 In such cases, we stored the uploaded files 217 00:10:39,770 --> 00:10:41,970 in our project folder in the end. 218 00:10:41,970 --> 00:10:45,320 And we serve them from there, and that can be fine, 219 00:10:45,320 --> 00:10:48,100 but you might want to consider using a cloud storage 220 00:10:48,100 --> 00:10:52,480 provider for that instead. For example, Cloudinary. 221 00:10:52,480 --> 00:10:54,610 And that's really just one example. 222 00:10:54,610 --> 00:10:58,370 There are dozens and hundreds of alternatives probably. 223 00:10:58,370 --> 00:11:00,850 But Cloudinary is a service provider, 224 00:11:00,850 --> 00:11:03,440 like Stripe was a service provider. 225 00:11:03,440 --> 00:11:05,060 Which does not offer payments, 226 00:11:05,060 --> 00:11:08,520 but which instead offers hosting or storage 227 00:11:08,520 --> 00:11:12,483 of files and videos. Images and video files typically. 228 00:11:13,470 --> 00:11:16,090 You can learn more about them on their website, 229 00:11:16,090 --> 00:11:20,000 and they give you tools for automatically uploading. 230 00:11:20,000 --> 00:11:22,600 So therefore, forwarding files 231 00:11:22,600 --> 00:11:25,680 that you got on your server to their servers, 232 00:11:25,680 --> 00:11:27,820 so that they will store it for you. 233 00:11:27,820 --> 00:11:30,030 And they then give you URLs, 234 00:11:30,030 --> 00:11:31,680 which you can use in your templates, 235 00:11:31,680 --> 00:11:35,780 so that the files are requested directly from Cloudinary. 236 00:11:35,780 --> 00:11:38,450 And then you don't have to store them on your own server, 237 00:11:38,450 --> 00:11:40,700 which can be bad for performance, 238 00:11:40,700 --> 00:11:45,700 for your hard drive which could run out of space, and so on. 239 00:11:45,930 --> 00:11:49,760 Now it costs money. Most providers cost money, 240 00:11:49,760 --> 00:11:53,650 though they also got a plan with which you can get started 241 00:11:53,650 --> 00:11:54,630 for free. 242 00:11:54,630 --> 00:11:57,760 And it is just something you should think about anyways. 243 00:11:57,760 --> 00:12:01,470 Not a must do, but something that's worth a closer look 244 00:12:01,470 --> 00:12:03,540 if you're building a bigger website 245 00:12:03,540 --> 00:12:06,280 where users can upload files. 246 00:12:06,280 --> 00:12:09,890 Then using such a third party cloud storage provider 247 00:12:09,890 --> 00:12:13,930 might be a good idea, to offload work from your server, 248 00:12:13,930 --> 00:12:16,150 and to get various other benefits 249 00:12:16,150 --> 00:12:18,983 like automatic image optimization, for example. 250 00:12:20,240 --> 00:12:23,140 But with that, these are some main aspects 251 00:12:23,140 --> 00:12:24,360 you should keep in mind 252 00:12:24,360 --> 00:12:27,890 when preparing your website code for deployment. 253 00:12:27,890 --> 00:12:30,123 And therefore lets move on to the next step.