setup

install node.js

by download and install
on Mac, using homebrew

brew install node

as part of node npm will be installed. NPM is the node.js package manager used to manage dependencies

create an npm package.json file

The package.json file defines details about your project, including used libraries. To create a base package.json file we use the command

npm init

Answer the different questions. At the end you will get a file called package.json which looks like

{
  "name": "node-express",
  "version": "1.0.0",
  "description": "example project using node-express",
  "main": "app.js",
  "scripts": {
    "test": "run"
  },
  "author": "yoav abrahami",
  "license": "ISC"
}

add Express

Express is one of the most popular web frameworks for node.js. To add express to the project, we add to the package.json file a dependencies part of the form

  "dependencies": {
      "express": "~4.8.3"
  }

And we call npm install to import the library to our project. once we run the command, a new folder will be created in our project - node_modules. The node_modules folder holds our dependencies - libraries that other people have written that we can use for our application. In the node_modules folder we can find the express folder - of the library we have just installed.

Inside the node_modules/express folder we will find another node_modules folder which holds the dependencies of the express library itself.

lets create the basic express application (app.js)

Lets create a basic web application. Create a file app.js with the following code

var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.send('Hello World!');
});

var server = app.listen(3000, function () {

  var host = server.address().address;
  var port = server.address().port;

  console.log('Example app listening at http://%s:%s', host, port);

});

Lets run the application

node app.js

And test it - by opening http://localhost/3000

lets return a real HTML (app2.js)

lets change the response to a real HTML page

<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

we should replace it in the res.send('Hello World!');

Using routes (app3.js)

What if we wanna have more pages? How can we support multiple pages in our app? Express provides support using the get, post, put and delete methods (among others).

We add to our app.js -

app.get('/admin', function (req, res) {
    res.send('<html>'+
        '  <head>'+
        '    <title>Admin</title>'+
        '  </head>'+
        '  <body>'+
        '      <h1>Hay, you are on the admin page!</h1>'+
        '  </body>'+
        '</html>');
});

using templates for HTML (app4.js)

Having lots of HTML in the app.js file does not appear like a good idea. If is not the best way to manage HTML files inside JS files. Express provides us with a different mechanism called templates. We will explore the EJS template engine tutorial.

To install EJS, we add to our package.json file the dependency "ejs": "^1.0.0", and run npm install.

We have to instruct our application to use the template engine and to create views (HTML template files) to use. We change our app.js to have

app.set('view engine', 'ejs');

app.get('/', function (req, res) {
    res.render('app4/index');
});

app.get('/admin', function (req, res) {
    res.render('app4/admin');
});

add we extract the HTML to the ejs pages views/app4/index.ejs and views/app4/admin.ejs.

Add client javascript and CSS files (app5.js)

serving static files with Express is done using the express.static middleware. We add the following in app.js

app.use(express.static('public'));

And add static files in the public folder of our project. For instance, lets add app.css

h1 {
    text-align: center;
    margin-top: 30px;
    color:red
}

And lets import it from the HTML pages by adding in the header the following -

    <link rel="stylesheet" type="text/css" href="app.css"/>

Add client dependencies

Lets add angular and bootstrap to the project

In package.json, we add to the dependencies

    "dependencies": {
        "express": "~4.8.3",
        "ejs": "^1.0.0",
        "bootstrap": "~3.3.4",
        "angular": "~1.3.7",
        "angular-route": "~1.3.7",
        "angular-animate": "~1.3.7",
        "font-awesome": "~4.3.0"
    }

Lets make the templates dynamic (app6.js)

We pass data to views by adding a second parameter to render.

e.g.

app.get('/admin', function (req, res) {
    res.render('app4/admin', {
      // this is a data object passed to the template
      name: "yoav",
      numbers: [1,2,4,5]
    });
});

to write a single variable in a template we use

<p><%= name %></p>

to loop over an array

<% numbers.forEach(function(number) { %>
    <li><%= number %></li>
<% }); %>

Logging

just use console.log() to log stuff to the console.

Debugging

We run node using the --debug-brk parameter

 node --debug-brk app6.js

And open the web page of the debugger http://127.0.0.1:8080/debug?port=5858

Ajax

To support ajax, we will use jquery. First we add it to the project in package.json.

    "jquery": "~2.1.3"

Then we include it in our admin template

    <script src="jquery/dist/jquery.min.js"></script>

we need also to add support for serving static files from dependencies, from the node_modules folder. We do that using

app.use(express.static('node_modules'));

In the app.js file.

Next, we need to add a button and an event handler in the admin page e.g.

$(document).ready(function() {

    $("#clear").click(function() {
        $.post("clear", function() {
            alert("data was cleared");
        })
    });
});

And we have to implement the ajax call itself in the app.js file

app.post('/clear', function (req, res) {
    numberOfCalls = 0;
    console.log("number of calls was cleared");
});

yoavaa/node-tutorial

setup