ExpressJS Generator

1. EXPRESS JS GENERATOR
Prepared By:
Mrs. Bareen Shaikh
Assistant Professor
Computer Science
MIT ACSC Alandi(D)
Pune

2. ExpressJS Generator
▪ What should be the ideal folder structure?
▪ Where should be the views placed?
▪ Where should the public assets be?
▪ How to link stylesheets?
▪ How should we create routes?
▪ How and where should the modules be?
▪ To create an application skeleton for above
use the application generator tool express-
generator.

3. ExpressJS Generator
▪ To create an application skeleton use the
application generator tool
 npm install express-generator -g
▪ This installs the Express generator as a global
package allowing you to run the express command in
your terminal
 express
Note if getting a error of.ps file then give following command
 Set-ExecutionPolicy RemoteSigned
▪ Create a application by application name as follows:
 express app1
▪ This creates a new Express project called app1, which is then
placed inside of the app1 directory.

4. Application Structure
▪ The generated Express application starts off with four
folders as follows:
▪ bin
 The bin folder contains the executable file that starts your app.
 It starts the server (on port 3000, if no alternative is supplied) and
sets up some basic error handling.
 npm start(start the new server)

5. Application Structure
▪ public
 everything in this folder is accessible to people
connecting to your application.
 In this folder, put JavaScript, CSS, images, and
other assets that will need to load your website.
▪ Routes
 This folder router files.
 It creates two files, index.js and users.js, which
serve as examples of how to separate out your
application’s route configuration.

6. Application Structure
▪ views
 The views folder is where you have the files used by your
templating engine.
 The generator will configure Express to look in here for a
matching view when you call the render method.
▪ Express is capable of handling server-side template
engines.
▪ Template engines allow us to add data to a view and
generate HTML dynamically.
▪ Pug is the new name for an old thing. It’s Jade 2.0.
▪ Due to a trademark issue, the name was changed from
Jade to Pug when the project released version 2 in 2016.
 npm install pug --save

7. Note on Template Engine
▪ A template engine enables to use static template
files in application.
▪ At runtime, the template engine replaces
variables in a template file with actual values, and
transforms the template into an HTML file sent to
the client.
▪ This approach makes it easier to design an HTML
page.
▪ Some popular template engines that work with
Express are Pug, Mustache, and EJS
▪ The Express application generator uses Jade as its
default, but it also supports several others.

8. Note on Template Engine
▪ If want to use latest updates to the template
engine then replace Jade with Pug in your app.
▪ Following application setting properties are to
be set in app.js in the default app created by
the generator:
▪ app.set('views', './views')
 This defaults to the views directory in the
application root directory.
▪ view engine, the template engine to use
engine:
 app.set('view engine', 'pug').

9. Note on Template Engine
▪ Create a Pug template file named index.pug in
the views directory with the following content:
 html
 head
 title= title body
 h1= message
▪ Then create a route to render the index.pug file
 app.get('/', function (req, res) {
res.render('index', { title: 'Hey', message: 'Hello
there!' })
})

10. app.js
▪ This file sets up your Express application and
glues all of the different parts together.
 var createError = require('http-errors');
 var express = require('express');
 var path = require('path');
 var cookieParser = require('cookie-parser');
 var logger = require('morgan');
▪ The above files are require to run the express
generator application by using the
module.export concept of NodeJS

11. app.js
 var indexRouter = require('./routes/index');
 var usersRouter = require('./routes/users');
▪ The above lines of code require the different
route files that the Express generator sets up
by default: routes and users.
▪ var app = express() : create a new app by
calling express().
▪ The app variable contains all of the settings
and routes of application.

12. app.js
▪ Templating engine is set up for rendering views.
This is where you’d change the path to your view
files if necessary.
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'jade');
▪ Express being configured to use middleware.The
generator installs several common pieces of
middleware that you’re likely to use in a web
application:
 app.use(logger('dev')); app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, 'public')));

13. app.js
▪ logger:When you run app all the routes that are
requested are logged to the console.
▪ express.json Require for parsing the body of
incoming HTTP requests, when JSON is sent via a
POST request and it puts this data in request.body.
▪ express.urlencoded: parses query string data in the
URL (e.g. /profile?id=5) and puts this in request.query.
▪ cookieParser.This takes all the cookies the client
sends and puts them in request.cookies. It also allows
to modify them before sending them back to the
client, by changing response.cookies.
▪ express.static.This middleware serves static assets
from public folder. If want to rename or move the
public folder,can change the path here.

14. app.js
▪ Route files that were required are attached to
our app.
 app.use('/', indexRouter);
 app.use('/users', usersRouter);
▪ Additional routes can be added here.
▪ Code after the above line is used for error
handling.
▪ Won’t have to modify this code unless you
want to change the way Express handles
errors.