CSCI 421 - Lecture 2

Instructor's Class Notes

1. Part 1:1 - Overview of MEAN
• M is for MongoDB - That database repository for the stack.
• MongoDB is not a relational database. It is a document database.
• Stores documents as BSON - Binary JSON (JavaScript Serialized Object Notation).
• Example
  

  {
    "firstName" : "Simon",
    "lastName" : "Holmes",
    _id : ObjectId("52279effc62ca8b0c1000007")
  }                    
                      

• Note that the _id field is assigned by MongoDB when a document is created.
• MongoDB supports secondary indexing and rich queries (unlike other document database).
• E is for Express - The website and web application framework for Node.js that accelerates development of websites.
• Eases server setup by providing a common directory structure and other standards for configure and setup of the Node.js web server.
• Routes - Routing URL requests to code that generates responses is an intrinsic part of Express.
• Views - Using template engines (like Handlebars, etc), AngularJS allows for Views that are used to generate the responses to requests.
• Session support that allows stateless Node.JS to deliver a stateful, session-based user experience.
• A is for AngularJS - The front-end framework allowing for working with data directly within the front-end.
• The traditional way of doing integrating backend data is to have all of the data processing and application logic on the server, which then passes HTML out to the browser.
• AngularJS provides a conduit for the backend database to send data directly to the front-end and provides the framework for working with that data browser-side and turning that data into HTML in an extensible manner.
• AngularJS uses two-way data binding to bind a database and template on the server to a view on the front-end.
• Designed specifically for single-page applications (SPA) where everything is within a single page with no page reloads for different functionality and user interactions.
• N is for Node.js - The web server platform.
• Node.js is a software platform that allows you to create your own web server and build web applications on top of it.
• It is a single-threaded web server especially suitable for web applications and is scalable.
• Starting and stopping a web application is done by running and terminating the node command.

 

2. Part 1:2 - Designing a MEAN Stack Architecture
• A Common Architecture
  
• Typical Express Application Footprint
  
• app.js - This is the JavaScript file for the application. The heart of the application code is here. This code must be modified as needed for your application in order to define routes, etc.
  

  
  var createError = require('http-errors');
  var express = require('express');
  var path = require('path');
  var cookieParser = require('cookie-parser');
  var logger = require('morgan');
  
  var indexRouter = require('./routes/index');
  var usersRouter = require('./routes/users');
  
  var app = express();
  
  // sets port 8080 to default or unless otherwise specified in the environment
  app.set('port', process.env.PORT || 8080);
  
  // view engine setup
  app.set('views', path.join(__dirname, 'views'));
  app.set('view engine', 'ejs');
  
  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')));
  
  app.use('/', indexRouter);
  app.use('/users', usersRouter);
  
  // catch 404 and forward to error handler
  app.use(function(req, res, next) {
    next(createError(404));
  });
  
  // error handler
  app.use(function(err, req, res, next) {
    // set locals, only providing error in development
    res.locals.message = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};
  
    // render the error page
    res.status(err.status || 500);
    res.render('error');
  });                    
                      

• routes - Javascript files, one per route, for routing requests for views (pages) to the view code.

  index.js router for Home Page:

  
  var express = require('express');
  var router = express.Router();
  
  /* GET home page. */
  router.get('/', function(req, res, next) {
    res.render('index', { title: 'Home Page' });
  });
  
  module.exports = router;                    
                      

• views - The view code, which is largely HTML in nature, is based on the particular view template engine of your choosing.
  

  index.ejs - EJS version of Home Page view:

  
  <!DOCTYPE html>
  <html>
    <head>
      <title><%= title %></title>
      <link rel='stylesheet' href='/stylesheets/style.css' />
    </head>
    <body>
      <h1><%= title %></h1>
      <p>Welcome to my <%= title %>'.</p>
    </body>
  </html>                    
                      

• Template Engines - More on template engines here. Common template engines are Pug, Mustache, and EJS.
• express-generator - A very good code generator that will generate skeleton Express web application code for you is available here.

 

• Running Your Applictation (from app's directory)
• Interactively:
  

  >node ./bin/www
                      

  or
  

  >npm start
                      

• Specifying PORT to use:
  

  >PORT=3000 node ./bin/www
                      

  or
  

  >PORT=3000 npm start
                      

• Running in the Background (stays running when disconnected):
  

  >nohup sudo npm start &
                      

  or
  

  >nohup sudo PORT=3000 npm start &
                      

• To Find Background Process (look for node process and get process ID, aka PID):
  

  >ps aux | grep node
                      

• To kill Background Process (look for node process):
  

  >sudo kill -9 <PID>                    
                      

 

3. Part 2:3 - Creating and Setting Up a MEAN Project
• Tools of the Trade - Express, Node, npm
• Express, node and npm are fundamental technologies. Make sure they are installed as follows:
  

  
  >node --version
  >npm --version
  >express --version
                      

• Express is the fundamental, starting technology for building any website or web application, you start there.
• Express requies Node to run and therefore your Express application is just like any other node application and uses maany of the fundamental features of node.
• Every Express application has its own directory, within that directory you will find package.json.
• package.json - Describes the node application, its version and its dependencies.
  

  
  {
    "name": "application-name",
    "version": "0.0.0",
    "private": true,
    "scripts": {
      "start": "node ./bin/www"
    },
    "dependencies": {
      "express": "~4.9.0",
      "body-parser": "~1.8.1",
      "cookie-parser": "~1.3.3",
      "morgan": "~1.3.0",
      "serve-favicon": "~2.1.3",
      "debug": "~2.0.0",
      "jade": "~1.6.0"
  } }    
                      

• Creating an Express project
• Express Generator - Easiest way to create the skeleton (starting point) for an Express application is to use the Express generator, found here.
• Install the express generator (once) by executing the following:
  

  
  >npm install express-generator -g                    
                      

• Once installed, using the generator to create a new app, called myapp that uses the EJS view engine is as simple as executing the following:
  

  
  >express --view=ejs myapp                   
                      

• Different View Engines - There are several different View (aka Template) Engines to choose from. Note that the default view engine for Express used to be Jade, but that has been replaced by Pug. EJS is a commonly used engine because its templates most resemeble HTML.
• Using nodemon - You can use nodemo to run your Express app and automatically restart it when you make changes to it.
• To install nodemon globally execute the following
  

  
  >npm install -g nodemon                
                  

• IMPORTANT HINT: If you ever get "npm ERR!" error messages when running an npm command, try re-running the command by prefacing it with sudo
• To run your Express program in a restartable fashion execute the following within your app directory:
  

  
  >nodemon