Express, Generator, Static Site

Express as a service serving static pages we could do

express --no-view myappStatic

   create : myappStatic/
   create : myappStatic/public/
   create : myappStatic/public/javascripts/
   create : myappStatic/public/images/
   create : myappStatic/public/stylesheets/
   create : myappStatic/public/stylesheets/style.css
   create : myappStatic/routes/
   create : myappStatic/routes/index.js
   create : myappStatic/routes/users.js
   create : myappStatic/public/index.html
   create : myappStatic/app.js
   create : myappStatic/package.json
   create : myappStatic/bin/
   create : myappStatic/bin/www

   change directory:
     $ cd myappStatic

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=myappstatic:* npm start

Giving us the skeleton infrastructure

$ tree myappStatic
myappStatic
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── index.html
│   ├── javascripts
│   └── stylesheets
│       └── style.css
└── routes
    ├── index.js
    └── users.js

6 directories, 7 files

The visible parts of the site will be presented from the image.html file because we chose a static site without view engine. Hence no view folder with content.

The package.json

{
  "name": "myappstatic",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.16.0",
    "morgan": "~1.9.0"
  }
}

Notice a couple of missing dependencies compared to the dynamic situation. In this case to test we do

$ cd myappStatic
$ npm install
npm notice created a lockfile as package-lock.json. You should commit this file.
added 52 packages from 36 contributors and audited 135 packages in 1.815s
found 0 vulnerabilities

$ DEBUG=myappstatic:* npm start

> myappstatic@0.0.0 start /home/nml/nodeProjects/nodejsexps/myappStatic
> node ./bin/www

  myappstatic:server Listening on port 3000 +0ms

The browser is then pointed at the designated port, and we see the same screen as we did in the non static situation.

Figure 20.2. The resulting Express Site
The resulting Express Site

A Look at the Application

Every Express application has an app.js module configuring the application with various external modules for use in the application. This external software is attached to the app object which is the shared.

The user of the app is the bin/www, a JavaScript file that we don't edit directly. With respect to the native Node.js we have worked with so far, app.js, and bin/www are two JavaScript files corresponding what we have called main.js, and bin/server.js before.

We have seen the file structure from the early project above.

Example 20.8. The app.js File
/*
 *  app.js is a module setting up express app 
 */
var express = require('express');
var path = require('path');                     // functions to handle paths from urls
var cookieParser = require('cookie-parser');    // cookie data to req.cookies
var logger = require('morgan');                 // formats log entries

var indexRouter = require('./routes/index');    // include routers
var usersRouter = require('./routes/users');

var app = express();                            // run the express function

app.use(logger('dev'));                         // app.use(...) sets up middleware
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);                      // pre-routing
app.use('/users', usersRouter);

module.exports = app;                           // share this setup

The bin/www is a JavaScript file in spite of the lacking.js filename suffix. It is not particularly interesting in that we do not edit it.

Now let us peep at the routing. There are two files, but for the time being, we are only interested in one of them

Example 20.9. The Main Routing File, routes/index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;