[? Music ?]

[Code Racer] [Building a Server with Express]

[Jim Hoskins] Now we're able to see that our CoffeeScript works.

It's able to print out some basic text, but we actually want a real server,

so let's get into that.

I'm going to move this console.log of Hello World,

and we're going to require a couple of packages.

The first one we're going to do is CoffeeScript.

I'm just simply going to do require 'coffee-script.'

And what this does is it allows Node to require

other CoffeeScript files.

We only need to really include this in the file that we're going to be running

because once it's loaded once, all the require calls

will be able to find .coffee files.

And the next thing we're going to want to include is Express,

and Express is the application framework we'll be using,

and this allows us to route certain URLs

to certain code, which will allow us to create different pages,

like the home page, a lobby page,

as well as APIs that will be located at different URLs

and anything else that we need, for instance,

sending static files across.

To do this, all we need to do is require Express,

and we'll set up a server that we'll add routes to.

This is easy enough to do.

We'll store Express into a variable called Express.

And we'll do a require with the string "express"

to load in the module, and now we have Express there.

And the next thing we need to do is use the create server

method of Express to create an instance of our application,

which we'll store in the app variable.

So "app = express.createServer."

And this app is everything that we're going to be defining different

configurations on, defining routes,

as well as the actual app that will listen on a port

to allow us to serve pages.

We can start off by doing "app.listen."

And what we can do is pass in a port, and we'll say port 3000.

And at the end of the file here, we'll just add a console.log,

and we'll say that the "Server is listening."

If we were to run this, we'll go back to our console here,

and we'll run "coffee server.coffee."

And if we go to our browser, load up local host 3000,

we actually get "Cannot GET /."

And this is the default error message that Express will send out

for anything that it cannot find.

It's its 404 page.

In fact, if we go to any other route, like something else,

we'll see that it updates that it cannot find that page.

What we have to do is define these different routes

and the type of content that they should return.

Let's go back to our editor here.

Now, between the app.createServer and app.listen,

we're going to define our routes.

The first thing I want to do is define the route for the route

or the / URL, so we'll do "app.get."

And get is the HTTP method, so instead of a get, we could do post

to handle, for instance, form posting

or put or any of the other HTTP methods.

But for our purposes, we'll be doing get,

and then we'll pass in the URL, and our URL is simply /

for the route of our application.

And finally, we'll pass a callback function,

and in this callback function will be passed a request object and a response object.

The way we'll do this in CoffeeScript is we will define a function

by first declaring the parameters in parentheses.

The parameters are request, which we'll call "req,"

and response, which is "res."

And then we'll use an arrow, and then by indenting,

we'll create the function body.

Everything that's indented under line 6 will be part

of the callback or the body of our method here.

The simplest way to send information back to the browser

that requested this is to use the response objects,

send method, and this just takes something to send back,

so we'll send a string "Hello from express."

Now if we go back to our browser and we're trying to go to the route,

if we do that, right now it says it "Cannot GET /."

And that's because we need to restart our server,

so I'm going to stop it by hitting Control C.

We can start it again.

And now we have our server listening, and if I refresh the page,

we see we now get "Hello from express."

That's great, but we saw we had to stop and restart the server,

which is really inconvenient, especially in development

because we have to--every time we save a file go back, stop it, start it.

It would be nice if we could just save the file, go to the browser,

and see what's changed.

The tool that lets us do that is Supervisor.

Instead of running coffee server.coffee,

we'll instead say "supervisor server.coffee."

Now, Supervisor sees that there's a coffee extension

and will run it through CoffeeScript.

Otherwise we could have simply done a .js file,

and it would have run it directly through Node.

Supervisor is aware of the coffee extension.

By running this, we get a little bit of debug information

about how to run Supervisor.

And then we'll see the familiar server is listening

at the last part of our output here.

We have it all running, which is great.

And if we refresh, we can see it says "Hello from express."

But if we were to go into our code here and let's just--once again--

save this file.

We've just saved it, even though nothing has changed.

Simply by saving it, we can see these last 3 lines.

It's "crashing child" and then starting it again.

It's detected that the server.coffee file has changed,

and by doing that, it stopped the instance we were running before

and started a new one for us automatically.

This is really convenient, so we'll be using Supervisor as our development runner.

Now, this is great, but we don't want to just simply send strings

from our routes here.

Instead we want to use templates or views,

and Express allows us a way to do this by allowing us

to use various templating languages.

The one we're going to use is called eco, E-C-O for embedded CoffeeScript.

And this is very similar to ERB or EJS

or other similar templating applications in that

it's simply the direct template code you want

with special tags that allow us to do dynamic things.

Now, since we're going to be using eco, we need to include it

