WEBVTT 1 00:00:01.240 --> 00:00:04.540 All right, so let's now finally set up 2 00:00:04.540 --> 00:00:07.773 the continuous integration with Netlify. 3 00:00:09.370 --> 00:00:13.323 And to do that, let's go back to our Netlify dashboard. 4 00:00:14.540 --> 00:00:17.460 So right here, and we are still 5 00:00:17.460 --> 00:00:22.460 here in the settings part of this site, okay? 6 00:00:22.720 --> 00:00:26.033 And so then let's go here to build and deploy. 7 00:00:27.220 --> 00:00:28.190 And then from here, 8 00:00:28.190 --> 00:00:33.190 we can choose the option link site to git, all right? 9 00:00:33.200 --> 00:00:35.120 Now, we could also do this 10 00:00:35.120 --> 00:00:37.390 right from the beginning like this, 11 00:00:37.390 --> 00:00:41.410 so without the manual deploy that we did in the beginning. 12 00:00:41.410 --> 00:00:44.503 So that would be like in the very beginning, 13 00:00:45.370 --> 00:00:48.683 we could simply create new site from git. 14 00:00:49.820 --> 00:00:52.530 But in this case we already have this site, 15 00:00:52.530 --> 00:00:56.640 and so we can now simply change this here 16 00:00:56.640 --> 00:00:58.363 to continuous integration. 17 00:00:59.350 --> 00:01:00.840 Now, in a nutshell, 18 00:01:00.840 --> 00:01:03.740 what continuous integration means 19 00:01:03.740 --> 00:01:08.740 or continuous deployment as Netlify apparently calls it, 20 00:01:09.000 --> 00:01:13.350 that basically is to connect a site to a git repository, 21 00:01:13.350 --> 00:01:17.160 and then whenever we change the code in our repository, 22 00:01:17.160 --> 00:01:19.410 then that will automatically trigger 23 00:01:19.410 --> 00:01:22.000 a new deployment of our site. 24 00:01:22.000 --> 00:01:25.550 And so then everything happens really automatically. 25 00:01:25.550 --> 00:01:28.430 So all we will have to do then is to basically 26 00:01:28.430 --> 00:01:33.030 build our code locally, committed to our git repository, 27 00:01:33.030 --> 00:01:35.390 then push that git repository 28 00:01:35.390 --> 00:01:37.980 to or remote repository on GitHub, 29 00:01:37.980 --> 00:01:39.110 and then from there, 30 00:01:39.110 --> 00:01:43.130 the site will automatically be built and deployed. 31 00:01:43.130 --> 00:01:45.560 So let me show you how that works. 32 00:01:45.560 --> 00:01:46.983 So link site to git. 33 00:01:48.130 --> 00:01:52.280 Then here, we can select the git provider that we want. 34 00:01:52.280 --> 00:01:53.990 And so, as I mentioned before, 35 00:01:53.990 --> 00:01:57.600 there are actually more services beside GitHub, 36 00:01:57.600 --> 00:02:00.070 like GitLab and Bitbucket, 37 00:02:00.070 --> 00:02:02.333 but we will use GitHub, of course. 38 00:02:03.870 --> 00:02:07.560 Then here we have to authorize the access to GitHub, 39 00:02:07.560 --> 00:02:10.280 which in my case here was already done, 40 00:02:10.280 --> 00:02:14.430 but you will probably have to authenticate yourself again. 41 00:02:14.430 --> 00:02:17.080 And then here we have all the repos 42 00:02:17.080 --> 00:02:19.580 that I have in my GitHub account, 43 00:02:19.580 --> 00:02:22.280 and so let's now search for forkify, okay? 44 00:02:26.800 --> 00:02:30.710 And so this here is the one that I just created previously. 45 00:02:30.710 --> 00:02:32.760 So forkify-course-video 46 00:02:32.760 --> 00:02:35.300 is exactly this one that we created 47 00:02:35.300 --> 00:02:37.870 in the last video, right? 48 00:02:37.870 --> 00:02:41.820 And of course yours will have to have a different name, 49 00:02:41.820 --> 00:02:45.770 but simply select that one then right here, all right? 50 00:02:48.330 --> 00:02:52.290 Then we can change which branch we want to deploy, 51 00:02:52.290 --> 00:02:55.870 and so we have these two, right? 52 00:02:55.870 --> 00:02:59.480 But of course we want the master branch. 53 00:02:59.480 --> 00:03:02.490 But now here comes the question. 54 00:03:02.490 --> 00:03:06.730 So where is the code that we actually want to deploy? 55 00:03:06.730 --> 00:03:07.563 Right? 56 00:03:07.563 --> 00:03:11.450 Because remember, the code that we do want to deploy 57 00:03:11.450 --> 00:03:15.130 is in the disc folder of our code. 58 00:03:15.130 --> 00:03:17.050 So if you go back here, 59 00:03:17.050 --> 00:03:19.660 the code that we manually deployed before 60 00:03:19.660 --> 00:03:21.890 was this disc folder. 61 00:03:21.890 --> 00:03:26.890 However, this disc folder is not in our repository, right? 62 00:03:27.090 --> 00:03:29.430 But that's not a problem at all, 63 00:03:29.430 --> 00:03:32.260 because we can now tell Netlify here 64 00:03:32.260 --> 00:03:34.100 to run our build command 65 00:03:34.100 --> 00:03:37.200 whenever there is a change in the repository. 66 00:03:37.200 --> 00:03:39.943 And so this is really, really powerful. 67 00:03:41.320 --> 00:03:46.010 So let's come here to our package.json, 68 00:03:46.010 --> 00:03:49.010 and our build command is this one. 69 00:03:49.010 --> 00:03:53.200 And so here, let's just copy this build command. 70 00:03:53.200 --> 00:03:56.040 So Netlifyi will then basically install 71 00:03:56.040 --> 00:04:00.150 all these dependencies and also these dev dependencies 72 00:04:00.150 --> 00:04:04.200 and run this command, okay? 73 00:04:04.200 --> 00:04:06.340 So basically what we did manually 74 00:04:06.340 --> 00:04:11.103 also on our local computer, Netlify will do it for us, okay? 75 00:04:13.600 --> 00:04:16.163 And then finally, the publish directory. 76 00:04:17.360 --> 00:04:20.240 And so that is our dist folder. 77 00:04:20.240 --> 00:04:22.890 So this is where the code will live 78 00:04:22.890 --> 00:04:26.383 after this build command is executed, right? 79 00:04:27.340 --> 00:04:30.380 And now let's hope that everything works here 80 00:04:30.380 --> 00:04:33.883 because it's not always that smooth, but let's see. 81 00:04:36.400 --> 00:04:39.770 And it is starting up here. 82 00:04:39.770 --> 00:04:42.103 So let's wait what happens. 83 00:04:43.270 --> 00:04:45.810 So we can also click on the details here, 84 00:04:45.810 --> 00:04:48.053 and you see that it is doing something, 85 00:04:50.890 --> 00:04:54.383 so it's installing the NPM module, so apparently. 86 00:05:04.150 --> 00:05:07.323 Now it's building all of our assets here. 87 00:05:09.730 --> 00:05:11.453 So this is growing really fast. 88 00:05:12.640 --> 00:05:14.430 It's not really important also, 89 00:05:14.430 --> 00:05:17.070 what matters is that our build command 90 00:05:17.070 --> 00:05:21.423 was apparently understood, so it's doing all of this stuff. 91 00:05:22.620 --> 00:05:25.230 And here we get now the exact same message 92 00:05:25.230 --> 00:05:28.540 that we get previously also offline. 93 00:05:28.540 --> 00:05:31.960 So also on our local computer, right? 94 00:05:31.960 --> 00:05:33.387 So where is that now? 95 00:05:35.000 --> 00:05:36.090 So this one here. 96 00:05:36.090 --> 00:05:39.360 So it's exactly what we got before, right? 97 00:05:39.360 --> 00:05:44.360 And so then Netlify build was complete and the site is live. 98 00:05:46.890 --> 00:05:51.890 Okay, so let's reload here and everything works. 99 00:05:53.300 --> 00:05:56.760 And remember that our current site right now 100 00:05:56.760 --> 00:06:00.840 has in the controller this welcome to the application. 101 00:06:00.840 --> 00:06:04.580 And so in order to see if everything really worked, 102 00:06:04.580 --> 00:06:06.563 that should now be in the console, 103 00:06:07.500 --> 00:06:12.263 and bam, there it is, great. 104 00:06:13.130 --> 00:06:15.820 So everything worked just smoothly, 105 00:06:15.820 --> 00:06:18.683 and I hope that it did the same for you as well. 106 00:06:19.970 --> 00:06:20.870 So let's go back here, 107 00:06:20.870 --> 00:06:25.040 and here you now get this published tag. 108 00:06:25.040 --> 00:06:27.430 And also I think that on GitHub, 109 00:06:27.430 --> 00:06:29.423 you can see that if you reload. 110 00:06:31.390 --> 00:06:35.490 Well, usually it says something here on the right side, 111 00:06:35.490 --> 00:06:38.720 like that it was deployed on Netlify, 112 00:06:38.720 --> 00:06:41.660 but in this case, it doesn't happen, 113 00:06:41.660 --> 00:06:43.333 but it's also not so important. 114 00:06:44.610 --> 00:06:48.050 But anyway, just to make sure 100% 115 00:06:48.050 --> 00:06:52.290 that we really have the continuous integration now working, 116 00:06:52.290 --> 00:06:56.060 and also so I can show you how handy it actually is, 117 00:06:56.060 --> 00:06:59.820 let's simply change or code once again. 118 00:06:59.820 --> 00:07:01.870 So what I will do now is to again, 119 00:07:01.870 --> 00:07:04.093 get rid of this new feature. 120 00:07:05.550 --> 00:07:09.300 So this was really just a demonstration anyway. 121 00:07:09.300 --> 00:07:11.910 And also let's get rid here of some 122 00:07:13.160 --> 00:07:14.710 code that we don't really need. 123 00:07:15.740 --> 00:07:19.943 So some older code that was already commented out, 124 00:07:21.960 --> 00:07:26.750 this one as well, okay? 125 00:07:26.750 --> 00:07:31.750 And so let's save it and let's add this code as well. 126 00:07:32.020 --> 00:07:37.020 So git add all and then git commit 127 00:07:37.270 --> 00:07:42.270 with the message of cleaned up controller 128 00:07:45.280 --> 00:07:50.280 and then git push origin master, okay? 129 00:07:55.340 --> 00:07:57.683 There it is, if we reload here, 130 00:08:00.190 --> 00:08:02.960 you see we have this latest message here, 131 00:08:02.960 --> 00:08:06.623 and now if we come here, let's now reload here as well, 132 00:08:07.560 --> 00:08:10.560 and you see that it is now building here 133 00:08:10.560 --> 00:08:12.340 our latest commit as well, 134 00:08:12.340 --> 00:08:15.830 so the cleaned up controller, okay? 135 00:08:15.830 --> 00:08:19.290 And this is once again, gonna take some time, 136 00:08:19.290 --> 00:08:21.723 so I'm gonna be back when this is done. 137 00:08:23.370 --> 00:08:25.090 And there we go. 138 00:08:25.090 --> 00:08:28.480 So our latest change should now be published, 139 00:08:28.480 --> 00:08:31.733 let's reload, and so now this log should be gone, 140 00:08:32.930 --> 00:08:34.590 and yap, it is. 141 00:08:34.590 --> 00:08:36.800 And our application of course, 142 00:08:36.800 --> 00:08:40.523 should still be working the same, right? 143 00:08:41.720 --> 00:08:45.440 So I am still getting my own super pizza recipe 144 00:08:45.440 --> 00:08:49.940 because, of course, I'm still using my same API key here. 145 00:08:49.940 --> 00:08:52.190 Okay, and this actually brings us 146 00:08:52.190 --> 00:08:54.010 to the end of this section 147 00:08:54.010 --> 00:08:57.770 and also to the end of the forkify project. 148 00:08:57.770 --> 00:08:59.630 So it's time to say goodbye 149 00:08:59.630 --> 00:09:03.490 to this beautiful and big project that we built together 150 00:09:03.490 --> 00:09:04.990 in the last section, 151 00:09:04.990 --> 00:09:08.160 and that we now finally deployed for the internet, 152 00:09:08.160 --> 00:09:12.070 for everyone to see it together in this section. 153 00:09:12.070 --> 00:09:15.480 So make sure that for all your projects in the future, 154 00:09:15.480 --> 00:09:18.420 you do the same workflow as we did here. 155 00:09:18.420 --> 00:09:20.200 So adding them to GitHub 156 00:09:20.200 --> 00:09:23.090 and maybe even to a public repository, 157 00:09:23.090 --> 00:09:26.420 so that your potential future employers 158 00:09:26.420 --> 00:09:30.150 can actually see that you are active on GitHub. 159 00:09:30.150 --> 00:09:33.750 So for some developers and especially newbies, 160 00:09:33.750 --> 00:09:37.030 GitHub also kind of serves as a portfolio 161 00:09:37.030 --> 00:09:38.710 so that other people can see 162 00:09:38.710 --> 00:09:41.203 how active you actually are in coding. 163 00:09:42.260 --> 00:09:46.590 Okay, and that's really all that I had to tell you. 164 00:09:46.590 --> 00:09:49.330 And I hope that you're not yet sick 165 00:09:49.330 --> 00:09:50.980 of hearing my voice here, 166 00:09:50.980 --> 00:09:54.380 and I'm really happy that you came all the way 167 00:09:54.380 --> 00:09:57.110 until the end of this section here with me 168 00:09:57.110 --> 00:10:01.270 so that I'm not talking alone here all by myself. 169 00:10:01.270 --> 00:10:04.763 But anyway, see you soon in the next section.