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.