Learn and Understand Node.js

Node.js is an interesting new phenomenon to hit the development scene. Companies like Netflix, Walmart, Sams Club, PayPal, Medium, LinkedIn and Uber are just a few of the companies that are using it in production. Node.js is a server technology used to build and run web applications.

In this class, we’ll learn the basics of working with Node.js. You will build an application using Node.js. During the class you will add new features to your application, including connecting it to a database.

These are slides from a 3 hour workshop that I taught for Women Who Code Atlanta.

Transcript

1. NODE.JS LEARN AND UNDERSTAND
2. ▸ How to install Node.js ▸ Node and npm ▸ Middleware ▸ Templating Engines ▸ Routing WHAT YOU WILL LEARN 2
3. ▸ www.github.com/ratracegrad/werise-intro-to-node GET THE CODE 3
4. ▸ Server-side JavaScript ▸ Open Source runtime environment ▸ Similar to .Net in that it is a wrapper around your code ▸ Cross platform ▸ www.nodejs.org WHAT IS NODE.JS? 4
5. ▸ Web development framework for Node ▸ Lightweight, un-opinionated and minimalist web framework ▸ An npm package ▸ We will build our website by writing code using the Express objects ▸ www.expressjs.com WHAT IS EXPRESS.JS? 5
6. ▸ Sublime Text ▸ Webstorm ▸ Atom ▸ Brackets ▸ Vim ▸ Visual Studio Code EDITORS 6
7. ▸ https://nodejs.org ▸ Click the big green button to download ▸ Double click downloaded file to install ▸ Validate it is installed by entering ‘node —version’ in terminal ▸ Validate npm is installed by entering npm —version in terminal INSTALLING NODE AND NPM 7
8. ▸ Open up the example-01 folder ▸ open app.js ▸ var who = ‘jennifer’;
 console.log(‘hello’, who); ▸ node app.js GETTING STARTED 8 example-01
9. ▸ Application is a single JavaScript file that is executed ▸ That one file can pull stuff from other files or packages that are installed using npm ▸ To gain access to other files or modules you would use the command ‘require’ EVERY APPLICATION IS A SINGLE FILE 9
10. ▸ Copy code from nodejs.org to create an example of a web sever ▸ Open up example-02 folder ▸ Open app.js ▸ node app.js CREATE WEB SERVER 10 example_02
11. ▸ Express.js is a web development framework ▸ de-facto standard for the majority of Node.js applications out there today ▸ Removes the complexity of having to define everything for a web application with Node.js WHY USE EXPRESS? 11
12. ▸ www.expressjs.com EXPRESS DOCUMENTATION 12
13. ▸ npm is the node package manager ▸ When we install a package it is called a dependency ▸ npm will take care of versions in our application ▸ packages installed via npm are listed in the package.json file WHAT IS NPM? 13
14. ▸ Open example-03 folder ▸ npm init
 answer questions
 creates a package.json file ▸ We are going to use express.js so we need to install it
 npm install express —save ▸ This adds the package to our package.json file ▸ In app.js add
 var express = require(‘express’);
 var app = express();
 app.listen(3000, function() { console.log(‘server running’); });
 DOCUMENTATION app.listen ▸ from terminal run node app CREATING OUR FIRST APP USING EXPRESS 14 example_03
15. ▸ Has entry for every prompt given with npm init ▸ dependencies are packages that you have installed to run your application ▸ these packages are installed in the node_modules folder ▸ When somebody downloads your code, they can just run npm install to install all required packages for your code and to make it run EXPLORE PACKAGE.JSON 15
16. ▸ https://docs.npmjs.com/files/package.json NPM DOCUMENTATION ON PACKAGE.JSON 16
17. ▸ npm uses symantic versioning
 major.minor.patch ▸ npm install when you get somebody’s code ▸ ^ - caret symbol will install anything that matches the major version ▸ ~ - tilde symbol will install anything that matches the minor version ▸ No symbol will install that exact version NPM VERSIONING 17
