Free Code Camp and Learning Express.js: Param Pam Pam

Moving right along!  We’re 3/4 of the way there now!

Let’s look at the Directions and Hints:

 PARAM PAM PAM
 Exercise 6 of 8
Create an Express.js server that processes PUT ‘/message/:id’ requests.
For instance:
    PUT /message/526aa677a8ceb64569c9d4fb
As a response to these requests, return the SHA1 hash of the current date
plus the sent ID:
    require(‘crypto’)
      .createHash(‘sha1’)
      .update(new Date().toDateString() + id)
      .digest(‘hex’)
——————————————————————————-
## HINTS
To handle PUT requests use:
    app.put(‘/path/:NAME’, function(req, res){…});
To extract parameters from within the request handlers, use:

    req.params.NAME

This one was pretty frustrating.  At one point, I had the correct answer and it didn’t work.  I ended up deleting everything and typing it all in again, and then it worked.  I figure there must have been a hidden character or something that was keeping it from working.  Who knows?  Anyway, here’s the explanation:

First, we declare the variables.  We require express, get the port from process.argv, and then set app to express() just like we have in the previous lessons in this tutorial:

var express = require('express');
var port = process.argv[2];
var app = express();

Next, we get the app.put function and set the port to listen:

var express = require('express');
var port = process.argv[2];
var app = express();


app.put('/message/:id', function(req, res){

});

app.listen(port);

 

Now, we turn to the rest of the hints, which aren’t that clear, like all the rest of the hints inall the node.js tutorials.

 

Okay, if we look at the require(‘crypto’) statement up there, you’ll see that the line that begins update() has a “+ id” in it.  We’re also supposed to return, along with the date, the SHA1 hash of the plus the sent ID.  Finally, we are told that our server will “process PUT ‘/message/:id’ requests.”.  The request comes in the form “PUT /message/526aa677a8ceb64569c9d4fb”.  Putting the clues together tells is that “id” is equal to the long string of letters and numbers “526aa677a8ceb64569c9d4fb”.

We need to pull that string of letters and numbers out and we do that with the other hint they gave us, req.params.NAME, except that obviously NAME is id.  So, we’ll call the result of that id and we have:

      var id = req.params.id;

So, now we’ll finally use the crypto statement and set it equal to a variable:

      var str = require('crypto')
            .createHash('sha1')
            .update(new Date().toDateString() + id)
            .digest('hex');

 

We defined id, of course, so now we’re good.

We still need to return this new string we created, so we’ll do that with res.send().  And then, we pass!

Here’s the final program:

var express = require('express');
var port = process.argv[2];
var app = express();


app.put('/message/:id', function(req, res){
      var id = req.params.id;
      var str = require('crypto')
            .createHash('sha1')
            .update(new Date().toDateString() + id)
            .digest('hex');
      res.send(str);
});

app.listen(port);

 

See you next time!

Free Code Camp and Learning Express.js: Stylish CSS

So we’re coming up on the end of the FreeCodeCamp ExpressJS tutorial.  This one is simple, almost too easy!

 

Here’s the directions and hints:

STYLISH CSS
 Exercise 5 of 8
Style your HTML from previous example with some Stylus middleware.
Your solution must listen on the port number supplied by process.argv[2].
The path containing the HTML and Stylus files is provided in process.argv[3] (they are in the same directory). You can create your own folder and use these:
The main.styl file:
    p
      color red
The index.html file:
    <html>
      <head>
        <title>expressworks</title>
        <link rel=”stylesheet” type=”text/css” href=”/main.css”/>
      </head>
      <body>
        <p>I am red!</p>
      </body>
    </html>
——————————————————————————-
## HINTS
To plug-in stylus someone can use this middleware:
app.use(require(‘stylus’).middleware(__dirname + ‘/public’));
Remember that you need also to serve static files.
## NOTE
For your own projects, Stylus requires to be installed like any other dependency:

    npm install stylus

Okay, let’s start by installing the stylus package.

$ npm install stylus
npm WARN package.json chat-example@0.0.0 No repository field.
npm WARN package.json chat-example@0.0.0 No license field.
stylus@0.54.5 node_modules/stylus
├── css-parse@1.7.0
├── debug@2.2.0 (ms@0.7.1)
├── mkdirp@0.5.1 (minimist@0.0.8)
├── sax@0.5.8
├── source-map@0.1.43 (amdefine@1.0.0)

