Intro to Node.js Part 1

Welcome!

Welcome!

The plan

• What is Node
• What is npm
• Using node packages
• Overview of server response cycle

Quick CLI review!

Commands used often:

• mkdir
• cd
• ls [-la]
• cat
• rm [-rf]

Node.js

• Server-side JavaScript
• Event-driven
• Non-blocking

Server-side?

Clients and servers

How your computer accesses websites

But ALSO how computers talk to each other

You can run JavaScript on the server with the help of Node.js!

What does non-blocking mean?

(prepare for silly exercise)

When to use Node

• Scripting on your computer
• Setting up a web server
• Building a cross-platform app (ex. Electron)
• Managing dependencies (npm)
• Take over the world Maybe?

Let's Develop It!

• If you haven't yet installed the required materials, install: git and nvm
• Install version 8.9.4 of Node (LTS) with nvm install 8.9.4
• Run node -v in your terminal and see what it says
• Node comes with npm, but make sure yours is up to date with npm install npm@latest -g
• Run npm -v in your terminal and see what it says
• Run node to access the REPL, try out some JS! Use .exit to exit
• BONUS Create a JavaScript file and run it from the command line using node [YOUR_FILE].js

npm

npm

• “node package manager,” but also "the package manager for JavaScript" according to npmjs.com
• Package ecosystem
• Largest ecosystem of open source libraries in the world!

NPM packages

Some examples

• lodash
• webpack
• react
• express

Let's Develop It! (together)

• Make a new directory and cd into it
• Run npm init
• What happens with npm init --yes?

Writing a Node script

Node.js API

Node.js contains many useful core modules for us to use, such one to use the file system

const fs = require('fs');
fs.readFile('ourfile.txt', 'utf8', function(err, data) {
  // do things
});
const data = fs.readFileSync('ourfile.txt', 'utf8');
      

Let's Develop It!⁰

• Create a file called script.js
• Download Frankenstein text file
• Load the file and count instances of the word "monster," and print to stdout (our terminal)
• BONUS: What other interesting stats can you calculate for this book? Try using both readFile and readFileSync

What's a package.json?

package.json is a JSON file that defines information about your app, and npm knows about it

What's a package.json?

There are some rules around names and other parts of your package.json, and npm will warn you if it doesn't like something

npm install

• Different behavior depending on arguments
• With arg: Installs a package and its dependencies to your node_modules folder
• Without arg: In node project folder, will install the dependencies in the package.json

Example

Example

npm install express

npm install express lodash ...

Tell npm to save a package to your package.json, or install multiple packages at once!

More install!

npm install is smart!

• Github remotes npm install foo/foo
• Folders npm install ../foo
• Package at version npm install foo@1.0
• Install a package globally npm install -g foo

More details in the CLI docs

What are dependencies?

A dependency is something your application needs to run (it depends on it!).

What are dependencies?

You might install a dependency that relies on something else, adding it to your dependency chain.

Check out the dependency chain for express.

What are dependencies?

Some dependencies are only used in development mode (vs production), and these are known as devDependencies in the package.json file.

Example

npm install jest --save-dev

npm install jest -D

You can install packages as dev dependencies, meaning people who run the built package don't require these modules.

Packages vs. Modules

In the Node.js module system, each file is treated as a separate module.

(source)

A package describes a group of 1+ modules

How do we use a module?

                      
                    var express = require('express');
                      
                    

Let's Develop It!¹

• Run npm install express
• What happened to your package.json file?
• Remove the node_modules folder, and run npm install. npm installs your defined dependency!
• Create an app.js file and require express
• BONUS: Add node_modules/ to your .gitignore file

Express.js

Express features

• Routes
• Requests
• Views

Simple Express Server

            
var express = require('express');
var app = express();

app.get('/', function (req, res) {
res.send('Welcome to the GDI Node Workshop!');
});

app.listen(3000, function () {
console.log('Your app is listening on port 3000!');
});
              
          

Run the server from npm

            
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js"
},
              
          

npm scripts

npm scripts allow you to use npm to manage a lot of your app using easy commands like npm start, npm test and more.

npm scripts

People use "scripts" in package.json to: compile or preprocess code, run tests, build for a deployment or environment, or really anything!

npm scripts

If you define an arbitrary key (not in npm docs), you can run it using npm run KEY

            
"scripts": {
...
"stuff": "echo \"LET'S DO STUFF\""
}
...
$ npm run stuff
              
          

Let's Develop It!²

• Update app.js to run a simple web server using Express
• Add a command to package.json to make it easy to run, probably under "start"

HTTP Server Basics: Request/Response

Examples of HTTP requests:

• GET
• PUT
• POST
• DELETE
• Behold the holy RFC for more about the HTTP protocol

And responses?

They're what you get back from a request 😎

Routes

"Routes" define how a server should respond to a certain request at a certain end point or path.

              
// app.<HTTP action>
app.get('/', function (req, res) {
res.send('Hello World!');
});
              
          

What we've learned

• What is Node
• What is npm
• Used an npm module
• Built a web server

Homework

• Review exercises and bonus items

Exercise solutions at https://github.com/pselle/Intro-to-Node.js-Exercises