Exercise (Video): Introduction to Express

Loading...

Do curso por The Hong Kong University of Science and Technology

Server-side Development with NodeJS, Express and MongoDB

390 classificações

The Hong Kong University of Science and Technology

Server-side Development with NodeJS, Express and MongoDB

390 classificações

Curso 4 de 4 em Specialization Full-Stack Web Development with React

This course deals with all things server-side. We base the entire course around the NodeJS platform. We start with a brief overview of the Web protocols: HTTP and HTTPS. We examine NodeJS and NodeJS modules: Express for building web servers. On the database side, we review basic CRUD operations, NoSQL databases, in particular MongoDB and Mongoose for accessing MongoDB from NodeJS. We examine the REST concepts and building a RESTful API. We touch upon authentication and security. Finally we review backend as a service (BaaS) approaches, including mobile BaaS, both open-source and commercial BaaS services. At the end of this course, you will be able to: - Demonstrate an understanding of server-side concepts, CRUD and REST - Build and configure a backend server using NodeJS framework - Build a RESTful API for the front-end to access backend services

Na lição

Introduction to Server-side Development

In this module you will be introduced to Node, Node modules and the Node HTTP server. You will learn about the Express framework and how to set up a REST API using Express.

Introduction to Express13:20

Exercise (Video): Introduction to Express21:00

Brief Representational State Transfer (REST)16:14

Express Router8:05

Exercise (Video): Express Router40:20

Conheça os instrutores

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

In the exercise in the previous lesson,

we built a simple HTTP server that could serve up static content,

this was built completely using Node.js.

Now that we have learned about Express,

the minimalist framework that supports development of server on top of Node.js,

let's now examine how we can use Express to build the same server in this exercise.

To get started, go to the Node.js folder that we have been using for storing

all the code for this course and then,create a new folder there named node-express,

and then move into this folder.

Now, we will create

a public folder here within the node express folder.

Then, we will go to that node HTTP public folder and then copy these two files,

the index.HTML and aboutus.html to the node-express public folder.

We're going to serve up these two files using

the Express server that we're going to build in this exercise.

Now, going to the terminals.

Move into the node-express folder in the terminal and then at the prompt type npm init,

to initialize a node application.

Then, for the package name let's just use node-express,

and for the description we'll say Node Express Examples,

and entry point is index.js,

and all the rest of that same like before,

and let's create the package.json file.

Now, let me open

the project using the editor Visual Studio Code in my case and then,

in the package.json file let's go in and add in the new script called start,

which is node index and save the changes.

Now, that we have initialized the node module,

let's go ahead and install the Express framework within

the project to make use of it to build our express server.

So, at the prompt,

type npm install express.

So this is how you would install

a third-party node module if you are taking this course for

the first time and have not taken the previous courses

then this is something that is important to note.

This is how you will install a node module by adding the minus minus save,

we are also saving the information that

this third-party node module is a dependency

for our project and this information will be saved in the package.json file.

If you have taken the previous courses of the specialization,

then you already know about this information.

So, let's go ahead and install the Express module.

As you can notice,

we are using Express version 4.16.3 in this course.

So, let's now go back to our code.

Taking a look at the package.json file,

you see that within the package.json file by installing Express we already see

another property that is included into the package.json file called dependencies.

This dependencies track all the packages

on which this current project is going to be dependent upon.

Here you see Express being installed

there and the corresponding version of Express being installed here,

so this declares that this particular project is

dependent upon Express version at least 4.16.3.

In addition, you also see this folder called node modules created here.

So this is where all the third-party node modules that are installed by

your application are going to be stored.

Now, when we do a Git commit,

we don't want to commit this node modules folder.

So to ignore that,

lets create a file

named.gitignore and within the.gitignore file,

let's type in node_ modules.

So, this is letting Git know that we do not wish to

commit the node modules folder to the Git repository.

So, with this let's save the changes.

So now when you create a Git repository,

the node modules folder will be ignored.

It is not required because you can always recreate the node modules folder anytime

you clone this project from your Git repository by simply typing npm install.

This will look at the package.json file,

and look at all the dependencies,

and the development dependencies that are in the package.json

file and are automatically installed all those packages for you.

Now, that we have completed this,

let's create our first Express project,

so to do that we'll create a file named index.js and in the index.js

we'll declare a const express require express.

Now, you'll note that express is a third-party node module and it has been

installed in our node modules folder in the correct directory.

So, when we declare this here saying that this Express module is required,

then it will be automatically included from the node modules folder into our application.

Now, also install HTTP

the core module here.

Now, that we have installed this,

let's create the course name as

local host and port number as 3000.

So you see that we are using exactly the same way of doing

this exercise as we did for the HTTP exercise earlier.

Now, at this point,

we will declare this const called app as express.

So this way, we are saying that our application is going to use the Express node module.

So, once we do that,

then Express provides a bunch of methods that we can use to construct our web server.

So after this, we'll say app.use() and inside here,

we will declare a function that will be called to set up our server.

So, this function takes three parameters req,

which is the request; res,

which is the response, and next.

Now, as we saw Express uses additional middleware.

So, the next is used when you need to

invoke additional middleware to take care of work on your behalf.

We will see the use of next in some of the later exercises,

but the function here will take three parameters req, res, and next.