└── glob@7.0.3 (path-is-absolute@1.0.0, inherits@2.0.1, inflight@1.0.5, once@1.3.3, minimatch@3.0.0)

We want to use this package to ‘style’ the HTML file we are serving.  Stylus is middleware, which I talked about here.  Let’s set up the outline of an express app:

var express = require('express');

var port = process.argv[2];
var filePath = process.argv[3];

var app = express();

app.listen(port);

Remember that they gave us the port and the filePath in the hints.

We are going to need to access the HTML file, and the stylus file.  This is a static HTML file, and we’ll serve it using a command we’ve seen before:

app.use(express.static(filePath||path.join(__dirname, 'public')));


Note that since we're using path.join here, we'll need to add a require statement for it:
<div>
var path = require('path');

Next, we want to take the line they gave us in the hints to get the stylus file:

app.use(require('stylus').middleware(__dirname + '/public'));

And that's really it!  Here's our final program:

var express = require('express');
var path = require('path');
var port = process.argv[2];
var filePath = process.argv[3];

var app = express();
app.use(express.static(filePath||path.join(__dirname, 'public')));
app.use(require('stylus').middleware(__dirname + '/public'));
app.listen(port);

See you next time!

Free Code Camp and Learning Express.js: Good Old Form

Exercise number four of the FreeCodeCamp Express.js tutorial.  We’re flying right along!  Here’s the directions and hints they give us:

 GOOD OLD FORM
 Exercise 4 of 8
Write a route (‘/form’) that processes HTML form input (<form><input name=”str”/></form>) and prints backwards the str value.
——————————————————————————-
## HINTS
To handle POST request use the post() method which is used the same way as get():
    app.post(‘/path’, function(req, res){…})
Express.js uses middleware to provide extra functionality to your web server.
Simply put, a middleware is a function invoked by Express.js before your own request handler.
Middlewares provide a large variety of functionalities such as logging, serving static files and error handling.
A middleware is added by calling use() on the application and passing the middleware as a parameter.
To parse x-www-form-urlencoded request bodies Express.js can use urlencoded() middleware from the body-parser module.
    var bodyparser = require(‘body-parser’)
    app.use(bodyparser.urlencoded({extended: false}))
Read more about Connect middleware here:
The documentation of the body-parser module can be found here:
Here is how we can flip the characters:
    req.body.str.split(”).reverse().join(”)
——————————————————————————-
## NOTE
When creating your projects from scratch, install the body-parser dependency with npm by running:
    $ npm install body-parser
…in your terminal.

Again, the port to use is passed expressworks to the application as process.argv[2].

Okay, first we need to install the package as mentioned in the note.  Typing npm install body-parser at the $ prompt gives us:

npm WARN package.json chat-example@0.0.0 No repository field.
npm WARN package.json chat-example@0.0.0 No license field.
body-parser@1.15.1 node_modules/body-parser
├── content-type@1.0.2
├── bytes@2.3.0
├── depd@1.1.0
├── qs@6.1.0
├── on-finished@2.3.0 (ee-first@1.1.1)
├── raw-body@2.1.6 (unpipe@1.0.0)
├── http-errors@1.4.0 (inherits@2.0.1, statuses@1.3.0)
├── debug@2.2.0 (ms@0.7.1)
├── iconv-lite@0.4.13

└── type-is@1.6.13 (media-typer@0.3.0, mime-types@2.1.11)

This one is actually easier than it looks, because they give you everything, and I mean everything, you need to do it.

First we declare variables, noting that as usual they are supplying us the port in process.argv[2]:

var express = require("express");
var app = express();
var port = process.argv[2];
Next add the lines relevant to body-parser:
var bodyparser = require('body-parser');
app.use(bodyparser.urlencoded({extended: false}));

Add the line for the post request:

app.post('/path', function(req, res){...})

And inside the brackets goes the code for reversing the string:

     req.body.str.split('').reverse().join('');

Oh yeah….there IS one sneaky little it.  See up there in the directions where it says “Write a route (‘/form’)”?  And see how in the app.post() line it says ‘/path’?  Yeah, that gets changed.  Presto, we’ve done it!

And here’s the final program:

var express = require("express");
var app = express();
var port = process.argv[2];

