Express

Intro

This will be an introduction to three things, Node.js (a tool to run JavaScript on a server), GitHub/Git (a tool to save, manage, and show off your source code), and Express (a JavaScript library for writing a web server).

Instructions

What you need to know

A bit of knowledge about HTML
A basic understanding of JavaScript
- http://www.htmldog.com/guides/javascript/ or similar should teach you everything you need
A very basic understanding of the command line will also help

What to bring

A computer
- Some kind of text editor installed
  - https://code.visualstudio.com/ (I use this one)
  - https://atom.io/
  - https://www.sublimetext.com/
  - Any of these work, or if you have one that seems similar it will probably too
Your self

What to install

First we need to have you install Node if you haven't already
- https://nodejs.org/en/download/
Check that it's installed and reasonably up to date by checking the version in your command prompt
- npm -v
  - You should see something like 5.3.0
  - Update with npm update npm -g
- node -v
  - v8.3.0
Now git if you haven't already
- https://git-scm.com/downloads
- Windows one can be a bit tricky
Check it's version with
- git --version

Download

Start by going to https://github.com/hacksu/express-tutorial
In the upper left hand corner click the fork button
When it asks for a password click "Create an account." if you don't already have one
When it finishes forking you will have your on copy of the starting project.
Click the green clone or download and copy the url
From your documents or a similar location run git clone and whatever url you copied
CD into express-tutorial and open your text editor in that folder

Build

Run npm init this tells NPM that you have a project
- The defaults should be fine for us
- Note it requires a license to be specified. ISC is fine, but it does me that someone could 'gasp' legally use the code you write in this project as long as they credit you
Run npm install -s express this will install the express library and remember it so anyone else using the project can install it too
Create a new file named something like app.js
- We'll make our server here
Open the file and add var express = require('express'); as the first line
- This tells node to load JavaScript from another file and set a variable equal to whatever it exported.
Under that say var app = express()
- This sets up the server part
Type app.get('/', function (req, res) { res.send(new Date()) })
- This sets up a function to handle requests to a url
Finally app.listen(3000) tells the server to listen on port 3000
We run it by just running node app.js, then we go to http://localhost:3000/ in the browser

Publish it

We've got a working project or hopefully we do, lets publish it so you can share and keep track of your work

A brief intro to Git

Git is a version control system

A big long phrase that basically just means it keeps track of the changes made to a piece of software

It's the same sort of thing as SVN which you'll need to use for class

It's distributed though meaning you keep the entire history on your computer and only update it when you need

There are a couple of main commands you'll need to know right now

git clone ....

Copies a remote repository to your local computer

git status

Lists information about the status of git for the current directory

git add ...

Prepare files that should be saved as changed

To add all files in a directory git add .

We call this staging a file

git commit

Saves the current state of all the staged (added files) files

By default opens a text editor to specify a message

Use git commit -m 'The message' to specify it all at once

git push

Updates the remote you cloned from (or a different one you can specify)

Lets look at the status of the changed files
You should see it listing app.js as untracked, but also some other weird files and folders you didn't create
- package.json Should be tracked by version control
  - The file npm init created to save the history of your file
- package-lock.json Should be tracked by version control
  - This stores exactly which libraries were installed with version history, with this file npm will always install the exact same version
- node_modules/ Should not be tracked by version control
  - Stores all the libraries so your program can use it
We need to tell git then that some files/folders should not be tracked
- We do this with a .gitignore file
- create it and add a line like node_modules
  - Every line specifies a rule to ignore
  - this is the simplest but we could do *.js
    - this would tell git to ignore all js files
Now when we do git status we don't see the weird node_modules folder
Add all the files with git add .
Commit the files with git commit -m 'Made a thing'
Push them to your branch on git with git push

A more complicated app

I'm going to make you do your own thing here in a second, but first lets make a more complicated app
Our app is going to do just two things
- On it's home page it will display a link
- Then /update.html will be a form to update the link
Lets make the page to display the link first.
Open up app.js again
We need to set two variables as local variables in Express, we could just make them global, but storing them in app.locals means that we make our code a bit more reusable
```
 app.locals.name = 'Hi All';
 app.locals.link = 'https://www.google.com/';
```
Then we need to make the output determined by those variables. We can output any string so just
```
  res.send('<a href="'+app.locals.link+'">'+app.locals.name+'</a>');
```
Run the website again to check
Now lets add the form.
The easiest way is just to tell express to host some files
app.use(express.static('static')); tells Express to host all the files in the static folder on the website
Make a static folder and add update.html to it

Make a very simple website with a form and 3 inputs

  <html>

  <body>
      <form>
          <input type='text' name='name'/>
          <input type="text" name="link"/>
          <input type="submit" value="submit"/>
      </form>
  </body>


  </html>

Now start the server and notice when you visit http://localhost:3000/update.html you see the form
Click submit and you get something like http://localhost:3000/update.html?name=hi&link=https%3A%2F%2Fwww.google.com%2F
This is a forms default behavior, it's sending all the information back in the get request.
We can get it on the server by adding a get handler in our code for update.html

We need to make sure it's before app.use(express.static('static'));

  app.get('/update.html', function (req, res, next) {
      console.log(req.query);
      if (req.query.name != undefined) {
          app.locals.name = req.query.name;
          app.locals.link = req.query.link;
          res.send('<a href="/">Successfully added, go back to home</a>');
      } else {
          next();
      }
  });

Lennevia / express-tutorial