as a dependency of our application, and that means we have to open

our package.json file again.

After our Express here, we'll define another dependency called "eco."

And again, we'll say any version will do right now,

but we'll change that later.

We've saved our package.json, and we're going to go back to the terminal here.

And now we need to update our packages now that we've updated our package.json.

To do this, all we have to do is run "npm install" once again.

And we can see it installed eco, and you can see it has a dependency

string scan that it's also installed for us.

Now we should be up and running with eco,

and now we just have to create an eco file

and tell Express to serve that eco template to it.

I'm going to start our server once again,

and what we need to do is we need to create a views directory.

This is where we'll keep our templates,

and it's where Express will look for them so it can read them,

compile them, and send it back to the browser.

Inside our Code Racer directory, we'll create a new folder,

and we're going to call this "views."

And this is where we'll create our template files.

Now, the views directory is the default for Express,

so we don't have to configure anything,

but if we wanted to have our view directory be somewhere else,

we could easily configure it with Express.

But this seems like a good place to go,

so let's create a new file.

And we'll save this as "index.eco."

Now let's just put some HTML in here.

We'll create a doctype HTML.

And right now our editor is not understanding what eco is.

We could install an eco bundle, but for right now

I'm just going to instruct it that it's HTML.

That way we get at least some syntax highlighting.

We'll create an HTML.

And I'll just fill the rest of this in.

All right, so I have the basic HTML page just with a head and a title

and an h1 in the body, and we'll store it into index.eco.

How do we send this from our application?

Well, let's open up our server.coffee,

and instead of doing res.send with a string,

we're going to change this to "res.render."

And we'll pass it the name of our template, in which case we'll do

"index.eco."

Now, this isn't quite going to work, but let's just see what happens.

We don't need to restart our server, but if we just refresh,

we can see it failed to locate view layout.

And this is the default functionality of Express

when it tries to render an action.

There are 2 layers. There's the action and the layout.

Right now, we've written everything into our one index.eco file,

so if we come back here, there's one way we can do it

is to pass in some options.

In our case, we'll say "layout: false."

By doing this, it says we don't need to wrap this with a layout,

and we can just simply serve the index.eco file

as it exists, so this is one way to solve it.

And if we go back and refresh, we see our page just as we wanted it.

If we look inside, we can see it's the code that we put in there.

Now, what I'm going to do is I'm going to reorient this and by

leaving a comma at the end of the line

and indenting, we're still passing anything else in here

as an object to res.render.

The first argument is index.eco.

And anything indented here is an object

that's being passed in as options.

Layout is one option.

Anything else after that is going to be variables

that can be interpreted in our template.

If we were to say "title" is "Our Special Title,"

we could go into our index.eco file and replace this

with the special eco tag.

And our tag is a less than sign, a percent, and an equal

to output some information into our page.

And then our variable, which is title.

And we need to actually prepend any of these with @.

The @ symbol in CoffeeScript is like saying "this.title,"

which would also work.

You can see "Our Special Title," but in CoffeeScript, we can replace this dot with @.

Simply by passing in something called title with a value,

we can retrieve it using @title here.

And we can see we get "Our Special Title," and by simply changing it,

we don't have to make any changes to our template,

and it will be reflected right in our page.

That's great.

In fact, though, we don't really want to disable this layout feature.

It's actually very nice.

I'm going to remove this "layout: false" here,

and inside our views directory, we'll create a layout.eco file.

And I'm just going to move most of this into that layout.eco.

But I'm going to keep the h1 in our index.eco.

And instead of our normal h1 here in the layout,

we need to indicate where we're going to place the contents

of index.eco into our layout.

We'll do this by using a special tag with the less than, percent,

dash, and then an @body and closing percent there.

So @body is where our template engine will store the contents

of index.eco, and we want to display it into our body.

Now, we may have seen that we've used equal before,

but what happens if we do that?

If we go back to our page and refresh it,

we can see that it put the contents of index.eco into our page.

However, it has escaped all the values, so now we're seeing

the HTML tags like this.

By replacing this equal with a dash,

we won't escape it, which we trust it to not be escaped.

If we refresh, now our h1 tags are handled properly.

This is nice in that we can simply have our index.eco

be the main body of our page,

and our layout can be consistent and shared

across different actions on our page, which is great

because a lot of our pages will have the same header, footer, JavaScript includes,

style includes, and everything else like that,

and we only really want to mess with what's in the body.

So we'll just save this out, and now we have a basic server

that's able to send out our templates

compiled with even variables like title.

The next step is to go a little bit further with this

and add some things like the ability to search static files

as well as to use a CSS preprocessor like LESS

and include some base CSS from Bootstrap.

We'll do that next.