Original subtitles

All right. After all of this time talking about how amazing the back end is and how cool it is to have

to build your own server, we’re finally actually going to do it this time.

So, in this lesson, we're going to learn how to create a real server locally on our computer using

Node.js and Express.

Now first things first.

I've got my Hyper Terminal open and I've got Atom open next to it as well.

So the first thing I want to do is we're going to remove the intro-to-node project directory

if you still have it there,

so we start off with a clean slate.

Now, the second thing is, I want you to notice that you can see the location I'm currently at is the tilde,

so that means I'm in the home directory of my Mac book.

So I want you to open up a new Hyper Terminal, or just navigate to the home directory, so that we're starting

at the same position.

And here comes a challenge.

So, using what you learned in the last module, all about how to use the command line,

I want you to complete this challenge by yourself and to create a new directory,

and we're going to call it my-express-server, and then I want you to cd into that directory.

Then inside that project folder, I want you to create a new file called server.js, and I want you

to initialize npm.

And when you are initializing npm, I want you to set the starting point as server.js.

So pause the video now and see if you can complete that challenge.

All right.

So the first thing we had to do was to create a new directory, and I'm going to create that on my

desktop.

So let's just shrink that down, and I'm going to cd into desktop. Now that I'm on my desktop as indicated

here,

I'm going to create a new directory, and I do that of course using the mkdir keyword,

and then I'm going to call it my-express-server.

So bam.

There it is. Created.

Now I'm going to cd into my-express-server, and I'm going to create a new file here called

server.js.

So, to create a new file the keyword is, of course, touch.

And then I create my server.js, which is the name of the file.

So this is a brand new Javascript file that I've just created out of thin air.

Now, while we’re inside my-express-server, this directory, we're going to initialize npm.

So the keyword for that is npm init.

And we're going to hit enter.

And now we can go through the process of setting up our NPM.

So the package name is going to be called my-express-server. That’s fine. Version is 1.0.0.

Description, let's call it, “My first express server.” Entry point is server.js.

That’s exactly what we want.

And test command we’ll ignore. Git repository we’ll ignore. Keywords ignore. Author, we'll just add our own

name. License. And now they've compiled our package.json, and let's just take a look at it. Looks

fine to me.

So let's hit enter for yes.

And now we have our package.json and our server.js ready set up.

So this is basically the process that you will go through every single time you create a new web development

project.

So it's good to run through it a few times just so that you get used to all the things that you have

to do.

All right.

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

Atom. And the short cut to do that in the command line is simply, make sure that you're inside the directory

that you want to add to Atom as the project folder,

and then you're going to write atom .

and now if you hit enter, it will open up and add your project folder to Atom on the left hand side, and you

can get started coding up over here.

So that's just a quick tip when you're using Atom and the command line. As you'll come to see, the command

line is super duper powerful, and it is literally going to become your best friend.

So the next step is to install

Express. And what do we always do when we use something new? We check out its documentation.

So the documentation for Express is on a web site called expressjs.com.

And if you have a look at ‘Getting started’ and ‘Installing’, then you can see they've got a whole bunch of

instructions for you.

So we've already completed the first few steps.

We've created a new directory.

We've initialized NPM.

We've set our entry point and we're now going to install

Express.

Now you can see that they've got this command ‘npm install express - - save’. Now, as they explain

down here, what ‘ - - save’ basically does is it adds Express into your packages.json under the

dependencies.

Now it used to be that you had to do this manually by adding the ‘ - - save’, but as of Node 5 and

above, which we're definitely using, we’re using node 10 in this course, way into the future,

you don't actually need this flag,

it’s done by default.

So all we need to do is to say ‘npm install express’, and we can do that over here, making sure that we're

inside, again, our directory that we're working with, and then we're going to say ‘npm install express’.

Hit enter. It’s going to take a little while to download. It’s a relatively large package. And once it's done, it

will add the Node modules that Express requires, as well as Express itself.

And now, when you have a look inside your packages.json, you can see that we've got a new dependency

added, which is Express.

Now this is the current latest version of Express,

but in the future when you’re taking this course, it might be 4.17 or 5.0,

that’s completely fine.

We're going to be working with the latest version, and this course will be up to date with the latest

version.

So I will be time traveling into the future and changing the course in case there are any issues.

So rest assured, everything that you're watching, everything I'm telling you to do, is going to work.

So now that we've installed Express, the next step is of course to require Express. So let's head over

to ‘Getting started’ and going to the ‘Hello world example’.

So we're going to create a new constant called express and we're going to require express. Now in this

case they’re actually specifying a specific version, but we won’t. We’re just going to use the current latest

version.

So let's head over to our server.js.

We're going to create a new const that's called express, and we're going to require that package “express”.

Now, as always, if we want to use the keyword const without JSHint shouting at us, we're going to add

a comment called ‘jshint esversion:6’

to make that warning go away and tell our linter that we are using

ES6.

All right. So now that we've required and incorporated Express into our file, the next step is to create

a new constant called app, and this is simply a function that represents the Express module, and we bind

that to the word app.

So we now have a constant called app, which is set equal express, and you'll notice that in the wild, when

you come across web sites built using Express, the word app is usually always used when you're referring

to the Express module, like so,

although you don't have to. You can call it anything you like. But this is just best practice, and it makes it

easier for other people to understand what's going on in your code.

So now that we've created our constant app, the next step is to use this app, and we're going to use one

of its methods called listen.

And this tells it to listen on a specific port for any HTTP requests that get sent to our server.

So I'm going to choose the port 3000, and if we hit save,

now we have literally just built our very first server.

This is the bare bones of an Express server.

Now let's go into Hyper and let's run this server by saying node server.js,

hit enter, and you can see that not much is happening, other than the fact that it seems like our

command line is hanging.

We don't get our normal sort of prompt, right? Because normally, when we execute a command, we'll get something

like this, ‘Angelas-Macbook-Pro:

my-express-server angelayu’ and the prompt, which is of course that dollar sign.

Now we don't get the prompt here.

The reason is because it's listening on this port that we specified.

Now a port is basically just a channel that we've tuned our server to.

So, for example, sometimes I listen to the radio, and I tune my radio to listen to 104.9FM,

and our server is just tuned into the channel 3000.

Now not much is happening here, so let's stop our server, and we do that by going into the command line

and hitting Control C.

Now, you're going to get yourself out of a lot of hairy situations by using Control C.

So now we've stopped our server and we're back on the prompt, so we're no longer running our server anymore.

So if we wanted to be able to see when our port is set up and when our server is running, we can add

a callback function to this method

listen. So we can add an anonymous function, and we're going to callback using a console.log saying, “Server

started on port 3000”, which is the one that we specified here.

So now, if we hit save and we try to run our code again, node server, you can see now, instead of just hanging,

it's telling us that server has started on port 3000.

Now if we head over to that ports location, which is localhost:3000, because we're hosting our server

locally, and after the colon we specify the port that our server is set up on, which is 3000, and you can

see that we get this error, where it says, “Cannot GET /“.

Now what does that mean?

Well, it means that when our browser is trying to get in touch with our server on the port 3000, it's

not able to get anything back.

Now we have to figure out how can we write some code so that our server responds when a browser is making

a request to our server.

We have to send the browser some information, right, to display.

So, in the next lesson,

that’s what we're going to be learning about.

We're going to learn about the request and response that we can provide when a browser makes a get request.

So for all of that and more, I’ll see you on the next lesson.