WEBVTT 00:00.450 --> 00:03.750 All right, guys, here is the moment of truth. 00:04.170 --> 00:10.650 It's no fun making a newsletter sign up webapp if we can only sign up ourselves through localhost, 00:10.650 --> 00:11.010 right. 00:11.280 --> 00:18.480 So let's deploy our Web app so that we can send anyone the link and they can access our server to sign 00:18.480 --> 00:25.800 up to our newsletter and get rid of this localhost business because we're no longer just deploying static 00:25.800 --> 00:26.540 websites. 00:26.790 --> 00:34.410 We can't use GitHub pages or any servers that only support static content unless we want to build our 00:34.410 --> 00:39.600 own service stack and live with noisy servers running 24/7. 00:39.840 --> 00:42.910 And believe me, it's really noisy and it's really hot. 00:42.930 --> 00:49.140 I've done this before and it's a lot of fun, but nobody will ever want to live with you unless you're 00:49.140 --> 00:50.670 in Iceland or something. 00:51.180 --> 00:57.240 Buying and setting up your own servers is a lot of work because you need to keep it running 24/7. 00:57.240 --> 01:00.900 You need to maintain the software and solve any problems that you come across. 01:00.900 --> 01:02.100 And there's a lot of problems. 01:02.350 --> 01:09.420 Instead, we're going to rent some servers from somebody else so they can have all of the hassle and 01:09.420 --> 01:15.960 all the pain of keeping our servers up and making sure that people can access it over the World Wide 01:15.960 --> 01:16.260 Web. 01:16.680 --> 01:20.760 So some of the best people who provide the service is Heroku. 01:20.940 --> 01:29.370 And the best part is they let you rent their servers for free so you can create up to five project for 01:29.370 --> 01:30.450 free with them. 01:30.690 --> 01:37.620 And they will host your server to keep your website live on the Internet and want your app gets popular 01:37.620 --> 01:41.010 and you have lots and lots of requests to your server. 01:41.220 --> 01:46.890 Then you can scale it up dynamically with Hiroku pretty much just by using a slider bar. 01:46.920 --> 01:52.800 And immediately you can get access to more servers who can respond to requests from more browsers. 01:53.010 --> 01:58.350 And this is when you've made it in the world and you've become Pokémon go or some huge hit. 01:58.560 --> 02:00.510 They can support your success as well. 02:00.720 --> 02:04.900 And only at that stage do you start paying them for that privilege. 02:05.430 --> 02:11.880 So obviously the first step is signing up for their services and you don't have to provide a credit 02:11.880 --> 02:14.340 card and it's completely free to sign up. 02:14.730 --> 02:18.510 So if you haven't got a Hiroku account, then sign up right now. 02:18.930 --> 02:25.920 And once you have done, then you can go ahead and log into your account and you will land on your dashboard. 02:26.310 --> 02:33.540 Now, Hiroku has really good documentation, which you can find at Def Center dot Heroku dot com, and 02:33.540 --> 02:40.170 we can click on the get started button to take a look at their step by step guide for deploying our 02:40.170 --> 02:41.130 first app. 02:41.610 --> 02:48.840 So we're going to choose no Geass because that's what our code is based on and we're going to use that 02:48.840 --> 02:53.280 step by step guide to upload our code and make our server go life. 02:53.850 --> 02:57.600 So the first step is to download the Hiroku command line interface. 02:58.050 --> 03:04.080 So when you click on it, it should automatically choose for you the right version, be it Mac or Windows 03:04.410 --> 03:05.880 or other systems. 03:06.210 --> 03:12.300 And once you've gone through the wizard and installed it, then you can begin to use the Hiroku command 03:12.300 --> 03:13.920 from your command SQL. 03:14.190 --> 03:16.110 So that's going to be hyper for us. 03:16.530 --> 03:25.470 So once it's installed, you should be able to write Hiroku log in and you will need to enter your email 03:25.470 --> 03:28.920 and password that you signed up to Hiroku with. 03:28.920 --> 03:30.630 So don't forget those things. 03:30.870 --> 03:37.320 Now, once you've authenticated, then we can go ahead and do the other version checks. 03:37.740 --> 03:43.830 So for example, you can check for the version of anything you've installed just by writing the item, 03:43.830 --> 03:47.010 say Heroku and you can say dash dash version. 03:48.210 --> 03:53.700 So our Hiroku is currently up to date and it's running seven point zero point forty one. 03:54.270 --> 03:59.070 Now, the next thing is that they're saying that this tutorial will work for any version of node greater 03:59.070 --> 03:59.790 than eight. 04:00.210 --> 04:01.710 So we can check that on. 04:01.710 --> 04:04.050 Node version is greater than eight. 04:04.440 --> 04:07.290 And it is it's eight point eleven point one. 04:07.410 --> 04:08.210 So perfect. 04:08.790 --> 04:12.570 Now, the other thing is that NPM is installed with node. 04:12.780 --> 04:18.300 So let's make sure that we've actually got NPM so we can say NPM Dasch version. 04:18.300 --> 04:23.580 And of course, if you have a version, then that means that this item is obviously installed. 04:24.060 --> 04:28.890 The last thing to check is gett and to make sure that we've installed it. 04:29.760 --> 04:35.910 And if you haven't, you can simply click on this link and you can go ahead and download for your system 04:36.120 --> 04:37.170 and install it. 04:37.770 --> 04:43.470 So we're going to be covering Ghiz and GitHub in a lot more detail in the next module. 04:43.800 --> 04:48.660 But at the moment, we're just going to use this tutorial to have everything up and running. 04:49.020 --> 04:55.080 And once you've checked all three of these and everything's ready to go, then we can click and confirm 04:55.080 --> 04:56.280 and go to the next step. 04:56.760 --> 04:59.820 So the next step is to prepare our. 05:00.750 --> 05:07.700 So in their case, they're asking you to use their sample app, which is something that they've created, 05:07.710 --> 05:13.670 and you can see the code for it over here, it's got some noad code and allows you to test out Hiroku. 05:14.310 --> 05:20.780 But in our case, we actually want to deploy our current app, which is the newsletter sign up website. 05:21.120 --> 05:23.400 So we're not going to follow their steps here. 05:23.490 --> 05:25.860 Instead, we're going to prepare our own app. 05:26.040 --> 05:31.010 Now, there's a couple of things that you have to do in order to update it so that it will work on Heroku. 05:31.410 --> 05:34.200 And the first thing is inside your app. 05:35.220 --> 05:39.760 Currently we are listening on a local port, which is the Port 3000. 05:40.110 --> 05:48.210 Now, once we upload our code onto Heroku servers, then our code will be running on their system and 05:48.210 --> 05:51.710 their server might not want to use the Port 3000. 05:51.960 --> 05:56.580 So the way that Hiroku works is that it might pick and choose a port for you. 05:56.850 --> 06:04.530 So to enable this, you have to tap into something called process dot, EMV, dot port and the port 06:04.530 --> 06:05.340 is in caps. 06:05.760 --> 06:10.520 So this is basically a dynamic port that Heroku will define on the go. 06:10.830 --> 06:16.500 So at any given point, it might decide to deploy your app to Port 3000 or 5000 or whatever it is on 06:16.500 --> 06:17.820 their local system. 06:18.180 --> 06:24.590 So by changing our port to this, it'll allow us to work seamlessly with their system. 06:25.020 --> 06:31.650 But the problem is that if we try to run this app now locally using localhost, then our computer won't 06:31.650 --> 06:36.820 know what this is all about because this process object is defined by Hiroku. 06:37.230 --> 06:43.470 So what we can do here, if we want to run it, both testing locally as well as deploying to Hiroku, 06:43.710 --> 06:49.680 if we want to do that simultaneously, then we can tell our app to listen on this port for Hiroku, 06:50.040 --> 06:56.590 but also add an OR to tell it that you can listen on 3000 when we're running locally. 06:56.910 --> 07:03.910 So by putting in this as the port, then our app will work both on Hiroku as well as our local system. 07:04.440 --> 07:07.680 So now that we've set that, let's go ahead and hit save. 07:07.960 --> 07:12.030 And the next thing that we have the change is we need to create a profile. 07:12.270 --> 07:17.040 This is the file that Hiroku is going to check to see how to launch your app. 07:17.460 --> 07:23.160 Now, currently we've been launching our app with no money, just so that it's constantly refreshing 07:23.160 --> 07:26.040 in the background and updating any changes. 07:26.190 --> 07:32.850 But normally we would runner up using the command node and then the name of our server file, which 07:32.850 --> 07:33.870 in our case is app. 07:34.800 --> 07:40.650 So in order for Heroku to figure out what command to run in order to launch the app, we need to specify 07:40.650 --> 07:40.950 this. 07:40.950 --> 07:47.490 In this format, we need to say Web kolon, which is the process type, and then the command that we 07:47.490 --> 07:49.970 need to use in order to launch our app. 07:50.220 --> 07:53.640 So let's go ahead and add this to our site. 07:53.890 --> 08:01.230 So I'm going to cross over to our project, which is currently in my case, under desktop slash newsletter, 08:01.230 --> 08:01.890 sign up. 08:02.310 --> 08:09.060 And then once I'm inside this project directory, then I'm going to create this proc file. 08:09.990 --> 08:17.010 Now, it's really important that if you read their documentation on proc file, it can't be named something 08:17.010 --> 08:18.930 like proc file, dot text. 08:19.180 --> 08:25.980 It just has to be called project file with no extensions and it has to be spelled exactly the same way 08:26.280 --> 08:26.910 with P. 08:27.630 --> 08:31.340 So just make sure that you're careful when you type this in and when you create this file. 08:31.980 --> 08:37.920 Now that we've created this file, let's right click to open it using Atem and inside here we're going 08:37.920 --> 08:45.500 to type Web Kolon and then it's how we're going to start our process which is going to be node apgar's. 08:45.990 --> 08:52.770 So this is all that we need to tell Hiroku how to launch our app and also which file actually contains 08:52.770 --> 08:53.660 our server code. 08:53.790 --> 09:00.720 So sometimes you might decide to name this indexed JS or Apgar's or server Dodgers, and Hiroku doesn't 09:00.720 --> 09:02.530 know which it is that you want to use. 09:02.760 --> 09:05.940 So it's important to add this file and this line. 09:06.630 --> 09:12.890 And the next step is to save our work, to get in order to do this. 09:12.900 --> 09:17.070 The first thing is to make sure that we are in the right place. 09:17.400 --> 09:27.170 So make sure that this part, which comes after your laptop's name, is at the location of your project. 09:27.540 --> 09:30.900 So this should be the project folders name. 09:31.290 --> 09:37.950 If it's not the make sure that you add to it and remember that you can drag and drop folders into the 09:37.950 --> 09:40.710 terminal so that it will navigate to that address. 09:40.920 --> 09:49.910 And that address has to be the folder that contains all of your package, JSON node modules and APGAR'S. 09:50.640 --> 09:57.300 This is the project folder and we've confirmed that we are at that position and the next thing we're 09:57.300 --> 09:59.430 going to do is we're going to say get. 09:59.980 --> 10:07.870 It and this will initialise a brand new git repository now it is a swear word in English, but it's 10:07.870 --> 10:15.200 also a way of allowing you to save all the different versions of your app or your code. 10:15.610 --> 10:22.390 So remember when you used to write essays in high school or in or for college, you would save the essay 10:22.390 --> 10:30.040 and you would say essay final and then you realize that there's some changes and then it becomes essay 10:30.040 --> 10:35.530 final, final, and then it gets to essay Final four, real essay, definitely final. 10:35.860 --> 10:39.780 And at some point it just gets out of control and you don't know which one's actually final. 10:39.790 --> 10:47.560 This has happened to me so many times, but git and version control allows you to save each and every 10:47.560 --> 10:49.460 time point of your work. 10:49.480 --> 10:54.760 So it's almost like having a time machine for all of your projects so that you can roll back to any 10:54.760 --> 10:59.740 time in the past and you can create experimental branches and mess around with your code. 10:59.920 --> 11:03.490 And there's going to be all of that goodness that's coming up in the next module. 11:03.910 --> 11:10.390 But for now, we're going to use Git and we're going to add all of our files that are in this current 11:10.390 --> 11:11.130 repository. 11:11.410 --> 11:14.080 So that's been added to our version control. 11:14.530 --> 11:20.880 And the next step is we're going to commit our changes to this current version. 11:20.890 --> 11:28.000 So this key word means that we are starting a new version, say, version three, or in our case, it's 11:28.000 --> 11:32.470 actually version one, because we haven't been committing all of our changes. 11:32.920 --> 11:37.480 And we can also get to as a message by adding the M flag. 11:37.480 --> 11:41.920 So Dash M and then we're going to specify a string, which is our message. 11:42.100 --> 11:48.370 So we're going to say first, commit or any message you wish, and then we're going to hit enter and 11:48.370 --> 11:51.490 all of our files and everything gets committed. 11:52.060 --> 11:58.510 So now that we've done that, we are in sync with the tutorial and we can go to the next step. 11:59.110 --> 12:08.320 Now, the next step is to deploy this app, and they want you to create a new app on Hiroku using the 12:08.320 --> 12:10.330 key word Hiroku create. 12:11.350 --> 12:15.370 Now, at this stage, you have to be logged in in order for this to succeed. 12:15.730 --> 12:19.780 If you aren't ill, ask you for your Heroku password and username again. 12:20.140 --> 12:27.020 But if everything looks green and blue and not red, then that means everything's working fine. 12:27.520 --> 12:31.030 So now they've created your brand new container. 12:31.030 --> 12:39.490 So your brand new server has been created at this address HDB Saltpetre Heroku app Dotcom. 12:39.490 --> 12:41.800 And you can check it out by just clicking on it. 12:42.280 --> 12:44.980 And you can see this is welcome to your new app. 12:44.980 --> 12:48.460 But it doesn't have any content yet because we haven't pushed it over. 12:48.880 --> 12:51.350 So let's continue with their tutorial. 12:51.910 --> 12:59.530 The final thing that we have to do before we can get our app life is to write, get push her Roku master 12:59.890 --> 13:07.000 and this will push our local version that's been stored using it to her Roku. 13:07.960 --> 13:16.690 So let's try it out, get push her Roku master, and that will take a little bit of time of uploading 13:16.690 --> 13:25.590 all of our local files relating to on node app and it will send that to her Roku's servers on the Internet. 13:28.890 --> 13:37.320 And once it's done, it will show you verifying deploy done and we can access it at the previous location 13:37.320 --> 13:37.960 that we had. 13:38.160 --> 13:42.600 So let's refresh this page and just a word of warning. 13:42.600 --> 13:48.660 You might get an application error when you try to load up the site immediately. 13:49.050 --> 13:54.990 Now, it's important that you give Heroku just a few minutes for it to set up all of this fancy, complicated 13:54.990 --> 14:00.520 stuff for you behind the scenes and come back to it maybe after five or 10 minutes. 14:01.020 --> 14:03.240 So this is our moment of truth. 14:03.270 --> 14:10.260 Let's go ahead and test our app that is running on the web and see if this works. 14:11.550 --> 14:12.990 So I'm going to click sign me up. 14:13.260 --> 14:13.830 Awesome. 14:13.840 --> 14:20.700 You've been successfully sign up to the newsletter, and if I refresh on my MailChimp, then I can see 14:20.700 --> 14:27.460 that my latest person has been added from a live and up and running website. 14:27.630 --> 14:32.850 So if you've gotten to this point and everything is working just as it is, then it's time to really 14:32.850 --> 14:38.610 pat yourself on the back, because we did a lot of really complex things just now in this module. 14:38.730 --> 14:44.730 And without tools such as Hiroku or Noad or Express, we would have spent a month or two writing the 14:44.730 --> 14:48.380 code and then maybe another two months building our own service stack. 14:48.750 --> 14:51.890 This is really, really cool what we have done. 14:51.950 --> 14:58.350 But if you had any problems doing any of that, make sure that you check the Heroku logs and it will 14:58.350 --> 15:02.400 usually give you an indication of what might have gone wrong. 15:02.430 --> 15:09.870 So, for example, say, if I forgot to change the port to process Emberg port, then you might end 15:09.870 --> 15:13.380 up with a page that looks something like this. 15:13.980 --> 15:19.290 And in that case, of course, it's going back to the Hiroku logs, which will help you. 15:19.740 --> 15:25.410 Then it'll say something like Web process failed to bind to port within 60 seconds of launch. 15:25.560 --> 15:27.950 And it didn't work, basically. 15:28.260 --> 15:34.680 And essentially it's trying and trying again, but it can't bind to the port that Heroku needs to bind 15:34.680 --> 15:35.010 it to. 15:35.250 --> 15:38.430 And that's all because of forgetting this step. 15:38.850 --> 15:44.310 And in other cases, you might have forgotten to add a profile or you might have misspelled the profile 15:44.520 --> 15:50.100 or you might have not added the actual name of your server, or you might have some typos here. 15:50.400 --> 15:55.900 And again, you will see the crash logs by using the Hiroku logs command. 15:55.920 --> 16:00.630 So this is really, really helpful to diagnose what might have gone wrong. 16:00.810 --> 16:08.280 But once you are done and you have completed your app, then updating your app is as simple as going 16:08.280 --> 16:10.420 into here, making some changes. 16:10.440 --> 16:18.720 So, for example, let's change our success page to Brillion instead of awesome because awesome is really 16:18.720 --> 16:19.830 awesomely overused. 16:21.240 --> 16:29.190 And in order to push those updates to Hiroku, all you have to do is again use git add to add your changes, 16:29.550 --> 16:31.990 get commit to save this current version. 16:32.010 --> 16:42.900 So this current version is different because I changed the success page each one and now I can again 16:42.900 --> 16:51.260 do get push to Hiroku Master and that will update my website with the changes. 16:51.270 --> 16:56.310 So that includes the change to the each one in the success page. 16:56.700 --> 17:04.110 Now once that is done, I can head over to my website to go and check it out because this is no longer 17:04.110 --> 17:05.280 running on the localhost. 17:05.520 --> 17:10.240 I can share this Jarrel with anybody and they can sign up to my newsletter. 17:10.740 --> 17:16.320 So this is a good time to mention that if you want to sign up to the App Brewery's newsletter, then 17:16.320 --> 17:21.330 be sure to head over to approve slash P. Slash newsletter. 17:21.510 --> 17:26.970 And we only send this out once a month so that we can collect all of the best stuff that happened during 17:26.970 --> 17:27.360 the month. 17:27.570 --> 17:33.180 And we will send you this short and sweet newsletter that will hopefully teach you five new things every 17:33.180 --> 17:41.760 month about programming, design up cool new tools to try and also the app showcase of the best things 17:41.760 --> 17:43.760 that our students have built in this month. 17:44.190 --> 17:46.610 So that's just a little plug from me. 17:46.650 --> 17:49.800 I hope you enjoyed building this awesome project. 17:49.980 --> 17:57.540 And in the next module we're going to be looking into GitHub and get to learn much more about version 17:57.540 --> 18:00.330 control and how all of this magic actually works. 18:00.660 --> 18:02.220 So all of that and more. 18:02.340 --> 18:03.570 I'll see you on the next module. 18:37.240 --> 18:38.920 Before we start deploying.