18. ▸ If you make a change to your code, you must stop your server and start your server to see the changes to the code ▸ node does not reflect changes to your code ▸ nodemon does ▸ npm install -g nodemon ▸ The -g flag is global which means it is available to all your applications INSTALL NODEMON 18
19. ▸ nodemon app.js ▸ var port = 3000; ▸ app.listen(port, function() {
 console.log(‘Server running on port ‘ + port);
 }); ▸ nodemon automatically reloads server based on your changes ADDING A PORT 19
20. ▸ http://expressjs.com/en/4x/api.html#app.get ROUTING DOCUMENTATION 20
21. ▸ Routes have ▸ 1- an http verb ▸ 2 - the route to listen to ▸ 3 - callback function that takes two parameters - req and res ROUTING 21
22. ▸ Our route command told the application to send ‘Hello World’ to any ‘get’ request to ‘/‘ root of our application ▸ GET is an HTTP verb ▸ Most commonly used HTTP verbs are 
 GET
 PUT
 POST
 DEL HTTP VERBS 22
23. ▸ request is the call from the browser to the server. The request tells the server what type of request it is making by using an HTTP verb ▸ response is the server’s response to the request ▸ For brevity sakes, usually these two parameters are written as req and res REQUEST AND RESPONSE 23
24. ▸ Routes are what you can use to have your application respond to requests ▸ Open up example-04 ▸ npm init and npm install express —save ▸ app.get(‘/‘, function(req, res) {
 res.send(‘Hello World’);
 }); ▸ node app.js ▸ Open browser and go to localhost:3000 ROUTING 24 example_04
25. ▸ Websites have many pages and each page has its own url ▸ We need a route to handle the url for each page ▸ Create a new routes to handle all the pages for your website (about, contact, products) ▸ Test your new routes by going to each page ADDING ADDITIONAL ROUTES 25 example_05
26. ▸ The assets folder has a css folder, and img folder, a font folder and a js folder ▸ Kinda silly to have to create a route to serve up every file in all of these folders ▸ Express allows you to create static folders to server up files like these STATIC FOLDERS 26
27. ▸ http://expressjs.com/en/4x/api.html#app.use DOCUMENTATION APP.USE 27
28. ▸ Open up example-05 & npm install ▸ This method will create a mount point that express will search first for files and then if not found will then go to the routes ▸ app.use(express.static(‘public’)); ▸ Test by going to browser and entering
 localhost:3000/assets/css/style.css APP.USE 28
29. ▸ Our simple website will have home, about, contact and products pages. In addition it will have pages to display details about product1 and product2 ▸ We were using res.send() to send text back to browser. Now we want to replace this and send back a .html file instead. ▸ res.sendFile() method will send a .html file to the browser ▸ This method requires the file to be sent and an options object that contains the path to root ▸ res.sendFile('index.html', { root: __dirname }); ROUTING TO DISPLAY WEBSITE PAGES 29
30. ▸ Add routes for about, contact and products pages ▸ Test and verify that you can go to every page ADD ALL NECESSARY ROUTES 30
31. ▸ http://expressjs.com/en/4x/api.html#req.params REQUEST PARAMS DOCUMENTATION 31
32. ▸ app.get(‘/products/:productName’, function(req, res) {
 var productName = req.params.productName;
 if (productName === ‘product1’) {
 res.sendFile('product1.html', { root: __dirname });
 } else {
 res.sendFile('product2.html', { root: __dirname });
 }
 } ADD ROUTING FOR INDIVIDUAL PRODUCT PAGES 32
33. ▸ npm install -g express-generator ▸ express example-06 ▸ cd example-06 ▸ npm install EXPRESS APP GENERATOR 33
34. ▸ PROS ▸ quick installation ▸ provides routing ▸ CONS ▸ have to use debug to start and get feedback ▸ don’t need all code functionality in www/bin EXPRESS APP GENERATOR PROS AND CONS 34
35. ▸ example-07 MY VERSION OF BEST STANDARD NODE APPLICATION 35
36. ▸ Learned how to install node & npm ▸ How to install packages ▸ How to create a web application ▸ How to store data into a database SUMMARY 36
37. ▸ Jennifer Bland
 ratracegrad@gmail.com
 www.jenniferbland.com QUESTIONS & CONTACT 37