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
   

   View Slide

2. ▸ How to install Node.js
   ▸ Node and npm
   ▸ Middleware
   ▸ Templating Engines
   ▸ Routing
   WHAT YOU WILL LEARN 2
   

   View Slide

3. ▸ www.github.com/ratracegrad/werise-intro-to-node
   GET THE CODE 3
   

   View Slide

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
   

   View Slide

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
   

   View Slide

6. ▸ Sublime Text
   ▸ Webstorm
   ▸ Atom
   ▸ Brackets
   ▸ Vim
   ▸ Visual Studio Code
   EDITORS 6
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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
    

    View Slide

12. ▸ www.expressjs.com
    EXPRESS DOCUMENTATION 12
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

16. ▸ https://docs.npmjs.com/files/package.json
    NPM DOCUMENTATION ON PACKAGE.JSON 16
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

20. ▸ http://expressjs.com/en/4x/api.html#app.get
    ROUTING DOCUMENTATION 20
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

27. ▸ http://expressjs.com/en/4x/api.html#app.use
    DOCUMENTATION APP.USE 27
    

    View Slide

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
    

    View Slide

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
    

    View Slide

30. ▸ Add routes for about, contact and products pages
    ▸ Test and verify that you can go to every page
    ADD ALL NECESSARY ROUTES 30
    

    View Slide

31. ▸ http://expressjs.com/en/4x/api.html#req.params
    REQUEST PARAMS DOCUMENTATION 31
    

    View Slide

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
    

    View Slide

33. ▸ npm install -g express-generator
    ▸ express example-06
    ▸ cd example-06
    ▸ npm install
    EXPRESS APP GENERATOR 33
    

    View Slide

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
    

    View Slide

35. ▸ example-07
    MY VERSION OF BEST STANDARD NODE APPLICATION 35
    

    View Slide

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
    

    View Slide

37. ▸ Jennifer Bland

    ratracegrad@gmail.com

    www.jenniferbland.com
    QUESTIONS & CONTACT
    37
    

    View Slide