Welcome! Please download the course files and make sure you have Node.js installed. Bonus points if you still Git too.
WIFI username: Woodmen password: Life
Course Files:
Or
Download and Install Nodejs
Slides: https://slides.com/dtauer/hdc-2017
I'm Dustin Tauer
dustin@easelsolutions.com
@dtauer
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 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
NPM will create a package.json file for the project
$ npm init
or
$ npm init -y
Pass Node the name of the JS file you want to run
$ node server.js
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
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"
}
}
Fast, unopinionated, minimalist web framework for Node.js
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})
}
// 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()
})
Formerly called Jade. A very slick way to create HTML templates. Similar to Handlebars, Mustache, or other HTML templating engines.
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>
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 login
heroku git:remote -a APP-NAME
git push heroku master