Node & npm

Node

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

NPM

NPM is the package manager for JavaScript and the world’s largest software registry. Discover packages of reusable code — and assemble them in powerful new ways.

2,571,410,154 weekly packages downloaded

https://docs.npmjs.com/

use npm to create a project

NPM will create a package.json file for the project

$ npm init

or

$ npm init -y

RUn Node

Pass Node the name of the JS file you want to run

$ node server.js

Restarting Node Sucks

Let's have Node restart every time we save. First, we need to install a package: nodemon

$ npm install nodemon --save-dev

or 

$ npm i nodemon -D

Dependencies vs

Development dependencies

• "dependencies": these packages are required by your application in production
• "devDependencies": these packages are only needed for development and testing
• [for the most part] Don't install global packages (g)

NPM scripts

Create executable scripts though the package.json file

{
  "name": "hdc-2017",
  "version": "1.0.0",
  "description": "Workshop files and slides for the 2017 Heartland Developers Conference",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon server.js",
    "start": "node server.js"
  },
  "author": "Dustin Tauer",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^1.11.0"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "dotenv": "^4.0.0",
    "express": "^4.15.4",
    "pug": "^2.0.0-rc.3"
  }
}

Express

Express

Fast, unopinionated, minimalist web framework for Node.js

• Web Applications
• APIs
• Frameworks

http://expressjs.com/

Express routing

router.get('/contact', function(request, response, next){
    // what should we do when this page is requested?
    response.send('<p>Actual HTML') // boo!
})


// OR

const controller = require('../controllers/controller')
router.route('/products/:id').get(controller.contactPage)

// inside ../controllers/controller.js
exports.contactPage = function(request, response, next) {
    const productID = request.params.id
    
    // tell node to render a page with markup
    response.render('contact', {id: productID}) 
}

Express middleware

// Our Router is middleware
app.use('/', router)

// But you can also have other Middleware 
// intercepting all requests

app.use(function(request, response, next) {
    // Add data to the body
    request.body.someInfo = "The next page will see this"

    // Gotta call next so the next middleware can run too
    next()
})

Pug Templates

Pug Tempaltes

Formerly called Jade. A very slick way to create HTML templates. Similar to Handlebars, Mustache, or other HTML templating engines.

https://pugjs.org/api/getting-started.html

Pug - to - HTML

Shortcut syntax makes it really easy to create html templates or prototypes. Indentation is super important

.inner
    // "images" is passed into the view
    each image in images
    a(href=`image/${image.id}`).image
        img(src=`https://unsplash.it/320/?image=${image.id}`, alt=`${image.author}`)
        span.image__cover View Image

<div class="inner">
    <a href="image/123" class="image">
        <img src="https://unsplash.it/320/?image=123" alt="Alt Text" />
        <span class="image__cover">View Image</span>
    </a>
</div>

A lot more features

https://pugjs.org/api/getting-started.html

Github

Common Commands

git init

git add .    or    git add -a

git commit -m "add your commit message here"

git push origin master

git push heroku master

git checkout -b branch-name

git push origin branch-name

Heroku

Deploying to heroku

heroku login

heroku git:remote -a APP-NAME

git push heroku master

https://devcenter.heroku.com/

Download Heroku CLI: 

• https://devcenter.heroku.com/articles/heroku-cli