var bodyparser = require('body-parser')
app.use(bodyparser.urlencoded({extended: false}))

app.post('/form', function(req, res) {
    console.log(res.send(req.body.str.split('').reverse().join('')));
});

app.listen(port);

See you next time!

Free Code Camp and Learning Express.js: Jade

Here’s the third lesson in the Express.js tutorial.  As always, there are a couple sneaky things, but overall, this isn’t that difficult.

 

NOTE:  I found this blog post to be quite helpful for this lesson:

http://webapplog.com/jade-handlebars-express/

Let’s start with the Directions and Hints:

JADE
 Exercise 3 of 8
Create an Express.js app with a home page rendered by Jade template engine.
The homepage should respond to /home.
The view should show the current date using toDateString.
——————————————————————————-
## HINTS
The Jade template file index.jade is already provided:
    h1 Hello World
    p Today is #{date}.
This is how to specify path in a typical Express.js app when the folder is ‘templates’:
    app.set(‘views’, path.join(__dirname, ‘templates’))
However, to use our index.jade, the path to index.jade will be provided as process.argv[3].  You are welcome to use your own jade file!
To tell Express.js app what template engine to use, apply this line to the Express.js configuration:
    app.set(‘view engine’, ‘jade’)
Instead of Hello World’s res.end(), the res.render() function accepts a template name and presenter data:
    res.render(‘index’, {date: new Date().toDateString()})
We use toDateString() to simply return the date in a human-readable format without the time.
——————————————————————————-
## NOTE
When creating your projects from scratch, install the jade dependency with npm.

Again, the port to use is passed by expressworks to the application as process.argv[2].

The second to last line tells us that Jade is a package and that we need to install it via the npm (Node Package Manager).  Here’s how we do that, and the ugly results we get back…

$ npm install jade
npm WARN package.json chat-example@0.0.0 No repository field.
npm WARN package.json chat-example@0.0.0 No license field.
npm WARN deprecated jade@1.11.0: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated transformers@2.1.0: Deprecated, use jstransformer
jade@1.11.0 node_modules/jade
├── commander@2.6.0
├── character-parser@1.2.1
├── void-elements@2.0.1
├── jstransformer@0.0.2 (is-promise@2.1.0, promise@6.1.0)
├── mkdirp@0.5.1 (minimist@0.0.8)
├── constantinople@3.0.2 (acorn@2.7.0)
├── with@4.0.3 (acorn@1.2.2, acorn-globals@1.0.9)
├── clean-css@3.4.13 (commander@2.8.1, source-map@0.4.4)
├── transformers@2.1.0 (promise@2.0.0, css@1.0.8, uglify-js@2.2.5)

└── uglify-js@2.6.2 (uglify-to-browserify@1.0.2, source-map@0.5.6, yargs@3.10.0)

We’ll start with the variables.  Note that they tell us that, as before, the port and filePath will be supplied in process.argv.

var express = require('express');
var path = require('path');
var port = process.argv[2];
var filePath = process.argv[3];

var app = express();

 

We also know that we are going to listen on a port, and they give us two app.set() statements as well, giving us:

var express = require('express');
var path = require('path');
var port = process.argv[2];
var filePath = process.argv[3];

var app = express();

app.set('views', path.join(__dirname, 'templates'));
app.set('view engine', 'jade');

app.listen(port);

Finally, we’re serving a page, so we need an app.get() function, inside of which will be the page we are “rendering”.  They give us this render statement, too, and so we have:

var express = require('express');
var path = require('path');
var port = process.argv[2];
var filePath = process.argv[3];

var app = express();

app.set('views', path.join(__dirname, 'templates'));
app.set('view engine', 'jade');

app.get('/', function(req, res) {
  res.render('index', {date: new Date().toDateString()})
})

app.listen(port);

 

And………..it doesn’t work.  It keeps saying “cannot get /home”.  Yeah, I hate when I can’t get home too.  Okay, so I thought this would be an easy fix.  Remembering the first lesson, I changed the ‘/’ in the app.get statement to ‘/home’ and ran it again.

Still didn’t work.

I was a little frustrated now.  What had I missed?  I read and reread the instructions.  Then I caught it – I hadn’t used the filePath variable anywhere, so the program didn’t know where to look for the Jade file.  But the question was, where do I use it?

 

