Licence for this work

This work is produced by Mats Loock for the course Server-based Web Programming (1DV023) at Linnaeus University.

All content in this work excluding photographs, icons, picture of course literature and Linnaeus University logotype and symbol, is licensed under a
Creative Commons Attribution 4.0 International License.

You are free to

• copy and redistribute the material in any medium or format
• spread the whole or parts of the content
• show the whole or parts of the content publicly and digital
• convert the content to another format
• change the content

If you change the content do not use the photographs, icons, picture of the course literature or Linnaeus University logotype and symbol in your new work!

At all times you must give credit to: ”Linnaeus university – Server-based Web Programming (1DV023)” with the link https://coursepress.lnu.se/kurs/serverbaserad-webbprogrammering/ and to the Creative Common-license above.

What is Web Application Architecture?

• When applications grows we need structure.
• Architecture can help us with structuring, physical and logical.
• At least two parts, the server and the client.
  • The code which lives on the server and responds to HTTP requests.
  • The code which lives in the browser and responds to user actions.
• It's up to the developer to decide what the code on the server and the client should do.
  • Server-side code.
    • Ruby, C#, Python, PHP, Java, JavaScript
    • Never seen by the client, persistent data, creates dynamic content, etc.
  • Client-side code.
    • HTML, CSS, JavaScript

Minimal "hello, world"

const http = require('http')

const server = http.createServer((req, res) => {
  res.setHeader('Content-Type', 'text/plain')
  res.end('hello, world\n')
})

server.listen(8000, () => console.log('Server running at http://localhost:8000/'))

• The build-in http module allows Node to transfer data over HTTP.
• Event-driven programing.
  • The event being handled is an HTTP request.
• The createServer method takes a function as an argument; that function will be invoked every time an HTTP request is made.
  • Creates an HTTP server that listens to server ports and gives a response back to the client.

Minimal website with simple routing (1 of 2)

const http = require('http')

http.createServer((req, res) => {
  const path = req.url.replace(/\/?(?:\?.*)?$/, '').toLowerCase()

  switch (path) {
    case '':
      res.setHeader('Content-Type', 'text/plain')
      res.end('Homepage')
      break

    case '/about':
      res.setHeader('Content-Type', 'text/plain')
      res.end('About')
      break

    default:
      res.setHeader('Content-Type', 'text/plain')
      res.statusCode = 404
      res.end('Not Found')
      break
  }
}).listen(8000, () => console.log('Server running at http://localhost:8000/'))

Minimal website with simple routing (2 of 2)

• Routing is the mechanism for serving the client with the requested content.
  • It's possible to browse to http://localhost:8000 and http://localhost:8000/about (query strings will be ignored). Any other URL will get a response with status code 404.
• The complexity increases rapidly. We need something that makes it some what easier.

Stack

• A functional web application depends on multiple pieces of technology.
• Acronyms describe "stacks", development environments.
  • LAMP, WAMP, …
• Full stack JavaScript Development
  • Both client- and server-side should be written in JavaScript.
  • MEAN (MongoDB, Express, Angular, Node.js), MERN, ...

Full stack JavaScript Development

During the course we will use...

• HTML, CSS and vanilla JavaScript on the client.
• Node.js and Express (with Handlebars as the view engine) on the server.
• MongoDB as document database.

JavaScript Backend Frameworks

• Express, https://expressjs.com/
• Meteor, https://www.meteor.com/
• Sails (built on Express), https://sailsjs.com/
• Feathers (built on Express), https://feathersjs.com/
• Fastify, https://www.fastify.io
• ...

What is Express?

• "A minimal and flexible Node.js web application framework."
  • Node.js has a lot of common with other web servers, but most interesting is how it differs.
    • Easy to setup and configure.
    • Node.js is single threaded.
    • Platform independent.
• Inspired by Sinatra, a web application framework in Ruby.
• Intertwined with Connect, a pluggable Node module that can handle web requests (a.k.a. "middleware").

Minimal Express website

const express = require('express')

const app = express()

app.get('/', (req, res) => res.send('Homepage'))
app.get('/about', (req, res) => res.send('About'))

app.listen(8000, () => console.log('Server running at http://localhost:8000/'))

• The application starts a server and listens on port 8000 for connections.
• The framework will handle the request.
  • The application responds with "Homepage" for requests to the root URL (/).
  • The application responds with "About" for requests to the about URL (/about).
  • For any other request, it will respond with a 404 Not Found.

"Mockup" of your first Express Application

1. The user requests a suitable URL...
2. ...enters a name and posts the form.
3. The server responds with a welcome message.

Overview of your first Express Application

The final directory structure

• app.js is the applications entry point.
• Routes are stored in separate modules under the routes/ directory.
• Controllers are stored under the controllers/ directory.
• View templates are stored under the views/ directory.
• Static files are stored under the public/ directory.
• ...and there are several other opinions.

The dependencies

• express
  • Web framework for Node.js.
• express-hbs
  • Express handlebars template engine.
• moment
  • Manage dates.
• morgan
  • HTTP request logger.
• nodemon
  • Automatically restarts the application when file changes.
    • nodemonConfig

The entry point

• Middleware functions are functions that have access to the request object (req), the response object (res), and the next middleware function in the application’s request-response cycle.
  • Application-level: app.use() and app.METHOD(), (req, res, next)).
  • Router-level: same as application-level (use express.Router()).
  • Error-handling: an error-handling middleware function has four parameters, (err, req, res, next)).
  • Built-in: express.static, express.urlencoded
  • Third-party: Add functionality.

The routing

• The router.get() and router.post() methods are two routing functions in Express.
• You provide a function to be called for a request matching the method and specified path.
• You use the router object as an argument to app.use().
  • app.use('/', require('./routes/homeRouter')) http://localhost:8000/
  • app.use('/home', require('./routes/homeRouter')) http://localhost:8000/home

The controller

• Controller functions...
  • ...get the requested data (if any), ...
  • ...render an HTML page using a template engine, and...
  • ...send the HTML to the client.
• res.render(view [, locals]) renders a view and sends the HTML string to the client.
  • view, the path of the view file to render.
  • locals (optional), an object that contains data (viewData) to pass from the controller to the view.

The view

• A template engine enables you to transform a template to HTML sent to the client.
• Express supports several template engines, such as Pug, Mustache, and EJS.
• We will take a closer look at Express handlebars template engine (express-hbs) with multiple layouts, blocks and partials.
  • Find out more about handlebars expressions at https://handlebarsjs.com/.

Installation and configuration

• Install express.hbs.
  • npm install express-hbs
• Configure the template engine to use .hbs for extensions and find layouts in views/layouts.
• Setting the view engine as handlebars and the root directory for the views.
  

The template engine

What's next?

• Persistent data
  • MongoDB - document database
    • Mongoose - object modeling tool
  • Models
  • Create, Read, Update, Delete (CRUD) - four basic functions of persistent storage
• Session
  • Post/Redirect/Get (PRG) - web development design pattern
  • Flash messages