Node

• Node is a JavaScript engine that you can run from the command line.
  • Can install from https://nodejs.org
• nvm is “node version manager”. Helpful if you work on projects that are picky about their node version.
  • Probably not necessary unless you work with several different, unrelated projects using Node.
  • Can install from https://github.com/nvm-sh/nvm
• Show a simple ‘hello world’ app in a clean directory.

NPM

• npm is the Node Package Manager. It makes it easy to install libraries for your use.
• If you are downloading/cloning an existing project that has a package.json file, run npm install.
• If you are building a new project from scratch, you must begin with npm init. (Accept the defaults for now.)
  • This creates a packages.json file describing the app and its dependencies.
• At a high level, there are two types of packages:
  1. Libraries containing code to import into your own JS projects.
  2. Command-line tools written in JavaScript.
• Use npm install foo to install packages.
  • By default, packages are installed locally to your node_modules directory.
  • Adding the --save or -save-dev flag will update the dependency list in node_modules
    • --save is for packages used in production. --save-dev is for things like testing frameworks and linters that are only used in development.
  • Adding the -g flag will install the module globally (i.e., make it accessible to all your projects.)
  • I would not use -g for libraries: It could lead to version conflicts.
  • You may consider using -g to install command-line scripts
• If you choose to install a command-line script locally, (without the -g flag) you can access it either
  • through node_modules/.bin (e.g., ./node_modules/.bin/ejs-cli), or
  • using npx (e.g., npx ejs-cli)

Templating

• Stands for Embedded JavaScript.
• Embed JavaScript into HTML.
• Write HTML, but use <% %> to insert javascript.
• Can be run from the command line.
  • Run https://github.com/kurmasz-SampleCode/CIS371-SampleCode/blob/master/Templating/colorDemo.ejs

• <%= %> vs <% > vs <%- >

• Most languages have a similar library.
  • Ruby (erb)
  • Python (jinja)
• There is a second style of template that some developers like better
• This style uses indenting instead of open/close tags.
• The argument is that it is easier to read/write once you get used to it.
  • I can see their point. I used this style when I was at Atomic Object; but, now that I no longer do web dev daily, I like the other style better.
• JavaScript (pug)
• ruby (haml)

Express

• Begin with a quick overview of asynchronous programming
• Express is a web server written in Javascript.
  • Download from https://expressjs.com/
• Basic idea: You instantiate a server object, then provide callbacks that determine the response for each path on your site.
  • See this file for a very simple example.
  • See this file for more common implementation.
• Show simple_sendHTML.js
• Add sending of a static file.
• Add app.use(express.static('images'))
  • Notice that you just say http://localhost:3000/buzz2.jpeg, URL does not include images
• Order of routes in the code matters. First route to match gets executed.
  • Create a route named buzz2.jpeg
  • Put it before the express.static.
  • Put it after the express.static.
• Look at index.js
• Show how to render .ejs
• Show how query string is parsed.
• Put the two together.
• Routes can be regular expressions.
  • Look at Wordle starter code.