Well, see that app.set() with the path.join statement?  That looked awfully familiar from the Static exercise, where we used:

app.use(express.static(process.argv[3]||path.join(__dirname, 'public')));

 

So, I added “process.argv[3]||” to my app.use() statement and, lo and behold, the program passed!  Here’s the final program, for reference:

var express = require('express');
var path = require('path');
var port = process.argv[2];
var filePath = process.argv[3];

var app = express();

app.set('views', process.argv[3]||path.join(__dirname, 'templates'));
app.set('view engine', 'jade');

app.get('/home', function(req, res) {
  res.render('index', {date: new Date().toDateString()})
})

app.listen(port);

See you next time!

Free Code Camp and Learning Express.js: Static

Moving on, here’s the next exercise in the FreeCodeCamp Express tutorial, Static.  The directions and hints:

STATIC
 Exercise 2 of 8
Apply static middleware to serve index.html file without any routes.
Your solution must listen on the port number supplied by process.argv[2].
The index.html file is provided and usable via the path supplied by process.argv[3]. However, you can use your own file with this content:
    <html>
      <head>
        <title>expressworks</title>
        <link rel=”stylesheet” type=”text/css” href=”/main.css”/>
      </head>
      <body>
        <p>I am red!</p>
      </body>
    </html>
——————————————————————————-
## HINTS
This is how you can call static middleware:
    app.use(express.static(path.join(__dirname, ‘public’)));
For this exercise expressworks will pass you the path:

    app.use(express.static(process.argv[3]||path.join(__dirname, ‘public’)));

There were a couple sneaky parts to this one.  Let’s begin with the easy stuff.

First, we require express, and we assign process.argv[2] to port and process.argv[3] to filePath.  We also assign express() to app.  We know we’re listening on a port, so we add app.listen(port).  And here is what we have so far:

var express = require('express');
var port = process.argv[2];
var filePath = process.argv[3];

var app = express();

/* do stuff here */

app.listen(port);

Our application is going to go between the last two lines where it says /* do stuff here */.  At first, I thought we needed the framework from the previous lesson:

app.get('/home', function(req, res) {

})

And I added the command for the static middleware in there:

app.get('/home', function(req, res) {

    app.use(express.static(process.argv[3]||path.join(__dirname, 'public')));</div>

})

Now, a couple things.  First, I assigned process.argv[3] to the variable filePath so I changed that.  The second thing was that path as in path.join(__dirname etc), was undefined.  A little googling showed me that path is a node package, so we need to require it.  That gave me:

var express = require('express');
var path = require('path');
var port = process.argv[2];
var filePath = process.argv[3];

app.get('/home', function(req, res) {
     app.use(express.static(filePath||path.join(__dirname, 'public')));
})

But that didn’t work.  A closer examination showed me that app.get() and app.use() are two different methods.  So I get rid of the app.get() framework and just left the app.use statement there:

express = require('express');
var path = require('path');
var port = process.argv[2];
var filePath = process.argv[3];

var app = express()</div>
     app.use(express.static(filePath||path.join(__dirname, 'public')));
app.listen(port);

 

Bazinga!  It worked!

And that’s it for today.  See you next time!

Free Code Camp and Learning Express.js: Hello World

This one was fairly simple, and Quincy explained it in the video that’s part of the assignment, so I won’t spend much time on it. Here are the directions and hints:

HELLO WORLD!
Exercise 1 of 8

Create an Express.js app that outputs “Hello World!” when somebody goes to /home.

The port number will be provided to you by expressworks as the first argument of the application, ie. process.argv[2].

——————————————————————————-

## HINTS

This is how we can create an Express.js app on port 3000, that responds with a string on ‘/’:


var express = require('express')
 var app = express()
 app.get('/', function(req, res) {
 res.end('Hello World!')
 })
 app.listen(3000)

Please use process.argv[2] instead of a fixed port number:

app.listen(process.argv[2])

One thing I did that Quincy didn’t was assign the port to a variable rather than just referencing process.argv[2]. As he noted, the slash sign in the call to app.get is for the root, and to go to home from the root it would be /home and we add the word home. That’s it for this one!


var express = require('express')
var port = process.argv[2];

var app = express()
app.get('/home', function(req, res) {
res.end('Hello World!')
})
app.listen(port);

And that’s it!  See you next time!