So let's now manually deploy forkify project
to an amazing and free hosting service called Netlify
But before we can do that,
we now need to create the final bundle of,
our application by running this belt command.
So up until this point,
we have always used the start command here,
but that only works for development because the final output
will actually contain the development server.
And also the code is not being compressed and dead code is
not being eliminated while in development.
Now right?
So let's open up our terminal.
And so here we still have our start command running.
And so let's finish that now by hitting
Command C or actually
Control C
and alternatively, you can also simply
kill this terminal by clicking this button here.
All right.
So, right now we no longer have,
our development server running and parcel is now no longer
automatically creating the Built as we say for application.
And so now we are ready to run this belt command,
but before let's actually delete this parcel cash folder and
on this folder as well.
So I like to delete these
in order to basically get a fresh start.
Now this build command here is actually not yet complete,
because in the build command,
we actually need to manually specify that we want our output
to be here in the dist folder, okay?
And so if you're on version two of parcel, like I am okay.
So in that case specify the dist
DIR option.
So dash dash, dist D I R,
which stands for distribution directory basically.
And then we need to specify the folder that we actually
want to be created.
So just like before, let's call that the dist folder.
Now what's also very important is that here we need to
change from main to default.
So very important.
Otherwise this build command will not run in parcel two.
So again, change this main here to default.
And I believe that this is actually because of some bug that
currently happens in the better one version of parcel two.
But never mind with that, we actually fixed that problem.
Now, if you are using parcel one, for some reason,
then here instead
of dist directory,
it is called out directory.
So like this, but again,
that is only if you are on version one of parcel.
And so now this command here is ready for us to execute it.
So NPM run built
and then let's wait for it.
So as always, it takes some time here, but when it's done,
we are ready to then deploy it to folder that was just
created to, our Netflify server.
And here it is,
and now it contains the final code compressed and ready to
be shipped.
Okay.
Now, if you got any error during this build process,
while you're using a parcel two, then please make sure that
you really set this default here
and also make sure that
everything here is correctly spelled like this.
But if the problem still persists,
then it might be a good idea to downgrade, to parcel one.
And so you would do that with NPM uninstalled like this,
and then after that,
you would install it again at version one like this.
And so that should then work.
And remember that in that case here it is out DIR
and not dist,
and also you would have to go to all your views and change
the way you import the icons.
So you would have to remove this part here, okay?
So wherever you import the icons,
if you're using parcel one,
remember you have to take out this part.
Okay.
But then after everything is done,
and once you have this, dist folder,
we are ready to go to Netlify and actually deploy this.
So let's go back to our browser.
And here I already have netlifly.com open.
Now, Netlify is a free service
that lets us developers basically
deploy static webpages or static web applications.
And with static,
we mean that the application only contains HTML,
CSS and JavaScript files, as well as some images,
but no database or no server side code at all.
All right.
So basically Netlify only works for front end applications.
Like the one that we just built.
So Netlify is really an amazing service.
It's extremely easy to set up and to use.
It has a very generous, free plan,
and it contains a lot of great features that you can also
use for free.
And one of these features is called continuous integration
with git, which we will use a bit later in the section.
And I'm telling you all these great things about Netlify
not because I'm sponsored by them, not by any means.
It's simply because I really, really love this service.
It's just fantastic.
Now, if you need something even more simple,
without even having to open an account,
you can also use this surge service,
which is also free and it's even easier.
So here you don't have to create an account and you can
simply NPM install, surge on your computer.
And then once you're in the folder you want to publish.
So you want to deploy.
All you have to do is to run the surge command,
but anyway,
we will now use Netlify in the section.
And so if I convinced you that it's worth using it,
then please go ahead now and sign up for your free account.
Now, of course, I already have my account.
And so I will wait here until you're ready.
Now Okay, and so this is how it should look like once
you log in into your Netlify account,
now it might've changed
sometime after I recorded this video,
but in general,
this should be kind of what it looks like.
So you see,
I already have a lot of sites here.
So basically that's all the demo projects
that I have been showing you.
And so, again for that,
I use Netlify because it's so easy.
And speaking of easy, let me now
show you how easy it actually is to quickly and manually
deploy our forkify project.
So let's go to our project folder here.
So this one right here,
and then we take the disc folder
because that's the folder
that we want to deploy.
So our built that we just created,
and then we take that folder and we simply drag and drop it
here into the interface
and drop it there.
And that's it, or page is now deployed.
So you see how easy that was.
So we get to this page here with this random name that we
can click on,
and this is our webpage,
and now everyone can see it.
So it's now in fact deployed on this live server on this
URL now this is not ideal though.
So this random URL,
and so we can click here on site settings and change the
name of our site.
So come down here
and then change site name.
Okay, and so I'm calling
this forkify dash Jonas,
and you can then go ahead and call yours forkify and then
with your name.
And of course this name has to be unique.
And so just make sure that you're using some unique name.
Alright, now we can click here again and now,
our domain name here makes a bit more sense.
All right.
And that's actually it.
So this is how easy it really is.
But the great thing about Netlify is not only that
it's easy, but as I mentioned before,
also some of the great features and one of them is that
automatically our page
is now secured with an SSL certificate.
So if we check out the URL,
you see that it actually is HTTPS,
all right?
And all of that is automatically included
for free in our account.
And another thing that's great is that all our site assets,
so all the files that we just deployed were in fact deployed
to a so-called content delivery network or CDN.
And that means that instead of uploading the files only to
one server in one location in the world,
our site now actually lives in many locations.
So in many servers spread out across the entire world.
And so then when a user is trying to access our page,
they will then get diversion from the server
that is closest to them.
And so this will then greatly speed up the delivery time off
your page or your application.
So again, a lot of great features, really easy to use.
And yeah, that's why I recommend Netlify to everyone.
And I'm demonstrating all this using the forkify project,
but of course it will work the exact same way for any other
project that you might want to deploy.
So as long as it is a static project, this is how it works.
But anyway,
this is how we deploy a project manually to Netlify.
However, there is also a better way.
So basically a way which allows us to automate the process
of deploying the application and for that,
we will need something called version control and git.
And so let's take a look at that in the next video.