Express Generator.pdf
- 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.