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.

Da526e4b5901b3a2759cf234285c6488?s=128

Jennifer Bland

September 25, 2016
Tweet

Transcript

  1. 2.

    ▸ How to install Node.js ▸ Node and npm ▸

    Middleware ▸ Templating Engines ▸ Routing WHAT YOU WILL LEARN 2
  2. 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
  3. 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
  4. 6.

    ▸ Sublime Text ▸ Webstorm ▸ Atom ▸ Brackets ▸

    Vim ▸ Visual Studio Code EDITORS 6
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 30.

    ▸ Add routes for about, contact and products pages ▸

    Test and verify that you can go to every page ADD ALL NECESSARY ROUTES 30
  25. 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
  26. 33.

    ▸ npm install -g express-generator ▸ express example-06 ▸ cd

    example-06 ▸ npm install EXPRESS APP GENERATOR 33
  27. 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
  28. 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