All right. After all of this time talking about how amazing the back end is and how cool it is to have 1
to build your own server, we’re finally actually going to do it this time. 2
So, in this lesson, we're going to learn how to create a real server locally on our computer using 3
Node.js and Express. 4
Now first things first. 5
I've got my Hyper Terminal open and I've got Atom open next to it as well. 6
So the first thing I want to do is we're going to remove the intro-to-node project directory 7
if you still have it there, 8
so we start off with a clean slate. 9
Now, the second thing is, I want you to notice that you can see the location I'm currently at is the tilde, 10
so that means I'm in the home directory of my Mac book. 11
So I want you to open up a new Hyper Terminal, or just navigate to the home directory, so that we're starting 12
at the same position. 13
And here comes a challenge. 14
So, using what you learned in the last module, all about how to use the command line, 15
I want you to complete this challenge by yourself and to create a new directory, 16
and we're going to call it my-express-server, and then I want you to cd into that directory. 17
Then inside that project folder, I want you to create a new file called server.js, and I want you 18
to initialize npm. 19
And when you are initializing npm, I want you to set the starting point as server.js. 20
So pause the video now and see if you can complete that challenge. 21
All right. 22
So the first thing we had to do was to create a new directory, and I'm going to create that on my 23
desktop. 24
So let's just shrink that down, and I'm going to cd into desktop. Now that I'm on my desktop as indicated 25
here, 26
I'm going to create a new directory, and I do that of course using the mkdir keyword, 27
and then I'm going to call it my-express-server. 28
So bam. 29
There it is. Created. 30
Now I'm going to cd into my-express-server, and I'm going to create a new file here called 31
server.js. 32
So, to create a new file the keyword is, of course, touch. 33
And then I create my server.js, which is the name of the file. 34
So this is a brand new Javascript file that I've just created out of thin air. 35
Now, while we’re inside my-express-server, this directory, we're going to initialize npm. 36
So the keyword for that is npm init. 37
And we're going to hit enter. 38
And now we can go through the process of setting up our NPM. 39
So the package name is going to be called my-express-server. That’s fine. Version is 1.0.0. 40
Description, let's call it, “My first express server.” Entry point is server.js. 41
That’s exactly what we want. 42
And test command we’ll ignore. Git repository we’ll ignore. Keywords ignore. Author, we'll just add our own 43
name. License. And now they've compiled our package.json, and let's just take a look at it. Looks 44
fine to me. 45
So let's hit enter for yes. 46
And now we have our package.json and our server.js ready set up. 47
So this is basically the process that you will go through every single time you create a new web development 48
project. 49
So it's good to run through it a few times just so that you get used to all the things that you have 50
to do. 51
All right. 52
So now that I've done that, the next thing I'm going to do is I'm going to open up that project inside 53
Atom. And the short cut to do that in the command line is simply, make sure that you're inside the directory 54
that you want to add to Atom as the project folder, 55
and then you're going to write atom . 56
and now if you hit enter, it will open up and add your project folder to Atom on the left hand side, and you 57
can get started coding up over here. 58
So that's just a quick tip when you're using Atom and the command line. As you'll come to see, the command 59
line is super duper powerful, and it is literally going to become your best friend. 60
So the next step is to install 61
Express. And what do we always do when we use something new? We check out its documentation. 62
So the documentation for Express is on a web site called expressjs.com. 63
And if you have a look at ‘Getting started’ and ‘Installing’, then you can see they've got a whole bunch of 64
instructions for you. 65
So we've already completed the first few steps. 66
We've created a new directory. 67
We've initialized NPM. 68
We've set our entry point and we're now going to install 69
Express. 70
Now you can see that they've got this command ‘npm install express - - save’. Now, as they explain 71
down here, what ‘ - - save’ basically does is it adds Express into your packages.json under the 72
dependencies. 73
Now it used to be that you had to do this manually by adding the ‘ - - save’, but as of Node 5 and 74
above, which we're definitely using, we’re using node 10 in this course, way into the future, 75
you don't actually need this flag, 76
it’s done by default. 77
So all we need to do is to say ‘npm install express’, and we can do that over here, making sure that we're 78
inside, again, our directory that we're working with, and then we're going to say ‘npm install express’. 79
Hit enter. It’s going to take a little while to download. It’s a relatively large package. And once it's done, it 80
will add the Node modules that Express requires, as well as Express itself. 81
And now, when you have a look inside your packages.json, you can see that we've got a new dependency 82
added, which is Express. 83
Now this is the current latest version of Express, 84
but in the future when you’re taking this course, it might be 4.17 or 5.0, 85
that’s completely fine. 86
We're going to be working with the latest version, and this course will be up to date with the latest 87
version. 88
So I will be time traveling into the future and changing the course in case there are any issues. 89
So rest assured, everything that you're watching, everything I'm telling you to do, is going to work. 90
So now that we've installed Express, the next step is of course to require Express. So let's head over 91
to ‘Getting started’ and going to the ‘Hello world example’. 92
So we're going to create a new constant called express and we're going to require express. Now in this 93
case they’re actually specifying a specific version, but we won’t. We’re just going to use the current latest 94
version. 95
So let's head over to our server.js. 96
We're going to create a new const that's called express, and we're going to require that package “express”. 97
Now, as always, if we want to use the keyword const without JSHint shouting at us, we're going to add 98
a comment called ‘jshint esversion:6’ 99
to make that warning go away and tell our linter that we are using 100
ES6. 101
All right. So now that we've required and incorporated Express into our file, the next step is to create 102
a new constant called app, and this is simply a function that represents the Express module, and we bind 103
that to the word app. 104
So we now have a constant called app, which is set equal express, and you'll notice that in the wild, when 105
you come across web sites built using Express, the word app is usually always used when you're referring 106
to the Express module, like so, 107
although you don't have to. You can call it anything you like. But this is just best practice, and it makes it 108
easier for other people to understand what's going on in your code. 109
So now that we've created our constant app, the next step is to use this app, and we're going to use one 110
of its methods called listen. 111
And this tells it to listen on a specific port for any HTTP requests that get sent to our server. 112
So I'm going to choose the port 3000, and if we hit save, 113
now we have literally just built our very first server. 114
This is the bare bones of an Express server. 115
Now let's go into Hyper and let's run this server by saying node server.js, 116
hit enter, and you can see that not much is happening, other than the fact that it seems like our 117
command line is hanging. 118
We don't get our normal sort of prompt, right? Because normally, when we execute a command, we'll get something 119
like this, ‘Angelas-Macbook-Pro: 120
my-express-server angelayu’ and the prompt, which is of course that dollar sign. 121
Now we don't get the prompt here. 122
The reason is because it's listening on this port that we specified. 123
Now a port is basically just a channel that we've tuned our server to. 124
So, for example, sometimes I listen to the radio, and I tune my radio to listen to 104.9FM, 125
and our server is just tuned into the channel 3000. 126
Now not much is happening here, so let's stop our server, and we do that by going into the command line 127
and hitting Control C. 128
Now, you're going to get yourself out of a lot of hairy situations by using Control C. 129
So now we've stopped our server and we're back on the prompt, so we're no longer running our server anymore. 130
So if we wanted to be able to see when our port is set up and when our server is running, we can add 131
a callback function to this method 132
listen. So we can add an anonymous function, and we're going to callback using a console.log saying, “Server 133
started on port 3000”, which is the one that we specified here. 134
So now, if we hit save and we try to run our code again, node server, you can see now, instead of just hanging, 135
it's telling us that server has started on port 3000. 136
Now if we head over to that ports location, which is localhost:3000, because we're hosting our server 137
locally, and after the colon we specify the port that our server is set up on, which is 3000, and you can 138
see that we get this error, where it says, “Cannot GET /“. 139
Now what does that mean? 140
Well, it means that when our browser is trying to get in touch with our server on the port 3000, it's 141
not able to get anything back. 142
Now we have to figure out how can we write some code so that our server responds when a browser is making 143
a request to our server. 144
We have to send the browser some information, right, to display. 145
So, in the next lesson, 146
that’s what we're going to be learning about. 147
We're going to learn about the request and response that we can provide when a browser makes a get request. 148
So for all of that and more, I’ll see you on the next lesson.