Intro to Express

Objectives
Explain the request response cycle
Use npm (node package manager) to initialize a node project
Write a local Node.js web server with Express
Serve JSON with Express
Serve static assets with Express

Motivation (Why?)

Express is a cutting-edge, unopinionated, server-side JavaScript framework that runs on a Node.js server. It is a very, very popular and trending framework with a bevy of modules you can add to it.

What is Node?

• Node.js is a webserver that operates on the V8 Google Chrome JavaScript runtime, allowing you to write server-side code in JavaScript.
• Node.js provides the ability to handle requests and issue responses.
• It is fast.
• It is fast largely because it is asynchronous, meaning code can run in parallel without "blocking" the call stack (the list of other concurrent commands).

NPM and NPM Init

• NPM stands for Node Package Manager, and is a tool that allows us to easily download community-built Node packages.
• Initialize new Node project with NPM: npm init.
• Install NPM packages: npm install --save express.
• NPM works with package.json, which is a list of project information and dependencies that can be installed on other computers and servers.

What is Node Good For?

• Node really shines when it comes to heavy input-output type operations.
• Realtime services like chat applications or conferencing platforms benefit from using Node.
• APIs are also input/output heavy, and they also tend to work with JavaScript out of the box (think JSON). What better platform than Node?

Express JS

• Express is a framework built on top of Node.js that makes development of web servers more intuitive and quicker.
• Express allows us to easily set up routes that will trigger actions such as rendering pages or returning JSON.

Hello World in Express

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

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

var server = app.listen(3000);

Request Response Cycle

Remember that the interwebs is many clients querying many servers. We've done a lot with clients and APIs, and now we want to write the server side code that handles the request and then responds with some data.

Express file tree

├── server.js  // your server code
├── package.json    // lists dependencies; changed by npm install --save somePackage
├── public  // i.e. client-side
│   ├── images  // images to serve to client
│   ├── scripts
│       └── app.js   // client-side javascript file
│   └── styles
│       └── style.css
├── vendor // optional 2nd public dir for jQuery & bootstrap if we choose not to use CDNs
├── views  // html files that we'll serve
│   └── index.html
└── node_modules  // don't edit files in here!
    ├── express // etc

We should also add node_modules to a .gitignore file so it is not checked into git. Future developers can just run npm install to get the packages listed in package.json

In Express

Let's look at a basic get method in an express app.

// server.js
  var taquerias = [
    { name: "La Taqueria" },
    { name: "El Farolito" },
    { name: "Taqueria Cancun" }
  ]

  app.get('/api/taquerias', function (req, res) {
    res.json(taquerias);
  });

Note that the app object has a method called .get() which takes two arguments: a url and a callback function. The callback takes two arguments: req and res. These stand for "Request" and "Response" from the request response cycle. We'll be console logging these objects in the exercises.

Game Plan

Today's exercises are set up a bit like a tutorial to walk you through:

• creating a new project with Node and Express
• creating routes for clients to make requests to your server
• storing data on the server
• responding to GET requests with simple strings (res.send), or JSON data (res.json)
• serving static files (images, css...)

Docs, Resources, Further Reading

1. Starting an Express Project
2. Express Hello World
3. Express Static Files
4. Express res.render()