1 00:00:01,150 --> 00:00:04,950 So let's now manually deploy forkify project 2 00:00:04,950 --> 00:00:09,430 to an amazing and free hosting service called Netlify 3 00:00:11,530 --> 00:00:13,400 But before we can do that, 4 00:00:13,400 --> 00:00:16,240 we now need to create the final bundle of, 5 00:00:16,240 --> 00:00:20,160 our application by running this belt command. 6 00:00:20,160 --> 00:00:21,620 So up until this point, 7 00:00:21,620 --> 00:00:24,980 we have always used the start command here, 8 00:00:24,980 --> 00:00:29,200 but that only works for development because the final output 9 00:00:29,200 --> 00:00:32,350 will actually contain the development server. 10 00:00:32,350 --> 00:00:36,400 And also the code is not being compressed and dead code is 11 00:00:36,400 --> 00:00:39,393 not being eliminated while in development. 12 00:00:40,640 --> 00:00:42,190 Now right? 13 00:00:42,190 --> 00:00:44,793 So let's open up our terminal. 14 00:00:46,010 --> 00:00:50,010 And so here we still have our start command running. 15 00:00:50,010 --> 00:00:52,840 And so let's finish that now by hitting 16 00:00:53,700 --> 00:00:56,470 Command C or actually 17 00:00:56,470 --> 00:00:57,810 Control C 18 00:00:57,810 --> 00:01:00,530 and alternatively, you can also simply 19 00:01:00,530 --> 00:01:04,143 kill this terminal by clicking this button here. 20 00:01:05,736 --> 00:01:06,569 All right. 21 00:01:07,720 --> 00:01:10,690 So, right now we no longer have, 22 00:01:10,690 --> 00:01:14,300 our development server running and parcel is now no longer 23 00:01:14,300 --> 00:01:18,053 automatically creating the Built as we say for application. 24 00:01:19,210 --> 00:01:22,360 And so now we are ready to run this belt command, 25 00:01:22,360 --> 00:01:27,343 but before let's actually delete this parcel cash folder and 26 00:01:27,343 --> 00:01:29,630 on this folder as well. 27 00:01:29,630 --> 00:01:31,630 So I like to delete these 28 00:01:31,630 --> 00:01:34,933 in order to basically get a fresh start. 29 00:01:36,430 --> 00:01:40,083 Now this build command here is actually not yet complete, 30 00:01:41,260 --> 00:01:42,870 because in the build command, 31 00:01:42,870 --> 00:01:47,260 we actually need to manually specify that we want our output 32 00:01:47,260 --> 00:01:51,530 to be here in the dist folder, okay? 33 00:01:51,530 --> 00:01:56,530 And so if you're on version two of parcel, like I am okay. 34 00:01:56,920 --> 00:02:00,464 So in that case specify the dist 35 00:02:00,464 --> 00:02:02,613 DIR option. 36 00:02:03,450 --> 00:02:06,500 So dash dash, dist D I R, 37 00:02:06,500 --> 00:02:10,660 which stands for distribution directory basically. 38 00:02:10,660 --> 00:02:13,630 And then we need to specify the folder that we actually 39 00:02:13,630 --> 00:02:15,330 want to be created. 40 00:02:15,330 --> 00:02:19,193 So just like before, let's call that the dist folder. 41 00:02:20,370 --> 00:02:23,890 Now what's also very important is that here we need to 42 00:02:23,890 --> 00:02:27,110 change from main to default. 43 00:02:27,110 --> 00:02:28,780 So very important. 44 00:02:28,780 --> 00:02:32,523 Otherwise this build command will not run in parcel two. 45 00:02:33,470 --> 00:02:36,903 So again, change this main here to default. 46 00:02:38,200 --> 00:02:42,160 And I believe that this is actually because of some bug that 47 00:02:42,160 --> 00:02:46,810 currently happens in the better one version of parcel two. 48 00:02:46,810 --> 00:02:50,323 But never mind with that, we actually fixed that problem. 49 00:02:51,400 --> 00:02:54,580 Now, if you are using parcel one, for some reason, 50 00:02:54,580 --> 00:02:56,140 then here instead 51 00:02:56,140 --> 00:02:59,220 of dist directory, 52 00:02:59,220 --> 00:03:01,970 it is called out directory. 53 00:03:01,970 --> 00:03:03,910 So like this, but again, 54 00:03:03,910 --> 00:03:07,930 that is only if you are on version one of parcel. 55 00:03:07,930 --> 00:03:12,930 And so now this command here is ready for us to execute it. 56 00:03:13,160 --> 00:03:16,550 So NPM run built 57 00:03:17,580 --> 00:03:19,233 and then let's wait for it. 58 00:03:21,280 --> 00:03:25,000 So as always, it takes some time here, but when it's done, 59 00:03:25,000 --> 00:03:28,560 we are ready to then deploy it to folder that was just 60 00:03:28,560 --> 00:03:31,920 created to, our Netflify server. 61 00:03:31,920 --> 00:03:33,370 And here it is, 62 00:03:33,370 --> 00:03:38,370 and now it contains the final code compressed and ready to 63 00:03:38,620 --> 00:03:39,453 be shipped. 64 00:03:40,380 --> 00:03:41,680 Okay. 65 00:03:41,680 --> 00:03:45,320 Now, if you got any error during this build process, 66 00:03:45,320 --> 00:03:49,760 while you're using a parcel two, then please make sure that 67 00:03:49,760 --> 00:03:51,910 you really set this default here 68 00:03:53,620 --> 00:03:55,810 and also make sure that 69 00:03:55,810 --> 00:03:59,140 everything here is correctly spelled like this. 70 00:03:59,140 --> 00:04:01,470 But if the problem still persists, 71 00:04:01,470 --> 00:04:06,370 then it might be a good idea to downgrade, to parcel one. 72 00:04:06,370 --> 00:04:11,247 And so you would do that with NPM uninstalled like this, 73 00:04:12,880 --> 00:04:14,130 and then after that, 74 00:04:14,130 --> 00:04:19,130 you would install it again at version one like this. 75 00:04:19,560 --> 00:04:21,440 And so that should then work. 76 00:04:21,440 --> 00:04:25,123 And remember that in that case here it is out DIR 77 00:04:26,278 --> 00:04:27,111 and not dist, 78 00:04:27,111 --> 00:04:31,410 and also you would have to go to all your views and change 79 00:04:31,410 --> 00:04:33,940 the way you import the icons. 80 00:04:33,940 --> 00:04:37,670 So you would have to remove this part here, okay? 81 00:04:37,670 --> 00:04:39,960 So wherever you import the icons, 82 00:04:39,960 --> 00:04:41,770 if you're using parcel one, 83 00:04:41,770 --> 00:04:44,533 remember you have to take out this part. 84 00:04:46,260 --> 00:04:47,130 Okay. 85 00:04:47,130 --> 00:04:49,200 But then after everything is done, 86 00:04:49,200 --> 00:04:51,570 and once you have this, dist folder, 87 00:04:51,570 --> 00:04:55,193 we are ready to go to Netlify and actually deploy this. 88 00:04:56,490 --> 00:04:58,490 So let's go back to our browser. 89 00:04:58,490 --> 00:05:02,840 And here I already have netlifly.com open. 90 00:05:02,840 --> 00:05:05,330 Now, Netlify is a free service 91 00:05:05,330 --> 00:05:08,450 that lets us developers basically 92 00:05:08,450 --> 00:05:12,990 deploy static webpages or static web applications. 93 00:05:12,990 --> 00:05:13,990 And with static, 94 00:05:13,990 --> 00:05:17,680 we mean that the application only contains HTML, 95 00:05:17,680 --> 00:05:21,990 CSS and JavaScript files, as well as some images, 96 00:05:21,990 --> 00:05:25,800 but no database or no server side code at all. 97 00:05:25,800 --> 00:05:27,280 All right. 98 00:05:27,280 --> 00:05:31,440 So basically Netlify only works for front end applications. 99 00:05:31,440 --> 00:05:33,820 Like the one that we just built. 100 00:05:33,820 --> 00:05:37,410 So Netlify is really an amazing service. 101 00:05:37,410 --> 00:05:41,120 It's extremely easy to set up and to use. 102 00:05:41,120 --> 00:05:43,920 It has a very generous, free plan, 103 00:05:43,920 --> 00:05:48,160 and it contains a lot of great features that you can also 104 00:05:48,160 --> 00:05:49,630 use for free. 105 00:05:49,630 --> 00:05:53,670 And one of these features is called continuous integration 106 00:05:53,670 --> 00:05:58,030 with git, which we will use a bit later in the section. 107 00:05:58,030 --> 00:06:01,330 And I'm telling you all these great things about Netlify 108 00:06:01,330 --> 00:06:05,490 not because I'm sponsored by them, not by any means. 109 00:06:05,490 --> 00:06:09,400 It's simply because I really, really love this service. 110 00:06:09,400 --> 00:06:11,610 It's just fantastic. 111 00:06:11,610 --> 00:06:15,040 Now, if you need something even more simple, 112 00:06:15,040 --> 00:06:17,620 without even having to open an account, 113 00:06:17,620 --> 00:06:20,750 you can also use this surge service, 114 00:06:20,750 --> 00:06:23,750 which is also free and it's even easier. 115 00:06:23,750 --> 00:06:26,670 So here you don't have to create an account and you can 116 00:06:26,670 --> 00:06:30,240 simply NPM install, surge on your computer. 117 00:06:30,240 --> 00:06:33,770 And then once you're in the folder you want to publish. 118 00:06:33,770 --> 00:06:35,490 So you want to deploy. 119 00:06:35,490 --> 00:06:38,930 All you have to do is to run the surge command, 120 00:06:38,930 --> 00:06:40,030 but anyway, 121 00:06:40,030 --> 00:06:43,580 we will now use Netlify in the section. 122 00:06:43,580 --> 00:06:47,120 And so if I convinced you that it's worth using it, 123 00:06:47,120 --> 00:06:51,380 then please go ahead now and sign up for your free account. 124 00:06:51,380 --> 00:06:53,810 Now, of course, I already have my account. 125 00:06:53,810 --> 00:06:56,803 And so I will wait here until you're ready. 126 00:06:59,480 --> 00:07:02,940 Now Okay, and so this is how it should look like once 127 00:07:02,940 --> 00:07:06,140 you log in into your Netlify account, 128 00:07:06,140 --> 00:07:07,400 now it might've changed 129 00:07:07,400 --> 00:07:10,140 sometime after I recorded this video, 130 00:07:10,140 --> 00:07:11,030 but in general, 131 00:07:11,030 --> 00:07:13,750 this should be kind of what it looks like. 132 00:07:13,750 --> 00:07:15,054 So you see, 133 00:07:15,054 --> 00:07:17,750 I already have a lot of sites here. 134 00:07:17,750 --> 00:07:18,997 So basically that's all the demo projects 135 00:07:18,997 --> 00:07:22,260 that I have been showing you. 136 00:07:22,260 --> 00:07:24,010 And so, again for that, 137 00:07:24,010 --> 00:07:27,320 I use Netlify because it's so easy. 138 00:07:27,320 --> 00:07:29,140 And speaking of easy, let me now 139 00:07:29,140 --> 00:07:33,240 show you how easy it actually is to quickly and manually 140 00:07:33,240 --> 00:07:36,560 deploy our forkify project. 141 00:07:36,560 --> 00:07:40,033 So let's go to our project folder here. 142 00:07:43,300 --> 00:07:45,510 So this one right here, 143 00:07:45,510 --> 00:07:47,950 and then we take the disc folder 144 00:07:47,950 --> 00:07:49,310 because that's the folder 145 00:07:49,310 --> 00:07:51,240 that we want to deploy. 146 00:07:51,240 --> 00:07:53,670 So our built that we just created, 147 00:07:53,670 --> 00:07:58,030 and then we take that folder and we simply drag and drop it 148 00:07:58,030 --> 00:07:59,500 here into the interface 149 00:08:01,380 --> 00:08:02,663 and drop it there. 150 00:08:03,820 --> 00:08:07,153 And that's it, or page is now deployed. 151 00:08:08,570 --> 00:08:10,533 So you see how easy that was. 152 00:08:11,800 --> 00:08:15,480 So we get to this page here with this random name that we 153 00:08:15,480 --> 00:08:16,463 can click on, 154 00:08:18,883 --> 00:08:20,000 and this is our webpage, 155 00:08:20,000 --> 00:08:22,400 and now everyone can see it. 156 00:08:22,400 --> 00:08:27,260 So it's now in fact deployed on this live server on this 157 00:08:27,260 --> 00:08:31,040 URL now this is not ideal though. 158 00:08:31,040 --> 00:08:32,537 So this random URL, 159 00:08:33,630 --> 00:08:37,340 and so we can click here on site settings and change the 160 00:08:37,340 --> 00:08:39,710 name of our site. 161 00:08:39,710 --> 00:08:41,060 So come down here 162 00:08:41,060 --> 00:08:44,283 and then change site name. 163 00:08:45,830 --> 00:08:47,280 Okay, and so I'm calling 164 00:08:47,280 --> 00:08:52,040 this forkify dash Jonas, 165 00:08:52,040 --> 00:08:55,320 and you can then go ahead and call yours forkify and then 166 00:08:55,320 --> 00:08:56,754 with your name. 167 00:08:56,754 --> 00:08:58,950 And of course this name has to be unique. 168 00:08:58,950 --> 00:09:02,663 And so just make sure that you're using some unique name. 169 00:09:04,300 --> 00:09:07,780 Alright, now we can click here again and now, 170 00:09:07,780 --> 00:09:10,563 our domain name here makes a bit more sense. 171 00:09:11,490 --> 00:09:12,323 All right. 172 00:09:12,323 --> 00:09:14,240 And that's actually it. 173 00:09:14,240 --> 00:09:17,250 So this is how easy it really is. 174 00:09:17,250 --> 00:09:20,270 But the great thing about Netlify is not only that 175 00:09:20,270 --> 00:09:22,900 it's easy, but as I mentioned before, 176 00:09:22,900 --> 00:09:26,670 also some of the great features and one of them is that 177 00:09:26,670 --> 00:09:28,550 automatically our page 178 00:09:28,550 --> 00:09:32,413 is now secured with an SSL certificate. 179 00:09:33,360 --> 00:09:35,520 So if we check out the URL, 180 00:09:35,520 --> 00:09:38,360 you see that it actually is HTTPS, 181 00:09:38,360 --> 00:09:39,540 all right? 182 00:09:39,540 --> 00:09:41,850 And all of that is automatically included 183 00:09:41,850 --> 00:09:44,023 for free in our account. 184 00:09:44,900 --> 00:09:48,920 And another thing that's great is that all our site assets, 185 00:09:48,920 --> 00:09:52,960 so all the files that we just deployed were in fact deployed 186 00:09:52,960 --> 00:09:57,860 to a so-called content delivery network or CDN. 187 00:09:57,860 --> 00:10:02,170 And that means that instead of uploading the files only to 188 00:10:02,170 --> 00:10:05,280 one server in one location in the world, 189 00:10:05,280 --> 00:10:08,640 our site now actually lives in many locations. 190 00:10:08,640 --> 00:10:12,940 So in many servers spread out across the entire world. 191 00:10:12,940 --> 00:10:16,620 And so then when a user is trying to access our page, 192 00:10:16,620 --> 00:10:19,103 they will then get diversion from the server 193 00:10:19,103 --> 00:10:21,360 that is closest to them. 194 00:10:21,360 --> 00:10:24,990 And so this will then greatly speed up the delivery time off 195 00:10:24,990 --> 00:10:27,870 your page or your application. 196 00:10:27,870 --> 00:10:31,940 So again, a lot of great features, really easy to use. 197 00:10:31,940 --> 00:10:36,940 And yeah, that's why I recommend Netlify to everyone. 198 00:10:36,950 --> 00:10:40,870 And I'm demonstrating all this using the forkify project, 199 00:10:40,870 --> 00:10:44,970 but of course it will work the exact same way for any other 200 00:10:44,970 --> 00:10:47,990 project that you might want to deploy. 201 00:10:47,990 --> 00:10:52,823 So as long as it is a static project, this is how it works. 202 00:10:53,730 --> 00:10:55,040 But anyway, 203 00:10:55,040 --> 00:10:59,300 this is how we deploy a project manually to Netlify. 204 00:10:59,300 --> 00:11:01,970 However, there is also a better way. 205 00:11:01,970 --> 00:11:06,220 So basically a way which allows us to automate the process 206 00:11:06,220 --> 00:11:09,410 of deploying the application and for that, 207 00:11:09,410 --> 00:11:13,110 we will need something called version control and git. 208 00:11:13,110 --> 00:11:15,943 And so let's take a look at that in the next video.