Let's go ahead and talk more about this package, start, Jason, and try to create over some files
in this application.
Hey there, everyone, at this year.
And let's go ahead and get started further diving deep into this.
So when you open up this package there, Jason, you're going to see that there are some script files.
Rest of them are pretty obvious, like the main file is indexed shares description version.
We get that we are already understanding that part of bit dependencies we have already talked about
it.
I will install a dev dependency in this video so that you can see the difference between them here.
But what are these scripts now?
These scripts are really, really important when you put things into production or even if you run things
locally, this is the very first file which you should be looking up if the project is coming from somebody
else.
So make sure you take care of that.
The first modification that we are going to do is modify a start script.
So just go ahead and replace it with the start.
And in here we're going to say that I want to run a file with the help of Node and the file name is
Index dot JS.
Now similar to this, we can create much more of these scripts.
Like this is a start script, there can be a dev script, there can be a test script.
You can just pretty much name anything.
The way how we run this one is simply say NPM start now.
NPM is a package manager which will look into the current directory and you should be able to see your
package store JSON in that directory.
As soon as it sees packages or JSON file, it will come into the script section and we'll see.
Okay, there is a start.
What should I do when somebody gives me a command of start?
You simply go ahead and say Node indexed or JS this will run it.
Can I run it manually also?
Yes, of course.
You can run this one directly as well.
Let's go ahead and save this one.
This is all good.
Let's go ahead and create our very first file.
This is going to be index dot JS.
There we go, nice and easy and all we are going to do here is console.log.
I know, not very interesting, but this is what we'll be doing.
So we'll be saying hello from AE.
This is all what we'll be doing now.
How can I run this file?
Now, obviously you can go ahead and run this file simply by saying Node and make sure the file is in
the current directory.
When you do an LZ or Dir on Windows, you should be able to see index or JS.
Now, once you're done with that, you simply go ahead and say let's first run it by the node so node
and then simply say index or JS.
It gives me the same result and I will also get the same result when I say end PM start because technically
and PM start is also issuing the same command.
So I'm getting the hello from AE.
Definitely a couple of more things about versioning of the app and everything, but end of the day,
we are getting the same result.
That is all clear now since we have also installed the Express, let's go ahead and use that express.
But before that I promised you I'll talk about the dev dependencies, so let's go ahead and do that.
Now what happens when I say instead of AE, I go ahead and say, hey, take or your name.
I go ahead and don't see the output directly.
I have to say NPM start again and then I see the changes.
Now this is such a common practice that you want to keep on writing in your file and want to see the
output immediately.
Almost somebody needs a refresh, just like a hot reloading.
We have this famous hot reloading available to us.
All we got to do is simply say npm install node mod.
But this node mod is not a regular package that we want to install.
When we go to server, we either use PM too or something more complex.
Don't pay too much attention on them as of now, but this is a dev dependency.
All you got to do is simply say dash capital D or you can write dash dash dev dependency, but that's
too much of a big to mouthful.
So we use issues simple flag that says dash D and I hit enter and installs Node one for me.
Now what this is going to do is simply go ahead.
When I see the package store JSON, it simply says, hey, your dependencies are here, but something
which helps you for development, you can go ahead and use node advantage of Node one is that instead
of now saying with the node, I can simply say Node on and I save this and this time when I go ahead
and say NPM start, let's go ahead and clean this up.
Now it will not exit.
It will keep on looking into the file.
So for example, if I go to index or JS, I close this one and I turn it back to AE, it will continuously
monitor my application or in this case index or JS and will give me the output.
That's fantastic.
That's exactly what we want.
Okay, enough of this.
Now let's go back on to the Express and read a little bit more on the documentation.
So I know that installation now.
Now let's see how I can write a simple hello world in here.
So Express Documentation says it very clearly that first you need to require the express.
You don't need to provide a version and then you have to create an app from this express, define a
port, get a route all done, and then you can listen to any of the port.
Now, this is a little bit too much and a fast pace, so let's break it down one by one and see it in
the code studio or the VS code to see that what it's saying.
Now, whenever you are going to install any dependency, the common syntax is just name it like this.
So if you're installing express, call it Express.
If you are installing X, Y, Z.
Call it X, Y, Z.
And that is going to be simply saying, I need you to require if the package is installed after writing
a couple of words, it's supposed to be suggesting you, but sometimes it doesn't.
Don't panic.
So now the express is here.
Now we need to create an app with the Express.
So we're going to call this one as app.
Do I need to call it app?
No, not at all.
It's a variable name.
Feel free to call it anything and we're going to go ahead and use Express for this one.
This is the syntax and we just saw the exact same thing up here.
So these are the two things.
Now it says you need to say what port number you are using.
The important question here is, which you are not even asking is why we are putting a port into variable.
Are we using it at a ton of places?
No, you are not using it a ton of places, just one place.
If we are using it at just one place, why we are creating and holding it in available because this
will help you a lot.
Now what's going to happen is let's just say we are going to define it in all caps.
The port is going to be 4000, but sometimes you're going to see that when you deploy the application.
I will point it out that you want to keep some of your variables coming from the central location.
Usually that location is process dot E and V, dot port.
How does it know there is a port?
No, it doesn't know that.
It will eventually know it when we'll install relevant packages.
But this is a common syntax you are going to see, which is a pipe.
So use the port number as 4000.
But if something is defined into process dot and we are also known as environment variables, use a
port variable from there.
Right now we don't have that.
So don't you worry on that.
Right now it's going to use 4000 and this is going to introduce us.
Some of the issues will take care of them.
That's why this line is here.
Okay.
Now, next up, importantly is app dot.
Listen, as soon as you create express and use an app, it allows you to listen where you can listen.
You just have to mention the port where you are going to listen.
And it also gives you a callback.
Now, what you can do in this callback, you can just simply write this and you can simply say, I want
to have a console log, and I can say in the back deck that server is running at, and then we can use
a dollar, these classic back ticks and variables, and I can simply go in and say, Port, is this
okay and is this all fine?
Yeah, it is all fine.
It says server is running at port, so definitely something is running at port.
What does it mean when it says server is running at port?
That means there is a localhost server created in your system and if you visit that specific port it
should be up and running.
Let's go ahead and see that.
If I go ahead and see this local host, not 3000 coming up from whole development, 4000.
It says, hey, I cannot get what does it mean?
It means that the server is running.
That is definitely 100% proven now.
But you haven't defined what should I do when I just make a get request onto the slash?
Yeah, we studied about the get now for this, the documentation says a little bit that you can use
this exact same line to define the get root.
Let's go ahead and copy this and then we are going to kind of dissect it.
Let's go ahead and see this.
If this works, save this.
It says server is still running and if I go back onto my application, hit a reload.
I see a hello world job done, but let's understand this a little bit more in depth.
Let's go ahead and delete this one and write it again.
First, you use the same app which you have created using the express.
Then you define your methods and there can be a lot of methods.
There can be a get, there can be a post, whatever is important or whatever you are doing in that case.
In this case, I'm using a get.
Now this get method takes to parameter almost always post also, but there can be more as well.
At least two are there the first one being slash?
That is my home.
Root slash is defined as just the home root and then simply by putting a comma, you again get a callback.
There we go.
Now in this callback you get to variables or parameters.
There are definitely more, but request and response.
Now these are really classic objects when we definitely want to study them in more detail, in more
depth.
So let's go ahead and simply say that I have this once.
So now I'm going to say that I'll use this one parameter, which is rest also short for response.
And I want to just send a response.
What do you want to send in the response?
I want to send a string that says hello from AE.
Let's go ahead and save this one.
Thanks to Node one server, it is up and running.
I go back and I hit a reload and it says hello from AE.
That's great.
But what also you can do is actually you can go ahead and wrap this up into an H one and it can actually
render that for you.
So we're going to go ahead and say each one, save that it reloads my server.
I go back up here, I hit a reload and now it's in the H1 tag.
Now obviously this is just the basics.
You don't want to send it like that.
Sometimes you send the templates.
There are a lot of templates like Pug, handlebar, mustache, there's a lot of them and you can send
those files.
But we are not going to be doing that because modern approach is to send.
The API responds.
Okay, quite a lot of stuff that we have discussed in just one video.
Let's go ahead and catch up in the next one.