Code Monkey home page Code Monkey logo

js-intro-express's Introduction

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.

request

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()

js-intro-express's People

Contributors

ben-manning avatar justincastilla avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.