Introduction to MEAN (JavaScript Full Stack Development) Tom Perkins APPDEV SIG NTPCUG

Manning Books online … https://www.manning.com/books/getting-mean-with-mongo- express-angular-and-node Good JavaScript overview (Appendix D) – free download

MEAN stack components Node.js – web server/platform Web server – don’t need IIS or Apache Runs JavaScript on your computer Supported on many host environments (Heroku used in book) Also Azure, GoDaddy, Nodejitsu, OpenShift Express.js – web application framework Listens to incoming requests and returns relevant responses Sets up directory structure with scaffolding Routing – directs incoming URL to certain piece of code Several templating engines to help build Views Uses sessions to identify individual users through multiple requests and pages

MEAN stack components MongoDB – the database Document database, not relational Has rows, not columns Row is a document; it defines and contains the data itself Stores documents as BSON (Binary JSON) See Appendix D for JSON topic Provides indexing and querying capabilities Mongoose – provides data structuring, connections, and validation capabilities AngularJS: Front-end framework Moves some or all processing logic from the server to the browser

Supporting Cast … Bootstrap – user interface GIT – for source control Heroku – hosting Sublime Text – editing tool VSCode NotePad++

Example application (Loc8r) List nearby places with WIFI where people can work Display Facilities Opening times Rating Location map Users can Login Submit ratings and reviews

Step 1: Build a static site

Step 1: Build a static site Consists of a number of hard-coded HTML screens Objectives: Figure out the layouts Try out the user flow to see if it makes sense We shoot for a working mockup of the main screens

This presentation’s objectives … The package.json file .json files overview npm tutorial -- https://www.sitepoint.com/beginners-guide-node- package-manager/ using npm Versions Installing Node dependencies Adding packages Updating packages to a later version Installing Node Create a project folder Create an Express project

package.json file package.json file is required in the root folder for all node apps Identifies packages your project depends on (dependencies) You can specify versions of a package that you want Also can handle other metadata: Project description Version of the project License information Configuration data

.json files JSON: JavaScript Object Notation Used to store and exchange data Alternative to XML (easier to use) Text-only format JavaScript functions can convert JSON data into native JavaScript objects JSON syntax is derived from JavaScript object notation syntax: Data is in name/value pairs Data is separated by commas Curly braces hold objects Square brackets hold arrays JSON file example {"employees":[     {"firstName":"John", "lastName":"Doe"},     {"firstName":"Anna", "lastName":"Smith"},     {"firstName":"Peter", "lastName":"Jones"} ]}

Sample package.json file { "name": "exp2014", "version": "0.0.0", "private": true, "scripts": { "start": "node ./bin/www" }, "dependencies": { "body-parser": "~1.15.1", "cookie-parser": "~1.4.3", "debug": "~2.2.0", "express": "~4.13.4", "jade": "~1.11.0", "morgan": "~1.7.0", "serve-favicon": "~2.3.0" } Package metadata Package dependencies

Dependency file version syntax "express": "~4.13.4", Major version (4) Minor verson (13) Patch version (4) ~ use the latest patch version available Patches – minor fixes that won’t have any impact on the application

Updating with npm Run from the command prompt, in the project folder ($ == >) $ npm install Install all dependencies listed in the package.json file Packages are placed in a special folder, node_packages Each package has its own subfolder $ npm install – save package-name To add a package to an exisiting project Package will be added to list of dependencies in the package.json file

Node.js

Simple Answer JavaScript normally runs on your browser It can only access your webpage Node.js allows JavaScript to run on your computer Uses Google Chrome V8 (?) engine Runs on your machine You can access files on your computer Can’t normally do this with JavaScript Listen to network traffic on your computer Access databases directly

Two categories of what people are doing with Node Building utilities for use on your machine Grunt, Gulp, Yoeman, etc. Listen for file system changes, does a file reload Build a web server, a web application with Node Instead of PHP, Ruby on Rails, Python, etc Use Express framework for Node.js

Modules How you load one file into another in module 1 Var m2 = require(‘./module2’); Looking for a file in the same directory Assumes .js is added Module 2 must export anything that is passed to module1 In module2: Var a = 1; module.exports.a = a; (will be exported to module1)

Node Package Manager (npm) Comes with node npm install underscore Creates a node_modules/ folder, Installs underscore package in it In module1, you can say var _ = require(‘underscore’); In module1, console.log(_); will display the whole “underscore” library NPM is an easy way of installing things

NPM – saving things in a package Save 20 dependencies you have npm init (creates a package.json file) Name , version, description, dependencies, etc npm install backbone –s will save the backbone dependency in the package.json file npm install will now load all the dependencies listed in the project.json file Thousands of packages available

Web server http package comes built into node, doesn’t need to be installed In module1 Var http = require(‘http’); var server = http.createServer(function(request,response){ console.log(‘got a request!’); response.write(‘hi’); response.end(); }; returns a server server.listen(3000); Run: node module1 sends hi back every time

Create a folder on your machine for the project My folder: C:\

Installing Node.js nodejs.org This will automatically install npm. Verify installation by checking version: $ node –version $ npm --version

Installing Express.js (Express generator) $ npm install –g express-generator Verify installation: $ express –version

Create the Express project Navigate to your folder (cd c:\LearnExpress\loc8r) $ express (create the new project) $ npm install (install the dependencies) $ npm start (browse to localhost:3000)

C:\LearnExpress\loc8r>express create : . create : ./package.json create : ./app.js create : ./public/javascripts create : ./public create : ./public/stylesheets create : ./public/stylesheets/style.css create : ./public/images create : ./routes create : ./routes/index.js create : ./routes/users.js create : ./views create : ./views/index.jade create : ./views/layout.jade create : ./views/error.jade create : ./bin create : ./bin/www install dependencies: > cd . && npm install run the app: > SET DEBUG=loc8r:* & npm start

The root directory: C:\LearnExpress\loc8r>dir Volume in drive C is Windows Volume Serial Number is 22BE-CA9F Directory of C:\LearnExpress\loc8r 08/18/2016 11:33 PM <DIR> . 08/18/2016 11:33 PM <DIR> .. 08/18/2016 10:32 PM 1,442 app.js 08/18/2016 10:32 PM <DIR> bin 08/18/2016 11:33 PM <DIR> node_modules 08/18/2016 10:32 PM 325 package.json 08/18/2016 10:32 PM <DIR> public 08/18/2016 10:32 PM <DIR> routes 08/18/2016 10:32 PM <DIR> views 2 File(s) 1,767 bytes 7 Dir(s) 406,719,074,304 bytes free

The app.js module Demo – Sublime Text view of app.js Middleware Lines that start with app.use all requests go through these lines, one at a time At end, app logic returns a response Middleware operations are handled asynchronously Example: app.use(express.cookieParser) Parses out cookie information Attaches cookie data to request so that it is easily referenced in the controller code

Restarting the application Since a Node app compiler before running, you must stop and restart it if you make changes. Manual restart Ctrl-C Then npm start Automatic services – restart when changes are detected $ npm install –g nodemon Start app with $ nodemon