Instructor: Okay, so let's now start building
the laptop store using Node.js.
And the first thing that you need to do
is actually go ahead and download Node.js for your computer.
So just head over to nodejs.org and then download
probably version 10 here.
Okay, so that's the most stable version right now.
And if you don't find the download
for your operating system, you can just go here to downloads
and it's gonna be there for sure.
And if you already have Node installed on your computer,
please just make sure that it's at least version eight,
or better, 10, okay?
And to quickly determine the version you're on,
you just need to head over to the terminal
and type node -v, okay?
And so it gives me 10.11.
And so I'm at least on version number 10.
Then after doing that,
just download the starter files for this project,
as usual from the course GitHub repo.
And I'm gonna leave a link to that here in this video,
but you can also find it
right at the beginning of the course.
As you see, I already have it opened here,
and so all we really have here is this data.json,
which is all the data that will be in our laptop store.
I have the images.
So one image for each of the laptops,
and then also the HTML webpages for both the overview
and the detail view of each laptop.
All right, and now that you have Node installed
on your computer, you can actually run JavaScript
outside of the browser for the very first time.
So increase this here, clear the console.
And so all we have to do is to write in the terminal, node.
And so now we're running JavaScript outside of the browser.
And this is now basically like a JavaScript console,
just like you have in the browser.
So we can do JavaScript like one plus one
and it will of course give us the result.
We can do console logs, for example.
And now you noticed that I have like this shortcut
here on my computer, so I'm gonna type ,col
then it will write console log automatically.
So I'm gonna use that for now.
Anyway, you see that this is just JavaScript
like you already know.
So good old console log works here in the Node console,
just as it works in the browser.
Now of course we don't want to write all of our Node code
here in this command line, and so we can create
a new JavaScript file to do just that, like we usually do.
So creating new file.
I'm calling this one index.js.
Now what's that?
Doesn't really matter.
And anyway, if I wanna exit this command line here,
I just have to type Control + C
and then Control + C again.
And that's it.
Now let's do the same thing that we did here before
in the console, but in this file.
So console log Hello World!
And now to run this file, I'll write node again
and then index.js.
And this worked because I'm already in this folder.
So this long path here and so this index.js file
is right in that home folder.
And so we hit return and then it runs the file.
Simple as that.
So what happened here?
Well, node run or file and all we have here
is the console log, so it does that here to the console,
and then it actually exits the process
because it has nothing else to do.
And so we're back to our normal command line
here in the terminal.
So imagine we wanted to add a second console log here,
and then we would have to run this all over again.
And this is kind of annoying.
So the first thing that you wanna do
when you start working with Node.js
is to install a little tool
like a little helper called nodemon.
And for that we use npm just as I showed you before
in the last part of the course,
where I showed you how to use npm and install packages
and all of that good stuff.
So npm install nodemon,
and we can actually install it globally.
So -g.
And if you're on a Mac, you're probably gonna need
sudo here in front to give it the admin rights.
Now I'm not gonna install this because I already have it,
but you should go ahead and do that.
So let me get rid of this.
And now instead of typing node in next.js,
all I have to do is to type nodemon.
And it will automatically figure out
which file I want to run, and then it actually runs it.
So you see I'm in the log,
starting node index.js, which is exactly
what we did here before when we did it manually.
Now it happens automatically.
And if you know add a third log here,
give it a save, and you see it runs
automatically here without us having to go ahead
and run this again and again each time
that we save something,
which is gonna save us a ton of time.
All right, so this was more at the setup
of Node.js on our system.
Now let's actually start doing something cool.
And the first thing that we will do
is to read the content of this JSON file here, all right?
And then parse it into a JavaScript object.
And again, this is something that you really cannot do
with a normal, let's say a JavaScript in a browser
because it doesn't give us access to the file system.
But with Node.js, we can.
So let me show you how to do it.
So get rid of all of this.
And the first thing that you need to do
is that Node comes with a very powerful module system.
And most of the functionality that we have in Node
is always in one of the Node packages.
So now that we want to read a file,
we need to require the file system module.
So define a variable.
In this case, it's gonna be fs,
which stands for file system,
and = require and then the name of the module, which is fs.
And so usually we give the variable name here fs
the same as the package name.
So the module name.
And this is a so-called core Node modules
because we can actually also use other modules
like the ones that we get from npm,
but the file system module is something
that already comes with Node.js.
And so now we're ready to actually load a file.
And we do that by saying fs.readfile,
and we use the synchronous version here.
Okay, and so readfile here is a method of fs.
And that's why we had to actually save the result
of requiring the module in this variable
so that we can now use this method here
that is on that variable.
And so where is that file located?
Well, it is here in the data folder and then data.json.
But it's actually not that simple
because we have to pass like the absolute path to that file.
And in Node.js, we have a variable name called dirname.
So it's simply called dirname like this.
And since we're using a template string here
because of these back ticks here,
remember that's something that comes from ES6,
we just have to do it like this.
And so this will then get the dirname variable
that is defined in Node.js for us.
And so this dirname is basically the home folder so to say.
So we have dirname/data/data.json.
And then we also need to specify the character encoding.
And so that's gonna be utf-8.
And if you don't specify this,
then instead of returning a file,
it will return something called a buffer.
All right, and so finally what we have to do
is to then save the result of this into a variable.
So let's simply say json.
And now let's take a look at this json variable
with a simple console.log.
And since we're doing console logs,
let me also show you the dirname variable
just so you know what I was actually talking about.
Give it a save now and here we go.
So here is the json data that we had just
read from the file.
And you will see that what we have here
is exactly what we had here.
Amazing, right?
So now we can use JavaScript to read files from the disk.
And up here we also see the path to this file basically.
So index.js is in this huge folder.
So let's get rid of this.
And what we actually need is not just like this JSON text,
we're going to parse it into an object
that we can use in JavaScript.
And so we actually want, what I'm gonna call, the laptopData
which we will parse with JSON.
So in JavaScript, there is this JSON.parse method
that we can pass any JSON string, let's say,
and then it will return an object for us, all right?
And I think we actually used it before
in another project in this course
where we worked with an API.
Because APIs usually always work with JSON these days,
at least the traditional Rest APIS, am I right?
Now instead of logging JSON,
let's actually log our laptopData.
And so down here it is,
and you see that now it's no longer
this string that we had, but it really is
a JavaScript object.
And so with that, we are ready to start working
on implementing this laptop store.
Awesome, so we learned how to read files.
Now let's actually do what Node.js
was really intended to do, which is to create web servers.
All right, so for that we're gonna need another package.
So another core module.
And this one is called http.
So again, we're using the variable name
as the same one as the module name.
Require and http.
Get rid of this console.log,
and now let's create our server.
And so all we have to do is to create a variable
called server, and then on the http object
use the createServer method.
Okay, and there are different ways of doing this,
different kinds of writing this,
but I think that this one for now and for learning
is the easiest one, all right?
And in this createServer, we have to pass in
a callback function.
This callback function is the one that's gonna be fired
each time that someone accesses our web server.
So each time someone like opens a page
that's on our server, all right?
And this callback function gets access
to the request and to the response objects.
And more about that later, all right?
So we're using an arrow function of course
because the note, just like most browsers these days,
also understands ES6, of course.
ES6, ES7, ES8 and all of these versions.
They're all kind of well-supported in Node.js at this point.
Okay, so this creates our server.
And remember, this callback function,
it is what is run each time that someone
accesses our web server.
So for now let's just log to the console,
someone did access the server.
Okay, and that is the first part of creating a server.
Now the second part is that we actually have to listen
on a specific port and a specific IP address.
And again, I'm not going to go into deep explanations here
in this quick crash course.
So all we're gonna do here is to really
try to implement this small project.
And so how this works is that we take the server
that we just created here,
so this variable here, and then we use
the list method on it.
So this will basically tell Node.js
to always keep listening on a certain port
on a certain IP address.
And so I'm gonna use port 1337,
and this is kind of standard in Node.
You will also see 3,000, 8,000, maybe 80.
They're some kind of standards,
but I'm just gonna go with this one here.
So that is the port, and now we need the IP address as well.
And what they usually do is to use localhost.
So localhost means like the current computer.
So the computer that the program
is right now running on.
And so localhost gets this standard IP address
that I'm sure you have seen before.
So 127.0.0.1.
And then as soon as we start listening,
also this callback function here gets fired;
and this is not mandatory,
this is just so we know that the server
has started listening.
So let's just say that we're listening for requests now.
And what we did here, and which is the most important part,
is to pass in this callback function
which will get fired each time
that someone accesses the server.
And now in order for this to actually start running,
we need to actually listen.
So basically, to look for incoming requests at port 1337
of this IP address.
And so let's save this,
and now we get listening for requests now.
And so let's actually do a request
so that we can see if this actually works.
And the simplest way of doing that
is to actually just use a browser.
So we're gonna go to this IP and this port
and see if it works.
0., and it's exactly already here,
so just now put this part.
And so we see that it's loading,
and it doesn't do actually anything right now
because we don't have any code here, okay, in here.
We don't have any code except the console log,
and that actually worked.
So someone did access the server.
Now this here keeps loading
because we're not sending back any result
from the server to the browser right now.
And so this will keep spinning here
until it eventually times out.
But what we know is that it actually now works
because we got this message here, logged to our console.
So we can now get rid of this console.log here
and actually send a response back from the server.
So just that the page can actually then load something
instead of spinning until infinity.
And that is where this response object here comes into play,
because both the request and the response object
have certain methods and properties on them
that we can now use in order to, in this case,
to send a response back to the browser.
So we can use res and then end.
And this is not send, it really is end.
And it's end because we can do a couple of things
before this, but for now let's keep it at this.
So let's just say res end and then just some text in here.
So this is the response.
So one of the things that we can do before,
like I mentioned, is to set a header.
So an HTTP header.
And I'm not sure if you are familiar with headers,
but they are just like a small message
that we send with a request to let the browser know
what kind of data is coming in.
So we can say writeHead
and then an HTTP status code,
and I write 200 for okay, and then the content type.
And it works like this.
So we basically pass an object here with some options.
So content type.
And so let's say that what we're gonna send back here
will be HTML, okay?
And so this HTTP status code
is something that you probably see.
For example, if we have an error, we usually have a 404.
You know that one, right?
And if everything works just fine,
then 200 is like a standard for that.
So just a small recap of what's happening here.
So each time someone is accessing our server,
we will have a response.
And to that response, we write a header,
in this case, saying that we have a response
so that everything is okay,
and that's the 200.
And then the content type,
saying that it's gonna be text html.
And then we also send the response itself.
And that always has to happen
after setting the header.
All right, and so let's see what happens now in this case.
So this is what we want.
And here we go, so this is the response.
What I wanted to do is to show you the Network tab.
We have to reload this actually to work.
And so here you see the status code
that we sent back.
So the 200 OK.
If I were to say 404,
and now do it again, then you will see status 404
and it's actually also in red here
saying that we have an error.
The response is still the same,
but this just changed the status code of this response
simply because we sent a different header.
So just to show you the difference here.
So this is the very, very basic functionality
of handing requests and sending back responses.
Now before finishing this video,
I wanna implement something called routing.
And what routing means is that we basically respond
in different ways for different URLs.
Because right now, no matter what URL we actually have
on our server, like this, so we can write
something like this; and it doesn't really matter,
it will always send back the same response.
It doesn't matter what URL we have here, all right,
because we're not responding to that here.
We don't have any routing in place.
So whatever URL we have, we always send back
the same response.
But what we really want, and that is what routing really is,
is to respond differently to these different URLs.
So for example here, we have /product,
and so then we have this overview
of all the different product.
But if we then click here, we have laptop.
So we have /laptop, and so we see the detail page
for this specific laptop.
And then we also have the ID parameter here,
which in this case is zero.
But if it was one, then it would also respond
in a different way because we will now have
laptop number one, laptop number two,
and so on and so forth.
And so that exactly is routing.
It's responding in different ways to different URLs.
All right, and so we go back and we are back to products.
And even if we don't have anything here,
I also routed that one, so to this same overview.
Okay, makes sense?
So let's now quickly implement that.
And for that, we will have to look at the URL,
and so we're gonna use a tool for that.
So just another Node module.
So again, Node comes built in with this functionality
that we're going to use, and it's in the URL module.
So require.
But then, url.
And so let's now use this.
And where do you think we should use it?
Well, it should be right here in this
server callback function here.
So right in this function.
And that is because that's the function
that's gonna be fired each time that someone
accesses the server.
And so that will always be a different URL.
And so this is of course where we want to analyze that URL.
And so what we can do is to say url.parse,
and then where is the URL actually stored?
Well, now we're gonna use the request object
for the first time because that is where the URL
is actually stored.
And actually, let's comment out this part here
and start by having a console log of the request object
just so you get an overview of all the information
that we get each time that someone makes a request.
So let's reload here.
And so this here, all this data that you see,
all of this is the request data.
So there's a ton of stuff in here,
and somewhere in here is also our URL.
So let's actually say URL, do it again,
and then here it is.
So this is the URL that we typed in here, right?
If we just do like products now,
just like this, well then it should say /products.
If we could now actually go ahead and use this one here,
but this doesn't quite give us enough functionality
and that is why we use the url module.
So this here, what we did here doesn't even require
the url module that we required up here.
But now, it is actually time to use that one.
And so I'm gonna show you why here in a second.
So we will do url parse of the req,
so of the request URL, okay?
And then we also have to specify a second argument,
which will simply make it so that the query
is parsed into an object.
So const, and I'm gonna call this one here query.
And so let's now log what that actually will do.
Do it again.
And so now instead of just getting this product string here,
we get all of this different stuff here,
which for now is probably not so useful,
but you will see later why we really need
all of this here.
So right now we're actually just interested
in the pathName here.
So basically what we had here.
So we could use in this stage just req.url
without using the url module here.
But again, you're gonna see in a second
why we actually need this url.parse.
So this is actually not called query,
but I'm gonna call it pathName.
And so what we want here is just the pathName, all right?
So .pathName.
And so let's now just quickly take a look at that.
Reload, and it should give us products.
All right, here we go.
And with this, we can actually already start
implementing some very simple routing
because all we have to do is to now do
an if/else statement.
So we can say if the pathName is equal to product,
then we can do a certain response for that.
And later, it will of course be
all of these different computers,
all of this data that we get from this JSON file
that we imported right here in the beginning.
But for now, just for testing,
let's simply right here what we have.
So, this is the PRODUCTS page.
Else if, and let's give us some more space here.
We can actually do it like this.
It doesn't have to be right here after the first if.
And so we can say pathname if it is equal to laptop.
Here I forgot the slash.
It always has the slash in the pathName.
So this one is for product, and this one is for laptop.
So we have laptop,
and we're gonna take care of that part here in a second,
and we have products.
And then we also have the products when there's nothing.
So let's also quickly implement that.
So if the pathName is product or
if the pathName is just empty.
So in either of these two cases,
we will have the product page.
And if it says laptop, well then we have the laptop page.
And if we get something entirely different,
which is not products or nothing or laptop,
well in that case, we just say that we didn't found the URL.
So basically, it's like an error.
So we're gonna say,
was not found on the server.
And this is the correct case of using the 404, right?
So an error like I showed you in the beginning.
All right, and so let's now actually test this out.
So we have products here in the URL as you see.
So reload.
And yeah, this is the products page.
If we say laptop,
woah, what happened here?
Ah, so it has to be the capital N.
Okay, let's try that again.
And this is the laptop page, awesome.
And on the third case, which is nothing,
and now we get the URL was not found on the server.
So that's not what we want.
This is found.
And that's actually because here it's not nothing,
it is just a slash.
So yeah, now this is the product page.
With the products again, we get the product page.
With the laptop, we get the laptop page.
And if we have something else,
then we get URL was not found on the server,
and we have the 404 status down here.
Now finally about this ID parameter that we have here.
So basically, this ID here is a parameter in the URL.
We are also now not responding to that.
So we still get the laptop page,
but nothing really happens according to this number.
And so let's fix that.
And the first step to do that is to actually
retrieve this ID from this URL.
And so that is where the url module
actually gets really handy.
So let me show that to you.
So we get the pathName already,
and now the query.
So that part with the ID equals one, two, three, et cetera,
that is called the query.
And so all we have to do is to now use the query.
All right, that's just to make sure
that it makes sense to you.
Let's again log it to the console here
so that you see what we're actually talking about.
So let's reload this.
And so now you see here that we have query,
and then in there we get an object
saying id is four.
So it basically parses, which is exactly
the name of the function;
and so it parses our URL and the query string
that we have, and it creates this object saying id four.
We can now continue this.
So with this format, so &, and I could say
name=apple let's say, and let's also say date=today.
Just for fun so that you see what happens here.
And so now we have an object with three elements.
So id, name and date, all nicely parsed
into an object that we can use.
Now in this case, we will only actually use the id.
And so it's gonna look like this.
So in the query object, there will be this object
with the id key.
And so actually, instead of having this query,
we can simply add that id here,
and then that will immediately give us the id
that comes from the query string.
Okay, makes sense?
So that is how we read the id from our URL.
And so with that, we can actually response to this.
So this is the laptop page for laptop, and now the number.
So let's do a template string here.
So we'll place this here, id.
And so this should now give us the exact number
that we have in the URL, right?
So id four, let's wait for it.
For laptop four, great.
For three, two, and so on and so forth.
So awesome.
Now in this data JSON,
we start with zero and then we have four laptops.
So what would happen if we type in the five or the 10
or something else?
Well, of course everything works the same.
So here we get exactly the number that we typed in here.
But in the case of the store here,
it doesn't make much sense because the last one that we have
is with the four.
But with the five, there is not really a laptop.
And so the response that we want in this case
is something like this.
Again, because number five is not actually
the id of one of our product.
And so how are we gonna do that?
Well, very simple.
We actually just do it here in this routing,
in this routing path, okay?
So we say that the pathName has to be laptop.
And at the same time, the id must be smaller
than laptopData.length.
.length, okay?
And that is because laptopData is an array.
So this data here is basically an array
of these five objects.
And so if we have five objects in here,
then the length of the array will be five.
And so by having this test,
we'll then ensure that this id here
is always smaller than five.
And so right now if we have 10,
well then we get URL was not found on the server.
With five, we also get the same error,
but then with four, which remember is the last laptop,
we get a page for laptop number four.
So awesome.
So that is our routing.
And that should be actually enough for just one video.
So this is actually very simple,
a very simple routing situation.
In a real world app, it will get very big
with 10s, hundreds of routes.
And so this code can be quite difficult,
and it can be quite complicated to do this.
And so usually when working with Node,
almost everyone I would say uses a Node framework
called Express to handle routing
and to handle lots of other stuff, all right?
But I think it's very important to actually understand
the basics of the technology in this case, Node.js,
before using a framework like Express, all right?
And so exactly what you're doing here.
You're learning the very basics
of how we can do this basic stuff with Node.js.
It's very exciting to be able to really run JavaScript
on the server.
So let's wrap up this video here.
In the next one, we will then implement basically
the visual part and getting all the data
from the JSON data that we already imported.
So see you back here in a second.