Next is an optional parameter that can

be not included if you are not going to use it within your code.

So, inside here we'll say,

console log and then,

we'll log that headers,

and we'll respond with the status code set to 200.

Set header content type

as text HTML.

So, you notice that much of this code looks very similar

to the way we set up our node application.

So, we'll say res.end and

here HTML body h1.

We'll just say this is an Express server and close off

the tanks there, and that's it.

From your understanding of the node HTTP,

you already understand what these three are doing

and the same thing is also done in the Express server.

Now that we have set up the server using the App,

we will set up the server,

and then this is where we will use the HTTP createServer,

and thus createServer is now going to take app as it's function parameter there,

and thereafter, we'll simply say server.listen port,

hostname and the arrow

function here within which I'm going to print out,

console, log back coat server running at HTTP://hostname:port,

that's it. So you'll see that this part is very much similar

to what you have done for the HTTP exercise,

except that the createServer now takes this app,

which we have declared earlier Express.

So, Express is adding in additional functionality which will be

used by the HTTP server that we create using note.

Once we are done with this,

let's save the changes,

and then we will go ahead and start the server,

and have a look at what the server will serve up.

Going into the terminal, add the terminal,

type NPM start and you will see that your server is up and running.

Now when we access this from either the browser or from postman,

you will see what it serves up.

So, here I have Postman up and money.

Let me send the GET request to localhost 3,000 just like before

and you will see that this is serving up the HTML code that we include in there,

and so this is an Express server.

Clicking on the preview,

this will show you what it will look like in a browser,

and this shows the raw version of the code that has been sent back from the server side,

and you can see that the status code is 200, okay?

And the other header information vector has been sent from the server site.

Notice in particular it says x powered by Express in the header.

With this, we complete the first part of this exercise where we have seen

how we can make use of Express to set up a simple web server.

Let me now stop the server and then initialize the Git repository,

so at the prompt I will type "git init" and

then "git status" and you'll see that files that have been untracked,

so I will say "get and dropped" and these files are now added into the Git repository,

and so when you say git status,

you see the files that have been added.

Note in particular that the node modules folder

has not been added to the Git repository because in

the.gitignore file we explicitly stated that

the node modules folder should not be included in the Git repository.

So now, let's check in our commit exchange by saying git

commit minus m Express example,

and we have committed this to our Git repository.

In the second part of this exercise,

we will look at the use of Express middleware called Morgan.

Morgan is used to log information to the screen,

so it'll log information about incoming requests to the screen so that we

can see some information being printed in our console here.

Also, we will see how we can set up our Express server to serve up static HTML files.

To get started, at the prompt type npm

install Morgan minus, minus save.

Now, Morgan is going to be a dependency that we're going to be using in our Application.

So, that's why it's minus,

minus save and this would get Install,

and you can see that I'm using Morgan version 1.9.0 in this course.

Now that we have installed Morgan,

let's see how we can make use of it within our Application.

So going to our Application,

the way to make use of Morgan is to declare here

const Morgan require Morgan,

and then we'll say,

"App use Morgan with the development".

So, this is the development version.

So, it will print out additional information to the screen as required.

Now, going into our application.

Within our application, I'm not going to log the entire headers.

Instead, let me remove this because Morgan will

log sufficient information for us to look at,

and I'm going to set up my server to serve up the HTML files from the public folder.

So to do this,

I'm going to declare up use and express static.

This tells Express to serve up the static files from double underscore dirname.

So, this says the root of

this project and they will find those files

in double_dirname, plus/ public.

So, recall that we created the public folder in the node Express folder.

So, this is informing Express that you will look at

this particular folder in the root folder of this project and inside the public folder.

So, this will be the folder from which

static HTML files will be served up by my Express server.

After making these changes,

let's save the changes,

and then restart our server,

and then see how it works.

Going to that prompt,

let's type npm start,

to start our server,

and once the server is up and running,

let's examine what it will serve up when we send various requests to this server.

Using Postman, let's first send a get request to local host:3,000

and you'll notice that it is serving up the index.html file.

We have set up our server to serve up static files from the public folder,

and if we just say localhost:3000 by default,

it'll serve up the index.html file.

So, this is how your typical Web server works.

So, that's what we have ended up setting up our express server to do.

Now, let's type in localhost:3000 about.html and send the request,

and says this is about our strategy HTML,

and also the about us HTML file has been saved up here.

So in the preview,

you can see the resulting file that has been served up from our server site.

Let's try to access a non-existent file

and you'll see that when you try to access a non-existent file,

then it will default to the second setup that we have done in our code,

which says this is an Express server.

We have not specified to our Express server how to handle

situations where it encounters a file that doesn't exist.

So, that is why it is using the default that have set up right below the Express static,

which is to serve up the default value, and of course,

this is not the most ideal behavior

but that's what we have in the Express server at this moment.

Later on, we will modify the Express server to handle

errors in more detail, in later exercises.

This is also a good time for you to do a Git commit of the changes.

So, let's check Git status after stopping the server,

and we'll add the modified files,

and then do Git commit

minus m Express,

serve static files.

That's it. With this,

we complete this exercise.

In this exercise, we have seen how we can set up

a simple web server to serve up content on our behalf.

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2018 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play