📓

Lecture on Integrating Morgan Logger and EJS in an Express App

Jul 2, 2024

Lecture on Integrating Morgan Logger and EJS in an Express App

Setting up Environment Variables

  • Use PORT || 8080 to set a default port if none is specified.

Installing and Using Morgan Logger

  • Package Installation: Ensure Morgan package is already installed.
  • Requiring Morgan: var logger = require('morgan');
  • Functionality: Morgan logs information about requests (e.g., time taken for a request).
  • Implementation: app.use(logger('dev')); ``
  • Output: Logs request details during development mode.

Serving HTML and JavaScript using EJS

  • Template Engine: Using EJS (Embedded JavaScript).
  • Setting View Engine: app.set('view engine', 'ejs');

Serving Static Files

  • Static Files: CSS, images, etc.
  • Express Static Middleware: app.use(Express.static('views'));
  • Directory Structure:
    • Create directory views: mkdir views
    • Inside views, create subdirectories: mkdir views/css views/images
    • Create EJS files e.g.: touch views/home.ejs

Directory Variable __dirname__

  • Purpose: To reference the current directory.
  • Syntax: app.set('views', __dirname + '/views');
  • Function: Ensures serving files from the current directory.__

Example EJS file (home.ejs)

  • Basic Structure: <!DOCTYPE html> <html> <head> <title>My First Express App</title> </head> <body> <h1>Prep for Prep</h1> <p>Live your life</p> </body> </html>

Rendering EJS in Express

  • Route to Render EJS: app.get('/', (req, res) => { res.render('home'); });

Summary

  • A simple Express app can be set up with logging, a view engine, and static file serving in just a few steps and minimal lines of code.
  • Final steps include adding CSS frameworks (e.g., Materialize, Bootstrap) for full UI design.

Full transcript