1 00:00:02,050 --> 00:00:03,850 Now that was the static site. 2 00:00:03,850 --> 00:00:05,380 For the dynamic website, 3 00:00:05,380 --> 00:00:08,610 we can't use Netlify drop because now we don't 4 00:00:08,610 --> 00:00:10,820 just have a bunch of browser site code. 5 00:00:10,820 --> 00:00:13,080 We also have all the backend code. 6 00:00:13,080 --> 00:00:16,129 We now need a hosting provider that allows us 7 00:00:16,129 --> 00:00:18,840 to host a Node.js site. 8 00:00:18,840 --> 00:00:21,330 Now if you search for Node.js hosting, 9 00:00:21,330 --> 00:00:25,120 you'll find many possible hosting providers. 10 00:00:25,120 --> 00:00:28,850 One provider which I like for courses like this one, 11 00:00:28,850 --> 00:00:33,163 because you can get started with it for free is Heroku. 12 00:00:34,240 --> 00:00:36,530 Heroku is also a hosting provider 13 00:00:36,530 --> 00:00:39,440 which does not just support Node.js, 14 00:00:39,440 --> 00:00:41,220 but as you can see down there also 15 00:00:41,220 --> 00:00:46,160 other programming languages and it makes deploying websites, 16 00:00:46,160 --> 00:00:49,050 no matter which programming language you use 17 00:00:49,050 --> 00:00:51,093 really, really easy. 18 00:00:52,020 --> 00:00:54,420 Again, as always, you wanna dive 19 00:00:54,420 --> 00:00:57,850 into the official documentation and also the pricing pages 20 00:00:57,850 --> 00:01:00,030 if you are a serious about using that. 21 00:01:00,030 --> 00:01:02,830 And if you have a real website that you wanna host. 22 00:01:02,830 --> 00:01:07,520 Here, I'll show you a brief example for this dynamic site 23 00:01:07,520 --> 00:01:08,963 I provided to you. 24 00:01:09,920 --> 00:01:11,240 And for this to get started, 25 00:01:11,240 --> 00:01:16,240 we can click on documentation and then here Node.js, 26 00:01:16,380 --> 00:01:19,150 and here we can now learn how we can get started 27 00:01:19,150 --> 00:01:22,310 with Node.js on Heroku. 28 00:01:22,310 --> 00:01:24,550 For example, by clicking on getting started 29 00:01:24,550 --> 00:01:27,490 on Heroku with Node.js. 30 00:01:27,490 --> 00:01:30,393 And the first step you wanna go through here is 31 00:01:30,393 --> 00:01:33,110 that you need to install the Heroku installer 32 00:01:33,110 --> 00:01:35,220 on your local machine. 33 00:01:35,220 --> 00:01:40,120 This is a utility tool which will push our local code 34 00:01:40,120 --> 00:01:43,260 to Heroku's servers for us. 35 00:01:43,260 --> 00:01:46,170 So here it's not a drag and drop interface 36 00:01:46,170 --> 00:01:48,320 as we had it a couple of minutes ago, 37 00:01:48,320 --> 00:01:50,513 instead here we need this extra tool. 38 00:01:51,350 --> 00:01:55,510 It's also worth noting that this extra tool requires Git. 39 00:01:55,510 --> 00:01:57,510 This version controlled system to 40 00:01:57,510 --> 00:02:00,340 which we also introduced you earlier in the course. 41 00:02:00,340 --> 00:02:02,110 So you wanna make sure that you installed 42 00:02:02,110 --> 00:02:03,550 the data tool before. 43 00:02:03,550 --> 00:02:05,820 If you haven't, you will find links here 44 00:02:05,820 --> 00:02:08,413 that will walk you through the Git installation. 45 00:02:09,669 --> 00:02:13,350 Then you can download the installer for your operating 46 00:02:13,350 --> 00:02:17,000 system here and I'm on Mac OS but on Windows, 47 00:02:17,000 --> 00:02:19,860 you would also get a straightforward installer 48 00:02:19,860 --> 00:02:21,083 which you can download. 49 00:02:22,030 --> 00:02:24,590 And then you'll get a default installer 50 00:02:24,590 --> 00:02:27,720 for which you can walk which we'll install 51 00:02:27,720 --> 00:02:30,143 this Heroku tool on your system. 52 00:02:31,110 --> 00:02:32,600 Like this. 53 00:02:32,600 --> 00:02:33,920 Now, once it was installed, 54 00:02:33,920 --> 00:02:36,840 we can move on and next we need to log 55 00:02:36,840 --> 00:02:40,130 into our Heroku account with that tool 56 00:02:40,130 --> 00:02:43,190 that we installed by running this command in the terminal 57 00:02:43,190 --> 00:02:44,433 or the command prompt. 58 00:02:45,890 --> 00:02:48,410 Of course, for this we first of all 59 00:02:48,410 --> 00:02:50,900 have to create such a Heroku account 60 00:02:50,900 --> 00:02:54,020 and therefore I will indeed sign up here. 61 00:02:54,020 --> 00:02:56,390 And once you did that, once you did sign up, 62 00:02:56,390 --> 00:02:58,708 you can run this command. 63 00:02:58,708 --> 00:03:01,410 For this here, I'll go back into my project 64 00:03:01,410 --> 00:03:03,990 and open the terminal there. 65 00:03:03,990 --> 00:03:07,833 And I'll actually cd into the dynamic site folder first. 66 00:03:09,110 --> 00:03:13,223 And then here in this terminal, I will run Heroku login. 67 00:03:15,100 --> 00:03:16,100 This should work. 68 00:03:16,100 --> 00:03:18,380 If the Heroku command is not found, 69 00:03:18,380 --> 00:03:21,030 make sure you went through that Heroku installers 70 00:03:21,030 --> 00:03:24,090 successfully and maybe try restarting your system 71 00:03:24,090 --> 00:03:26,260 before you try this again. 72 00:03:26,260 --> 00:03:29,110 Now here, we need to press any key. 73 00:03:29,110 --> 00:03:32,060 This will now open the browser and there we can now log 74 00:03:32,060 --> 00:03:36,660 into Heroku which I did real quick here. 75 00:03:36,660 --> 00:03:37,850 And therefore now here, 76 00:03:37,850 --> 00:03:40,463 it also says that we are logged in. 77 00:03:41,510 --> 00:03:43,840 Now as a next step, 78 00:03:43,840 --> 00:03:46,760 we need to make sure that we use a node version greater 79 00:03:46,760 --> 00:03:49,590 than 10 which you can check 80 00:03:49,590 --> 00:03:52,300 by typing node dash dash version. 81 00:03:52,300 --> 00:03:54,400 and I use 16 dot six dot two. 82 00:03:54,400 --> 00:03:55,803 So that will be fine. 83 00:03:57,110 --> 00:03:58,970 And all these other settings here should 84 00:03:58,970 --> 00:04:01,000 be satisfied as well. 85 00:04:01,000 --> 00:04:02,390 You specifically wanna make sure 86 00:04:02,390 --> 00:04:04,950 that you have Git installed as mentioned before. 87 00:04:04,950 --> 00:04:07,093 Otherwise you wanna install it first. 88 00:04:08,750 --> 00:04:10,950 Now we can move on to the next step by clicking 89 00:04:10,950 --> 00:04:15,020 on this button here and here we now actually get 90 00:04:15,020 --> 00:04:18,570 an example application which I don't wanna use. 91 00:04:18,570 --> 00:04:20,670 Instead, I'll move on to a different article 92 00:04:20,670 --> 00:04:24,200 which shows us how to deploy a node application 93 00:04:24,200 --> 00:04:25,863 to Heroku in general. 94 00:04:27,510 --> 00:04:30,760 Now, what it then tells us here is that we, first of all, 95 00:04:30,760 --> 00:04:32,350 need to have Git installed. 96 00:04:32,350 --> 00:04:33,940 Yes we know that and that. 97 00:04:33,940 --> 00:04:36,591 And that we then need to track our code with 98 00:04:36,591 --> 00:04:41,050 Git and again, we learned about Git before. 99 00:04:41,050 --> 00:04:43,547 Now to track our code with Git, 100 00:04:43,547 --> 00:04:47,730 I did add a Git ignore file in this dynamic site folder 101 00:04:47,730 --> 00:04:50,430 where I ignore node modules. 102 00:04:50,430 --> 00:04:54,520 And actually I'll also ignore this DS store file thing 103 00:04:54,520 --> 00:04:56,703 which only exists on Mac OS though. 104 00:04:57,880 --> 00:05:00,300 And then we can run Git in it. 105 00:05:00,300 --> 00:05:04,880 And then after that, Got add dot git commit, 106 00:05:07,150 --> 00:05:08,903 initial commit, for example. 107 00:05:10,081 --> 00:05:13,900 And with that, we now saved a code snapshot with Git. 108 00:05:13,900 --> 00:05:16,230 So to say, in case this is unclear. 109 00:05:16,230 --> 00:05:19,180 You can just follow along with the commands and you can 110 00:05:19,180 --> 00:05:21,670 then take a look at this full course section, 111 00:05:21,670 --> 00:05:23,080 which we have in this course 112 00:05:23,080 --> 00:05:25,620 where you can learn more about Git. 113 00:05:25,620 --> 00:05:29,191 Now that we did start tracking our code with Git though, 114 00:05:29,191 --> 00:05:31,400 we can move on to the second step 115 00:05:31,400 --> 00:05:34,160 and add a Heroku Git remote, 116 00:05:34,160 --> 00:05:38,530 which simply means that we add a remote cloud-based code 117 00:05:38,530 --> 00:05:40,780 repository to our project, 118 00:05:40,780 --> 00:05:44,070 to which we can push our code with help of Git. 119 00:05:44,070 --> 00:05:46,523 Very often, GitHub is used for this. 120 00:05:46,523 --> 00:05:49,760 This is a great place to store your code remotely 121 00:05:49,760 --> 00:05:51,510 and to collaborate on it. 122 00:05:51,510 --> 00:05:52,970 We've got a full Git course, 123 00:05:52,970 --> 00:05:55,440 if you want to learn more about that. 124 00:05:55,440 --> 00:05:57,604 Here however, we'll add Heroku 125 00:05:57,604 --> 00:06:00,870 and therefore in Heroku's servers as a remote. 126 00:06:00,870 --> 00:06:03,810 So did we can push our code with help of 127 00:06:03,810 --> 00:06:05,840 that Heroku command line tool, 128 00:06:05,840 --> 00:06:10,073 which uses Git under the hood directly to Heroku's servers. 129 00:06:11,170 --> 00:06:13,270 Now, here we find a link on how that works. 130 00:06:13,270 --> 00:06:15,791 Of course, I'll also show you how it works. 131 00:06:15,791 --> 00:06:20,660 All we need to do in the end is run Heroku create inside 132 00:06:20,660 --> 00:06:22,460 of our project folder. 133 00:06:22,460 --> 00:06:26,453 So here, back in my project folder, I now run Heroku create. 134 00:06:27,440 --> 00:06:29,690 And then back in the other documentation, 135 00:06:29,690 --> 00:06:31,427 we wanna add such a Procfile 136 00:06:31,427 --> 00:06:33,720 which is the in the end the configuration file 137 00:06:33,720 --> 00:06:36,640 for Heroku that specifically tells Heroku 138 00:06:36,640 --> 00:06:38,920 how to start our server. 139 00:06:38,920 --> 00:06:41,620 And that's very important because thus far, 140 00:06:41,620 --> 00:06:44,880 we of course always use the script and packaged up JSON 141 00:06:44,880 --> 00:06:47,433 for this, which use nodemon. 142 00:06:47,433 --> 00:06:50,060 Nodemon is a great tool for development, 143 00:06:50,060 --> 00:06:52,500 since it automatically restarts our server 144 00:06:52,500 --> 00:06:54,200 whenever the code changes 145 00:06:54,200 --> 00:06:57,740 but it's not for a deployed website because they're on 146 00:06:57,740 --> 00:06:59,910 that server, on that remote machine. 147 00:06:59,910 --> 00:07:02,250 We won't have any code changes. 148 00:07:02,250 --> 00:07:06,530 There we wanna run our app.js file with node itself 149 00:07:06,530 --> 00:07:08,160 and not with nodemon. 150 00:07:09,540 --> 00:07:11,450 Therefor we now add a Procfile 151 00:07:11,450 --> 00:07:14,220 and it's really just a file named Procfile 152 00:07:14,220 --> 00:07:16,890 with no file extension. 153 00:07:16,890 --> 00:07:21,303 And in there you type web and then node app.js. 154 00:07:22,230 --> 00:07:25,080 This tells Heroku that for this website in the end, 155 00:07:25,080 --> 00:07:28,478 it should start the server by running node 156 00:07:28,478 --> 00:07:30,943 and then targeting the app.js file. 157 00:07:32,580 --> 00:07:33,840 And that's also what you find 158 00:07:33,840 --> 00:07:35,590 at the official documentation here. 159 00:07:36,780 --> 00:07:39,910 Now you also have to make a change to the code though, 160 00:07:39,910 --> 00:07:42,310 as it also tells you here, 161 00:07:42,310 --> 00:07:45,300 you need to listen on the correct port. 162 00:07:45,300 --> 00:07:46,903 And that's very important. 163 00:07:47,770 --> 00:07:52,770 In app.js, we are listening on port 3000. 164 00:07:53,020 --> 00:07:55,580 Now this was great for a local development, 165 00:07:55,580 --> 00:07:59,270 since this is a port which is typically not occupied. 166 00:07:59,270 --> 00:08:02,890 Now, when you wanna expose your website to real visitors, 167 00:08:02,890 --> 00:08:05,500 you typically don't use this port though. 168 00:08:05,500 --> 00:08:06,687 Instead for websites, 169 00:08:06,687 --> 00:08:11,510 the default port for exposing them to the world is 80. 170 00:08:11,510 --> 00:08:13,710 Or if you're using HTTPS, 171 00:08:13,710 --> 00:08:17,100 which is a more secure version of the HDP protocol, 172 00:08:17,100 --> 00:08:19,093 you use four for free, typically. 173 00:08:20,230 --> 00:08:23,720 However, you don't set this up yourself here. 174 00:08:23,720 --> 00:08:26,650 Instead, we'll let Heroku do that for us 175 00:08:26,650 --> 00:08:29,270 because they might be using some other port internally 176 00:08:29,270 --> 00:08:32,143 and then just proxy which means in the end 177 00:08:32,143 --> 00:08:35,710 forward that two 80 or four for free for us. 178 00:08:35,710 --> 00:08:38,929 And hence we wanna inject the port dynamically 179 00:08:38,929 --> 00:08:42,663 and gets to concrete port value from Heroku. 180 00:08:43,500 --> 00:08:46,390 For this we can use an environment variable 181 00:08:46,390 --> 00:08:49,440 as we're already doing it here in database JS 182 00:08:49,440 --> 00:08:52,120 for the MongoDB URL. 183 00:08:52,120 --> 00:08:54,923 I'm now going to do the same here in app JS. 184 00:08:57,000 --> 00:08:58,870 Here, maybe at the top, 185 00:08:58,870 --> 00:09:01,080 though the exact position doesn't matter. 186 00:09:01,080 --> 00:09:05,150 I'll add a port variable and set this to 3000. 187 00:09:05,150 --> 00:09:10,010 And then I'll check if processed or port is set 188 00:09:10,010 --> 00:09:13,710 because Heroku, as they tell us in their documentation, 189 00:09:13,710 --> 00:09:17,490 will provide this port environment variable for us. 190 00:09:17,490 --> 00:09:19,320 So therefore if we have this, 191 00:09:19,320 --> 00:09:21,580 which means this is running in production 192 00:09:21,580 --> 00:09:26,000 on this remote machine, then I'll set this port variable. 193 00:09:26,000 --> 00:09:28,270 Of course, we can also write a lowercase here by the way, 194 00:09:28,270 --> 00:09:30,310 to avoid confusion, it doesn't matter. 195 00:09:30,310 --> 00:09:31,940 Both would be fine. 196 00:09:31,940 --> 00:09:34,503 Equal to processed on env dot port. 197 00:09:35,400 --> 00:09:37,940 Now, of course, this name, this port here, 198 00:09:37,940 --> 00:09:40,520 that's not up to you because that's the name Heroku 199 00:09:40,520 --> 00:09:43,023 will use when it sets that variable. 200 00:09:44,180 --> 00:09:48,090 And then we can use this port variable here for listening so 201 00:09:48,090 --> 00:09:52,900 that in local development, we still use 3000 202 00:09:52,900 --> 00:09:55,730 but once it was deployed and this environment variable 203 00:09:55,730 --> 00:09:59,030 is set, we use that value instead. 204 00:09:59,030 --> 00:10:00,913 That's another important step here. 205 00:10:02,650 --> 00:10:03,860 Now, once that is completed, 206 00:10:03,860 --> 00:10:07,530 we also have to take care about our database. 207 00:10:07,530 --> 00:10:11,440 Now Heroku offers managed databases, for example, 208 00:10:11,440 --> 00:10:14,350 for SQL in this case, Postgres SQL 209 00:10:14,350 --> 00:10:16,960 which is an alternative to mySQL. 210 00:10:16,960 --> 00:10:20,390 And I already mentioned before that for MongoDB, 211 00:10:20,390 --> 00:10:24,810 which we are using here, I wanna use MongoDB Atlas. 212 00:10:24,810 --> 00:10:26,586 So therefore before we actually deploy 213 00:10:26,586 --> 00:10:30,400 this and push our code to Heroku, we wanna make sure 214 00:10:30,400 --> 00:10:33,100 that we got the this MongoDB Atlas 215 00:10:33,100 --> 00:10:35,660 hosted database server up and running. 216 00:10:35,660 --> 00:10:37,610 Otherwise our website won't be able 217 00:10:37,610 --> 00:10:40,577 to connect to it after it was deployed.