7 1 generator commands tủ tài liệu training pdf

Express.js

Generator Commands


Generator Commands

Generator Commands Comparable to Ruby on Rails and many other
web frameworks, Express.js comes with a command-line interface
(CLI) for jump-starting your development process. The CLI generates
a basic foundation for the most common cases. Unlike Rails or Sails,
Express generator doesn’t support the addition of routes/models (as
of this writing).


Generator Commands

If you followed the global installation instructions in Chapter 1, you
should be able to see the version number if you run the $ express -V
form anywhere on your machine. If you type $ express -h or $ express
--help, you get the list of available options and their usage. In this
book, we’re using the latest (as of this writing) version, 4.2.0, which is
compatible with Express.js 4.x


Generator Commands

To generate a skeleton Express.js app, we need to run a terminal
command: express [options] [dir|appname] (e.g., express cli-app), where
the options are as follows:
1.

2.
3.

4.

-e or --ejs adds EJS engine support (www.embeddedjs.com). By
default, Jade ( is used.
-H or --hogan adds hogan.js engine support
-c or --css adds style sheet support for Less (),
Stylus ( or Compass
(); by default, plain CSS is used.
-f or --force forces app generation on a non-empty directory


Generator Commands

These options are optional, of course, so you can just run express
cli-app and you’ll get an app with default settings. If the dir/appname
option is omitted, Express.js will create files using the current folder
as the base for the project. Otherwise, the application will be under
the specified directory.


Generating a Skeleton Express.js app

For the sake of experimenting, let’s run this command: $ express -e -c
less -f cli-app. The generator tool will output created files and suggest
commands to run to boot up the server
Express.js provides a robust command-line tool for spawning
boilerplates rapidly. The downside is that Express.js Generator

approach is not very configurable. For example, it’s possible to use a
Handlebars template engine (and many others not just Hogan, Jade,
JSHTML, or EJS provided by CLI) when you create apps manually, but
Express.js Generator doesn’t have this option (as of this writing).


Reviewing the Application’s Structure
Let’s briefly examine the application structure. The project’s root
folder includes two very important files, app.js and package.js, as
indicated on these lines shown in Figure 2-5: create:
cli-app/package.json and create: cli-app/ app.js. The app.js file is the
main file (as discussed in the previous chapter) and it connects all the
other pieces. The package.json file has all the needed dependencies
(express at the bare minimum). Then, we have three folders:
1.
2.
3.

public: Static assets such as images, browser JavaScript, and CSS
files
views: Template file such as *.jade, or *.ejs as in our example
routes: Request handlers abstracted (a fancy word for copied and
pasted) into separate files/ internal modules


Reviewing the Application’s Structure
The public folder has three folders of its own when project is generated
by express-generator:
●
●

●

images: For storing images
javascripts: For front-end JavaScript files
stylesheets: For CSS or, in our example, Less files (the -c less
options)

The routes folder has two files: index.js, which handles the home page (root or /), and users.js, which
handles the /users route. The folders in the public folder are not mandatory, and you can create arbitrary
folders that will be exposed on the / route of your server by the express.static() middleware. For example,
the content of public/img will be available at http://localhost:3000/img. I personally prefer img, js and css
instead of images, javascripts and stylesheets. When you rename the folders inside /public, you don’t need
to make any additional change in the Express.js configuration. You can also rename the views and public
folders themselves, but you’ll need to make some additional changes in configuration statements


App.js
Open the main web server file app.js in your favorite text editor. We’ll briefly go through the
auto-generated code and what it does before diving deeper into each one of those configurations . We
include the following module dependencies:
var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');

App.js
Next, we create the Express.js app object:
var app = express();
Then, we define configuration settings. For now, you can probably guess their meaning based on their names. That is,
where to get template files (views) along with what template engine to use (view engine). More details on these
parameters so for now let’s move along with the app.js file:
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
We next define middleware (discussed in detail in Chapter 4) to serve favicon, log events, parse the request body,
support old browsers’ HTTP methods, parse cookies, and utilize routes:
app.use(favicon()); app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded()); app.use(cookieParser());


App.js
The following middleware is responsible for compiling Less styles into CSS styled that will be
served to the browser: app.use(require('less-middleware')(path.join(__dirname, 'public')));
We pass the folder (public) as a parameter to make it scan this folder recursively for any *.less files.
The CSS file name and Less file name need to match, so if we use /css/style.css(e.g., in HTML or
Jade), we need to have /public/css/style.less. Express.js will compile Less for each request. This
statement takes care of serving static assets from the public folder:
app.use(express.static(path.join(__dirname, 'public')));
The routes are defined as a module in a separate file, so we just pass the functions’ expressions
instead of defining them right here as anonymous request handlers:
app.get('/', routes.index);
app.get('/users', user.list);


App.js

Express.js gets its environment variable from process.env.NODE_ENV, which is passed as NODE_ENV=production,
for example, either when the server is started or in the machine’s configurations. With this condition, we enable a
more explicit error handler for the development environment. The generator provides us with a 404 (Not Found)
middleware, and two 500 (Internal Server Error) error handlers, one for development (more verbose) and one for
production:
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404; next(err); });
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', { message: err.message, error: err }); }); }


App.js
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', { message: err.message, error: {} }); });
Unlike the Hello World example, this server is not booted right away, but exported:
module.exports = app; In /bin/www, the server is imported from the app.js file: #!/usr/bin/env
node var debug = require('debug')('cli-app'); var app = require('../app'); This statement sets a
custom setting with the name port to use it later for server boot-up: app.set('port',
process.env.PORT || 3000); Finally, the server is started with familiar listen():
var server = app.listen(app.get('port'), function() { debug('Express server listening on port ' +
server.address().port); });


For your reference, the following is the full
code for app.js:
var express = require('express');

var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();


For your reference, the following is the full
code for app.js:
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser()); a
pp.use(require('less-middleware')(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes); app.use('/users', users);


For your reference, the following is the full
code for app.js:
/// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');

err.status = 404; next(err); });
/// error handlers // development error handler // will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', { message: err.message, error: err }); });
}


For your reference, the following is the full
code for app.js:
// production error handler // no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', { message: err.message, error: {} }); });
module.exports = app;
If you navigate ($ cd cli-app) into the project folder and run $ npm install, you should
observe the installation of NPM modules based on the package.json entry. After the
installations are finished, run npm start or $ ./bin/www. When you navigate to
http://localhost:3000 in your browser


Express.js generator is not a very powerful tool, because it
doesn’t do much after the boilerplate creation. However, it
provides developers with boilerplates/skeletons that can be
used for rapid prototyping. In addition, beginners can learn
about recommended structure and code organization, as well
as learn how to include some middleware such as Less and
express.static(). The next section summarizes some common
patterns and conventions regarding the folder structure of

Express.js apps.