$30 off During Our Annual Pro Sale. View Details »

Learn and Understand Node.js

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.

Jennifer Bland

September 25, 2016

More Decks by Jennifer Bland

Other Decks in Technology



  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

    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 
  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;

    (productName === ‘product1’) {
 res.sendFile('product1.html', { root: __dirname });
 } else {
 res.sendFile('product2.html', { root: __dirname });
  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

  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
 www.jenniferbland.com QUESTIONS & CONTACT 37