WEBVTT 00:06.450 --> 00:13.080 Now this you have gained a good understanding of version control using get and how to manage remote 00:13.260 --> 00:15.640 repositories using GitHub. 00:15.660 --> 00:21.000 The next step is to deploy your file explorer up to the Web to do this. 00:21.000 --> 00:28.800 You are going to create a get repository locally for your app and then deploy that repository to the 00:28.860 --> 00:29.880 Web. 00:29.880 --> 00:35.940 This means that you will need to host your app on a remote server which will serve your app to users 00:36.090 --> 00:39.840 around the world 24 hours a day. 00:39.840 --> 00:43.770 This is why you will need a cloud platform. 00:43.770 --> 00:49.260 Now the favorite platform you can use for this purpose is Hiroko. 00:49.260 --> 00:56.070 And once you host Europe on the Hiroko server you'll be able to receive requests from users around the 00:56.070 --> 00:58.970 world and send them a response. 00:58.980 --> 01:03.640 Now there are many reasons backing up the Hiroko choice. 01:03.660 --> 01:07.750 First of all Hiroko supports no dates. 01:08.040 --> 01:14.910 It also supports many other programming languages like Java Python etc. so you can deploy apps written 01:15.030 --> 01:17.400 in those languages as well. 01:17.400 --> 01:28.870 Also Heroku comes with a free plan which you can use to test your apps without having to provide your 01:28.870 --> 01:30.550 credit card details. 01:30.550 --> 01:35.980 This is really a good solution for someone learning no dance or any other technology as this gives you 01:35.980 --> 01:41.950 the chance to play with things without having to worry too early about the financial side 01:44.810 --> 01:49.040 furthermore Hiroko allows you to scale your app. 01:49.040 --> 01:56.270 This means that if we have a surge in the number of users in the future or if you need more memory or 01:56.270 --> 02:03.890 processing needs of your growing up then you can easily upgrade your Heroku plan by adding more resources 02:03.950 --> 02:06.500 to cope with the new demand. 02:06.530 --> 02:13.730 Now to get started you would need to head to hear records book lamentation which is really well laid 02:13.730 --> 02:14.590 out. 02:14.660 --> 02:18.010 It can get you up and running really in no time. 02:18.560 --> 02:24.590 So I'm going to choose notorious before we continue. 02:24.620 --> 02:27.280 You would need to create an account and log in. 02:27.710 --> 02:29.570 So I'm going to log in now. 02:29.750 --> 02:36.590 So if you log in after creating a new account you will get a web page like this one and just a comments 02:36.680 --> 02:37.460 to log in. 02:37.460 --> 02:41.690 Just make sure you go to Heroku dot com and log in from there. 02:41.780 --> 02:45.420 The links there might not work. 02:45.730 --> 02:45.990 All right. 02:46.010 --> 02:50.680 So now going to refresh this page. 02:50.720 --> 02:52.280 So now I am locked in. 02:52.490 --> 02:55.750 And let's get started with no Jesus. 02:55.880 --> 02:57.590 So let's click on. 02:57.590 --> 02:59.760 I'm ready to start. 02:59.810 --> 03:07.380 So the first thing is to install the command line interface BCI. 03:07.760 --> 03:15.290 So this will help you manage your apps and also run them locally if you like. 03:15.290 --> 03:19.790 So you just need to choose the platform that you are using. 03:19.790 --> 03:23.420 So in my case I'm going to use the Mac OS installer 03:28.700 --> 03:33.860 and then you just need to keep clicking through the installation process and you will get this installed 03:33.890 --> 03:34.560 on your computer. 03:34.790 --> 03:39.560 So I'm not going to continue this one because I've already installed this is pretty straight forward. 03:39.720 --> 03:47.710 So now once you get this installed you just head to your terminal and then continue with the next steps. 03:48.080 --> 03:57.080 So if you try Hiroko logging This will allow you to log into your Hiroko account from the command line. 03:57.620 --> 04:05.280 So if you're already locked in in the browser then this will be pretty easy. 04:05.660 --> 04:06.880 Now you can press any button 04:12.990 --> 04:16.530 say Gates you click on log in. 04:16.660 --> 04:23.290 It didn't ask for my credentials because I'm already logged in now I am locked into direct from the 04:23.320 --> 04:23.860 command line. 04:29.390 --> 04:30.620 And just a comment. 04:30.620 --> 04:35.890 You really need gates installed on your computer to be able to use Hiroko. 04:36.230 --> 04:42.760 So we have installed gates earlier so we are fine now. 04:43.010 --> 04:50.210 You also need node installed and npm install as well so you've got those already and you need to make 04:50.210 --> 04:53.240 sure that's your new ID version is greater than 8. 04:53.370 --> 04:54.580 So we've got no division. 04:54.590 --> 05:07.100 Eleven let's take that and our NPM version is six points for one. 05:07.510 --> 05:10.050 And also we've got gates installed. 05:10.090 --> 05:11.530 And if we check the version 05:14.690 --> 05:18.390 of what version two points nineteen point two. 05:18.390 --> 05:19.380 Okay so let's click on. 05:19.380 --> 05:25.450 I have installed the Heroku CNY now the next step is to prepare the app. 05:25.830 --> 05:33.650 Now Hiroko will suggest that you clone an existing projects which they host in GitHub in our case. 05:33.660 --> 05:39.390 We're not going to do that because we've already created an app locally and we'd like to deploy that 05:39.430 --> 05:40.690 up in set. 05:40.710 --> 05:48.570 So I'm going to click on i click on the app source code and then we're going to deploy our own up now 05:48.570 --> 05:50.340 before deploying our up. 05:50.340 --> 06:01.520 Let's go to our projects folder which is inside this top node the node projects 06:07.520 --> 06:09.530 file explorer. 06:09.530 --> 06:19.290 So here I'm going to create a git repository by using the command get in its but then agreed to stage 06:19.380 --> 06:21.470 all files to be committed 06:25.110 --> 06:31.080 so if I run get Sage's I can see all the files. 06:33.470 --> 06:35.540 And after doesn't need to commit 06:38.620 --> 06:41.570 the message here is going to be initial commits. 06:41.580 --> 06:41.980 For example 06:44.980 --> 06:50.230 now to deploy the app I'm going to run the command Hiroko creates. 06:50.620 --> 06:55.600 Now if you run the command like this Erica is going to generate a random name for your app like that 06:55.600 --> 06:56.490 one. 06:56.560 --> 07:01.130 Otherwise if you want to use your own name you can discard the name there. 07:01.890 --> 07:04.470 I'm gonna call is my file explorer. 07:05.380 --> 07:07.200 So let's try this. 07:07.210 --> 07:14.980 And by the way once you run this command there will be a new gates remote Heroku which is gonna be created 07:15.520 --> 07:19.530 and associated with this local repository. 07:19.600 --> 07:24.620 So let's go ahead and run this command. 07:24.640 --> 07:27.520 Now you can see that the EU RL of Europe. 07:27.520 --> 07:32.760 So if you try this URL you should be able to access Europe. 07:34.470 --> 07:41.250 But actually it's not gonna work at the moment because something is still missing in our up. 07:41.340 --> 07:45.330 So that's the proc file. 07:45.660 --> 07:52.890 Now the profile will tell Hiroko what command you need to run in order to start the app. 07:53.430 --> 08:01.410 So if you remember when we were doing things locally we had to run node or node 1 followed by up NDIS 08:01.440 --> 08:04.200 days in order to start our up. 08:04.280 --> 08:08.990 Now Heroku has got no way to guess that. 08:09.090 --> 08:14.990 So we need to provide that somehow to Hiroko and that's through a proc file. 08:15.210 --> 08:19.260 So you need to create this pile in the root directory of your application. 08:19.260 --> 08:22.410 So let's open our project folder using brackets. 08:22.980 --> 08:30.190 So let's go back to the node folder and then open up all the using brackets. 08:30.230 --> 08:30.890 And here we go. 08:31.260 --> 08:41.210 Now we need to open or create this file make sure the name is exactly what's with a capital P. 08:45.780 --> 08:56.150 Like that's and let's add this line and specify the command we need to run in our case we can around 08:56.210 --> 08:59.480 node up dog chains. 08:59.960 --> 09:09.240 So now let's go back to our project folder and let's stage our files again 09:12.020 --> 09:18.850 so if I try gets stages I can see the new file and then let's make a commits 09:26.040 --> 09:28.390 and now let's push our changes to Heroku. 09:28.450 --> 09:34.450 So get push Roko and we push in the changes to the muscle branch 09:41.110 --> 09:44.920 this is going to take time depending on the size of your project. 09:45.140 --> 09:52.670 So I'm going to pause the video here and wait for this to upload so Hiroko declined our push. 09:52.820 --> 10:00.050 And that's mainly because we don't have a file called package both days on so we can see here there's 10:00.090 --> 10:03.500 no default language could be detected for our up. 10:03.500 --> 10:11.120 So what we need to do we need to create a package those days on file so you can use NPM to do that by 10:11.120 --> 10:19.070 running the command and in its he's going to ask you for some details. 10:19.070 --> 10:27.990 So he's gonna click onto perilous change the name of a package to something more you are real friendly 10:27.990 --> 10:30.690 so node or file explorer 10:35.030 --> 10:40.360 and I'm going to leave everything as defaults. 10:40.720 --> 10:45.490 So now we've got a package those days on file which has been created for us. 10:45.700 --> 10:53.770 The details you see inside this file are the same ones you submitted after running and PM in it so you 10:53.770 --> 11:08.130 can see that there is an update available for NPM so to update it I'm going to run this command. 11:08.210 --> 11:14.750 Now it looks like I need ceremonies as pseudo and it puts my password 11:19.470 --> 11:20.400 so I'm not locked in. 11:20.400 --> 11:29.210 As administrator at the moment right now let's try to push to Heroku again. 11:29.270 --> 11:30.680 So let's take our files 11:33.340 --> 11:36.100 and let's check Gates status. 11:36.190 --> 11:39.580 So we've got a new file and it's commits 11:46.140 --> 11:48.510 and finally let's push to Hiroko 11:55.000 --> 12:02.330 and I'm going to pause the video and wait for the whole project to be uploaded. 12:02.440 --> 12:06.960 So our push has been accepted this time thanks to the package does Jason File. 12:07.240 --> 12:16.900 So let's open our up using Hiroko open now it looks like there is an area that's occurred in our up 12:17.200 --> 12:20.560 so to do some debugging you can use this command 12:23.090 --> 12:30.290 and it will show you exactly what's happened and you can see here that's the where process failed to 12:30.320 --> 12:33.020 bind to the ports. 12:33.110 --> 12:43.700 So first let's check our code and make sure that we use the right value for the port so so let's have 12:43.700 --> 12:46.190 a quick look at our ports variable. 12:47.540 --> 12:53.300 So we said that to the ports property of process those. 12:53.620 --> 13:02.420 And that's supposed to be actually in capital letters and then otherwise if we don't find that we use 13:02.480 --> 13:03.640 3000. 13:03.680 --> 13:07.090 So this is supposed to be the origin of our error. 13:07.190 --> 13:08.980 So let's try again. 13:08.980 --> 13:15.200 And before doing that let's create a get ignore file where we're going to add our static folder so that 13:15.200 --> 13:17.600 we don't upload the folder again. 13:18.050 --> 13:21.470 So let's create this file dots 13:25.170 --> 13:29.520 gets ignore and let's add 13:32.370 --> 13:38.260 so ignore static order and the pathway for that is static. 13:38.680 --> 13:45.450 So this gets hard and then gets commits 14:06.140 --> 14:06.420 right. 14:06.420 --> 14:08.040 And now let's push to Hiroko 14:17.150 --> 14:17.350 now. 14:17.350 --> 14:26.020 It should take less time than earlier because we don't have to upload our static folder and now let's 14:26.020 --> 14:26.740 open our up 14:32.960 --> 14:34.100 this time it does work. 14:34.700 --> 14:35.300 So 14:38.770 --> 14:41.990 let's try one of these folders. 14:42.240 --> 14:44.180 You can see the contents there. 14:44.350 --> 14:51.130 Basically last modified shows the same value because all these files basically they were pushed at the 14:51.130 --> 14:51.940 same time. 14:51.940 --> 14:55.870 Now let's try another folder and make sure that everything works. 14:55.870 --> 15:07.670 So if I go to images and try one of these images then you can see that everything is still working. 15:07.860 --> 15:09.200 Let's go to videos 15:15.270 --> 15:15.620 here go. 15:15.630 --> 15:17.580 We can search the video if we like 15:26.970 --> 15:31.800 congratulations you have just deployed your new J.S. up to Heroku. 15:31.860 --> 15:34.170 So now you up is live. 15:34.200 --> 15:38.760 And anyone can access it from anywhere in the world. 15:38.850 --> 15:47.580 So if you go to your Hiroko apps web page and refresh it you will see your new app. 15:47.610 --> 15:47.860 Right. 15:47.860 --> 15:57.300 That again you built the app using pure node without having to use any external dependencies. 15:57.300 --> 16:04.320 So in the next modules you're going to learn more about node and master and more exciting features which 16:04.320 --> 16:05.680 you can add to your project's.