All right, so let's now finally set up
the continuous integration with Netlify.
And to do that, let's go back to our Netlify dashboard.
So right here, and we are still
here in the settings part of this site, okay?
And so then let's go here to build and deploy.
And then from here,
we can choose the option link site to git, all right?
Now, we could also do this
right from the beginning like this,
so without the manual deploy that we did in the beginning.
So that would be like in the very beginning,
we could simply create new site from git.
But in this case we already have this site,
and so we can now simply change this here
to continuous integration.
Now, in a nutshell,
what continuous integration means
or continuous deployment as Netlify apparently calls it,
that basically is to connect a site to a git repository,
and then whenever we change the code in our repository,
then that will automatically trigger
a new deployment of our site.
And so then everything happens really automatically.
So all we will have to do then is to basically
build our code locally, committed to our git repository,
then push that git repository
to or remote repository on GitHub,
and then from there,
the site will automatically be built and deployed.
So let me show you how that works.
So link site to git.
Then here, we can select the git provider that we want.
And so, as I mentioned before,
there are actually more services beside GitHub,
like GitLab and Bitbucket,
but we will use GitHub, of course.
Then here we have to authorize the access to GitHub,
which in my case here was already done,
but you will probably have to authenticate yourself again.
And then here we have all the repos
that I have in my GitHub account,
and so let's now search for forkify, okay?
And so this here is the one that I just created previously.
So forkify-course-video
is exactly this one that we created
in the last video, right?
And of course yours will have to have a different name,
but simply select that one then right here, all right?
Then we can change which branch we want to deploy,
and so we have these two, right?
But of course we want the master branch.
But now here comes the question.
So where is the code that we actually want to deploy?
Right?
Because remember, the code that we do want to deploy
is in the disc folder of our code.
So if you go back here,
the code that we manually deployed before
was this disc folder.
However, this disc folder is not in our repository, right?
But that's not a problem at all,
because we can now tell Netlify here
to run our build command
whenever there is a change in the repository.
And so this is really, really powerful.
So let's come here to our package.json,
and our build command is this one.
And so here, let's just copy this build command.
So Netlifyi will then basically install
all these dependencies and also these dev dependencies
and run this command, okay?
So basically what we did manually
also on our local computer, Netlify will do it for us, okay?
And then finally, the publish directory.
And so that is our dist folder.
So this is where the code will live
after this build command is executed, right?
And now let's hope that everything works here
because it's not always that smooth, but let's see.
And it is starting up here.
So let's wait what happens.
So we can also click on the details here,
and you see that it is doing something,
so it's installing the NPM module, so apparently.
Now it's building all of our assets here.
So this is growing really fast.
It's not really important also,
what matters is that our build command
was apparently understood, so it's doing all of this stuff.
And here we get now the exact same message
that we get previously also offline.
So also on our local computer, right?
So where is that now?
So this one here.
So it's exactly what we got before, right?
And so then Netlify build was complete and the site is live.
Okay, so let's reload here and everything works.
And remember that our current site right now
has in the controller this welcome to the application.
And so in order to see if everything really worked,
that should now be in the console,
and bam, there it is, great.
So everything worked just smoothly,
and I hope that it did the same for you as well.
So let's go back here,
and here you now get this published tag.
And also I think that on GitHub,
you can see that if you reload.
Well, usually it says something here on the right side,
like that it was deployed on Netlify,
but in this case, it doesn't happen,
but it's also not so important.
But anyway, just to make sure 100%
that we really have the continuous integration now working,
and also so I can show you how handy it actually is,
let's simply change or code once again.
So what I will do now is to again,
get rid of this new feature.
So this was really just a demonstration anyway.
And also let's get rid here of some
code that we don't really need.
So some older code that was already commented out,
this one as well, okay?
And so let's save it and let's add this code as well.
So git add all and then git commit
with the message of cleaned up controller
and then git push origin master, okay?
There it is, if we reload here,
you see we have this latest message here,
and now if we come here, let's now reload here as well,
and you see that it is now building here
our latest commit as well,
so the cleaned up controller, okay?
And this is once again, gonna take some time,
so I'm gonna be back when this is done.
And there we go.
So our latest change should now be published,
let's reload, and so now this log should be gone,
and yap, it is.
And our application of course,
should still be working the same, right?
So I am still getting my own super pizza recipe
because, of course, I'm still using my same API key here.
Okay, and this actually brings us
to the end of this section
and also to the end of the forkify project.
So it's time to say goodbye
to this beautiful and big project that we built together
in the last section,
and that we now finally deployed for the internet,
for everyone to see it together in this section.
So make sure that for all your projects in the future,
you do the same workflow as we did here.
So adding them to GitHub
and maybe even to a public repository,
so that your potential future employers
can actually see that you are active on GitHub.
So for some developers and especially newbies,
GitHub also kind of serves as a portfolio
so that other people can see
how active you actually are in coding.
Okay, and that's really all that I had to tell you.
And I hope that you're not yet sick
of hearing my voice here,
and I'm really happy that you came all the way
until the end of this section here with me
so that I'm not talking alone here all by myself.
But anyway, see you soon in the next section.