Front End Web Development

Spark Boulder, Summer 2017

Session 18: The Session Strikes Back

Advanced Topics: Back End Web Development with Node.js

THE END IS NIGH

We're approaching the end of the class!

On August 23rd at 9pm (1 week after the class ends), report cards get generated!

Report cards include grades on all assignments, attendance, and links to projects:

Remember to check your grades with grades on @classbot!

Remember to create separate site44 apps for your projects so that potential clients and employers can see them!

The Social Network Front End Project

For your final project, I'm going to have you create the front end to the Spark Front End Web Development Social Network.

All of the students in the class are on the Social Network! You can create new posts, and everyone else in the Social Network can see those posts.

For your front end, you'll need at least 2 pages:

You'll need to make requests to the API to create and get posts on the Social Network. All of the API documentation is up at https://spark-class-social-network-api.hoff.tech/.

Some notes:

Logistics:

More dumb fun web stuff

Really, really cool one today!

http://xkcd.com/1663

When you load the page, you get a fragment appended to the URL (a fragment is the # bit). This creates a new game, and sends some information off to the server, including unique info about your browser, so you can share a read-only URL with others. Every time you edit the page, it sends your edits to the server, and the server runs your garden continuously.

http://xkcd.com/1663/#55944f62-fa9b-11e5-8001-42010a8e0010

When you load a URL that already has a fragment, it loads up that specific game, and the controls if you’re accessing it from the original browser.

More from this guy + xkcd collab: http://chromakode.com/post/notes-on-xkcd-pixels

Advanced Topics: Back End Web Development with Node.js!

Node.js

You know how we can run JavaScript in the browser?

We can also run JavaScript in Node.js!

Things look a little different between the two:

Node.js is built on top of the V8 JavaScript engine! V8 takes JavaScript code and turns it into machine code (pure hexadecimal code, instructions for the CPU to execute)

Downloading Node.js

In order to follow along today, you'll have to download and install Node.js.

https://nodejs.org/en/

6.9.1 should be totally fine!

Running JavaScript with Node.js

Create a new directory (it doesn't have to be in your site44 site, but it can be if you want) with a file index.js in it, and put the following in index.js:

// index.js

console.log("Hello, this is running from Node.js!");

Running your Node.js script - but first, a Command Line Crash Course

If you're a Mac user, go ahead an open up the Terminal app (Applications > Utilities > Terminal).

If you're a Windows user, I'd recommend downloading Git Bash and running that. If you're feeling particularly ambitious (outside of this session), you can try enabling the Windows 10 bash shell thingy.

Once you've got Terminal/Git Bash open, try typing cd, ls, or pwd, followed by an enter.

Remember: a "file system" is just a big tree of nested folders. There's only one folder all the way up at the top, at the "root" of your file system (the / path), and your site44 apps are probably way down in /Users/ken/Dropbox/Apps/site44/notajetski.site44.com or something.

Your challenge:

Using the command line (your Terminal/Git Bash), navigate into the directory that contains your index.js.

Once you're in the correct directory (if you type ls and hit enter, you should see index.js), type in node index.js and hit enter.

Listening for HTTP requests with Express

To listen for incoming HTTP requests, we’ll use a library called Express. It turns our little Node script into a web server!

Install Express

Before we can use Express in our project, we need to set up our Node "app" and install Express next to our app. No CDN's here, sorry!

On the command line, inside the directory that contains your index.js, run the following commands:

Note: while it will work without it, --save is required for deploying to Modulus (more on that later)

Initializing Express and telling it to be a web server

Inside of your index.js:

// index.js

var express = require("express");
var app = express();
app.listen(process.env.PORT || 1234);

This tells express to start "listening" on port 1234 (or, whatever port Modulus assigns. More on Modulus later)

Run the script again with node index.js - what happens on the command line?

To "kill" your server and go back to the command line, press ctrl-C. (It's ctrl-C, not ⌘-C !)

Receiving HTTP requests

Now, let's tell the server to respond when someone tries to get the root path, or /:

// index.js

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

app.get("/", function(request, response) {
    console.log("hey! something happened!");
})

app.listen(process.env.PORT || 1234);

Restart your server by killing (ctrl-C) and rerunning (node index.js) your script.

Then, open a browser and go to http://localhost:1234/. What happens in the browser? What happens on your command line?

Why do we need to kill and restart the server every time we change the code?

Sending data back in response

Now, let's tell the server to send something back in response every time someone tries to get the root path (/):

// index.js

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

app.get("/", function(request, response) {
    console.log("hey! something happened!");
    response.send("client says what?");
})

app.listen(process.env.PORT || 1234);

Restart your server again, then try to go to http://localhost:1234/. What do you see?

Getting info from the URL

Let's make it a little more complicated by getting some info from the URL:

// index.js

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

app.get("/", function(request, response) {
    console.log("hey! something happened!");
    response.send("client says what?");
})

app.get("/hello/:name", function(request, response) {
    response.send("Hello, " + request.params.name + "!")
})

app.listen(process.env.PORT || 1234);

Restart, and go to http://localhost:1234/hello/yourname. What happens?

A whole new hosting platform: Gomix

We’re going to use Gomix to host our Node.js code. It’s a little like site44, but runs full-stack Node.js apps instead!

Getting Started with Gomix

Submitting Gomix apps as assignments

Debugging Gomix

A whole new hosting platform: Modulus

We’re going to use Modulus to host our Node.js code. It’s a little like site44, but runs Node.js apps instead!

Normally it’s not free, but they give you a $15 credit when you sign up, and they don’t require payment info. That should be enough to host a tiny server full-time for 2 months - more than enough for what we’re doing in the class!

Getting Started with Modulus

Install the Modulus command line tools:

On the command line, run:

npm install modulus -g

If you get an error with that, try:

sudo npm install modulus -g

(you'll have to type in your password)

Sign up for Modulus

On the command line, run:

modulus signup

(pretty cool that you can sign up from the command line, right?)

Create a new Modulus project

On the command line, navigate to your project folder, then run:

modulus project create

Name it whatever you like!

When asked for the runtime, select Node.js.

When asked for the servo size, enter 192.

Deploy your Node.js app to Modulus

On the command line, in your project folder, run:

modulus deploy

Confirm that you’re deploying the right app, and hit enter!

(sit and wait for a minute or two)

Then, navigate to your app in the browser (something like http://yourappnamehere-12345.onmodulus.net) and check that everything is working as expected.

Marvel at your unlimited cosmic power!

Debugging Modulus

If your Modulus stuff isn’t working, try running modulus logs. It might give you a clue as to what’s broken!

That's all I've got for today!

What questions are there?

How to be a Web Developer

  1. Look stuff up on the internet
  2. Make stuff
  3. Repeat

Excelsior! 🚀