Hey there, everyone that they share.
And welcome to another video.
Now, in this video, we're going to start our very first project, not very first, but first for this
section.
And before we move there, I have to actually diverge a little bit.
Not too much, but a little bit now.
A little front end is going to be introduced in this section now, although I wanted it to be absolutely
free from the front end so that we can focus just on the back end.
But I can truly understand that how important it is to understand the forms.
And we do have our own postman that can do a lot of stuff.
In fact, it's going to teach us a lot of things that why we need the front end and the first place.
But there is very, very much of the need here that we introduce some kind of front end here.
Now, don't you worry, we're not going to inject something heavy that react or angular or something
so that our entire attention goes there.
We won't be doing that.
I will be creating some forms, just using the bare minimum bootstrap and you don't even need to know
the bootstrap for that.
You can use just the basic HTML form and that's it.
They're going to do the job.
I'm using bootstrap so that it looks a little bit pretty, but again, it's no big deal.
We'll be just copy pasting code from the bootstrap website itself and I'll show you that why we are
bringing that code, what each line does and what are the issues even in the bootstrap documentation
if you bring in the code as it is.
So what we're going to use for the frontend, we're going to use edges.
Now what is this edges and why we are bringing in.
Can we use just directly the bootstrap?
Yes, you can use the bootstrap directly and even you can use the basic HTML and JavaScript.
But if I inject those code, I have to prepare my back end here and then I have to call the front end
via the JavaScript and I have to introduce course and I have to introduce the fetch request and a whole
bunch of other things.
I really don't want to do that.
I want to make a unified system so that if anything is being called or anything goes like that, that
can happen there.
Now for these some of these templates, engine actually comes in.
So if I go up into the Edge's website, you're going to notice that this is how eggs look like, which
is embedded JavaScript.
Templating.
Templating simply means I will be able to just put all of this code, HTML kind of code into my node
application itself and it will work just fine.
Now in some of the application, even the mid scale or the smaller ones, eggs is used to make a full
fledged website just using the node itself.
No front end at all.
We won't be doing that, which is not approach used by many people these days because these API driven
approach is more familiar because things are things need to be consumed on mobile as well as web.
So yes, this is being used, but we won't be doing too much.
So I'll explain to you what it does.
I won't be going into the weird syntax of how to use these kinds of codes and all of that.
We won't be doing that at all.
We're just using edges.
But you might be asking, hey, is there eggs only?
No, there is pug, there is a mustache, there is a whole bunch of other variety of these templating
engine.
We happen to use eggs because it is the most simplest of all in order to work with that.
Okay.
So this is the basics now as we move forward, this is all what we'll be doing when we are going to
handle our forms.
And I'll walk you through even with the postman as well, that what are the issues that comes up in
the postman and how we are able to even identify that the issues are there in the postman?
Issues are not with the postman, to be honest.
It's moreover how it functions.
So that is there.
Now we're going to use cloud energy as well.
And what we are using cloud and we are going to be using cloud only for handling our images.
So let me go up onto the Google and show you first that, hey, I want to go ahead and use cloud in.
There we go.
And you can go ahead and create an account on the cloud.
Now, creating an account is really simple.
You can go ahead and hit the sign up button there.
And right now it's going to redirect me onto the console because I have already signed up.
But this is how it looks like when you signed up.
Now it is free, so you can go ahead and look for the pricing that hey, as of now had the time of recording,
at least they have given us a generous free tier.
No credit card required nothing.
You have one user and more than enough credits, 25 credits monthly are given to you, which is more
than enough, way more than enough even to host your application.
So they are really generous in that case.
So we'll be using that.
Now, are we going to use cloud only to the extent?
No, we are not going to do that.
We're going to just throw up our images there.
But it is definitely possible that if you study a little bit more about the cloud Native API, you will
be able to transform your image, rotate your image, find if there is something wrong in the image.
There is a whole lot of options and product array that they actually offer, even optimize your media
and everything.
Now obviously this brings a question that, hey, why cloud nerdy and why not the other option?
And what if is always there?
Why not eight of us?
Why not as you?
Why not fair or not even self-hosted now self-hosted part I have already covered.
This is exactly how we did in the documentation section.
We use the move and we move the file from the clients directory into our own server that we have already
seen.
So that is why I'm not bringing in.
And once you understand how to send the file onto the cloud, it is just a matter of reading the documentation
and.
Finding what functions are there and what library is there, and that's it.
You will have the clear cut understanding that, okay, if I don't want to use cloud, that's okay.
I can go ahead and move on with a W.
S as your maybe other cloud provider.
It's all there.
All of them provides you as SDK and helper methods that can help you with that.
Okay.
So now this is all clear that we are using edges, but yes, there are other options.
We are using cloud native, but yes, there are other options, but we are going with them to just clear
up our concept.
So now let's go ahead and let me fire up my terminal.
There we go.
Let me go up into desktop and we have this AE back end.
Let's go ahead and do a quick list.
So these are the apps that we have created.
So let's go ahead and create another one.
So I'm going to go ahead and say, hey, I want to create another app.
What should we call this?
This is always a tricky question.
So let's go hold this one as forms.
Let's all lowercase forms and images, a bit of a longer name.
But yeah, let's go with that.
So we're going to go into forms and images.
Obviously, we are going to go ahead and say, hey, I want to initialize an application here, so let's
go ahead and initialize that.
That is awesome.
With all the default settings, once this is done, we obviously know what we need to install.
So first and foremost, of course, without a doubt, we're going to go ahead and say, hey, I need
an express now since we are using Express and we want to work on later on with the Express file upload.
So we're going to go ahead and say, hey, I want to use Express File upload.
Okay, we will be using edges.
I haven't talked to you with the documentation and everything and probably I will not because it's not
really important in this case.
We'll be just working with the plain HTML.
So I'll be yet.
I will be installing eggs.
Don't you worry.
I'll walk you through with that and we'll be working with cloud and every now cloud and definitely we
will study the documentation part and all of that.
But these are all the libraries that we need probably for this entire section, but there might be more
no promises on that part.
Let's go ahead and install that.
So it gave me a simple error.
And again, sometimes typing and writing can be a little bit tricky.
So expires.
It's not expires.
It is.
EXPRESS And I'm pretty sure most of you might have already noticed that part.
So again, these kinds of things do happen with everyone.
Okay, this time, hopefully everything is being installed and yep, this time everything is installed.
We'll check that into our package JSON as well.
But I do have another dependency which is dev dependency.
So I'm going to go ahead and say, hey Dev and this one is our all time favorite node on.
Okay.
So this should be up and running.
There we go.
And I can just fire up my coordinator from here in case yours is not working.
Don't you sweat it out.
You can just go ahead and use this file and this documentary that we don't need.
Come on, open this up, please.
There we go.
You can just drag and drop your folder here.
And that's it.
That's all it takes, hopefully.
Come on.
Oh, I'm dragging and dropping and terminal.
My bad, my bad.
There we go.
And let's go ahead and drag and drop.
And there we go.
It will open up the entire project here.
Yes, I definitely trust the author because it's me.
Okay, let's go in the package, start JSON.
So we have dependency cloud Edge's Express Express file upload and the dev dependency.
Awesome.
Let's go ahead and create a simple start script.
No, I'm not going to be creating a script for for the dev.
I won't be installing the dot EMV because we have already worked on with that.
We will be definitely working when we'll be working on our major project, the mega one.
But right now I'll skip that because that will additionally add extra layer of complexity here.
I'm going to go ahead and say Node one, please work with my index or JZ or JZ, whatever you like,
even set order JZ.
Okay.
One thing I would like to mention here that go ahead and please create an account on the cloud.
Netty, let me go ahead and try to log in and I will share all these details.
I'll just create an account as a dummy one here.
I don't use cloud very that much in production for my app, at least for the others I use quite a lot.
Now here you are going to find the cloud name.
You can choose a better cloud name than me I just randomly picked up.
Then we have the API key and the API secret.
Now I will be showing you my secret as well.
No big deal.
But probably it is not.
Probably always.
It is a good idea to place these keys safe and separately into your dot envy so that when we upload
these things on the Heroku, we can just add that onto the settings.
Now in case your keys are also exposed, because I'm about to expose mines as well, you can always
go into the settings and inside the settings inside you will find the security.
And at the very end of it you can just generate a new pair and can mark this one as disable.
So it is pretty easy, as easy as it could be.
So while at the time when you'll be seeing these videos, my keys will obviously be changed, but please
use your own keys at that time.
So this is all the basics that I wanted to show you.
Okay, now moving back, let's go ahead and create a simple index JS And let's use the basics here at
least.
So let's go ahead and say, Hey, I will need Express and that express will be coming up from require.
Let's go ahead and use Express and let's create an app from it.
So we have already seen that.
So that's why we are going that much faster that we just need to create an app with the Express.
I won't be even creating another file.
I just want to show everything up here, so I'll be just focusing on teaching part.
I won't be even creating a port variable because you know that already we have got a quite in-depth
detail on that one.
I'll be saying simply console.log and here I'll be just throwing up.
That server is running at port 4000 everything hardcoded so far because that is not our focus.
Our focus is mainly on to itself, how to handle the farms and everything.
Okay, now one more thing that we know of about it is how to inject these middleware and everything.
I wouldn't be doing that right now because I want to show you each and every value of what this actually
brings in, what the middleware actually does and all of that.
And we are going to definitely do that in the next video.
Let's catch up there.