Skip to content

Instantly share code, notes, and snippets.

@patriciarealini
Forked from ashleygwilliams/node_together.md
Created April 17, 2016 07:48
Show Gist options
  • Save patriciarealini/c3ef5cea94511dcd0ee72dc4b31cef31 to your computer and use it in GitHub Desktop.
Save patriciarealini/c3ef5cea94511dcd0ee72dc4b31cef31 to your computer and use it in GitHub Desktop.

NodeTogether Curriculum

Step 0. git Up and Running

Github

Github is where we will store all our code and collaborate on it with others. Make an account here: https://github.com/

git

git is a way to keep track of your projects as they change. it is called "version control software". You use it in your terminal to add, commit, and push code your write to Github. You can also use it to clone other people's code onto your machine.

Download it here: https://git-scm.com/

First-time Setup

To connect your local git to your Github, type:

git config --global user.name "John Doe"
git config --global user.email [email protected]

You should use the same email as you used to set up your Github Account.

Reference

Here's a cheat sheet for all the commands we'll be learning and more: https://training.github.com/kit/downloads/github-git-cheat-sheet.pdf

This is a neat visualization of some git commands, but a little more advanced: http://ndpsoftware.com/git-cheatsheet.html

Step 2. Node.js and npm

Node.js version managers

There are a lot of different versions of Node out there. These tools will help you keep track of what version you are using, and also make it easy to install new versions and switch between them. They also make npm easier to set up :)

Installing Node.js and npm

Using nvm

nvm install 4

Using nodist

nodist + 4

You can test that it worked by typing:

node -v

Update npm

Even though npm comes with the Node.js install, npm updates more frequently than Node.js, so you should always be updating to the newset version!

npm install npm@latest -g

You can check what version of npm you have by typing:

npm -v

Step 3. Programming Basics

What is Programming

Programming is the act of giving a computer a set of instructions (imperative) or a goal (declarative) that it can then follow or satisfy. We are gonna focus on imperative programming :)

In order program imperatively we really only need to do two things:

  • Assign and save values
  • Manipulate those values

Variables: Assigning and Saving Values

var two = 2;
const greeting = "Hello!";
let members = ["Ashley", "CJ", "Kat", "Kasey"];

Manipulating Values

var name = "Ashley";
var greeting = "Hello ";
greeting + name; // "Hello Ashley"

1 + 2; //3

var letters = ["A", "B", "C"];
letters[0]; // "A"
letters[1]; // "B"

Functions: Reusable Manipulation!

function(input) {
  return output;
}

e.g.

var add2 = function(number) {
  return number + 2;
}

add2(3); // 5

Step 4. npm

The JavaScript ecosystem is super awesome to work in as a beginner because lots of code is already written and openly shared. This way, you can glue modules, or packages, together, to make apps with little programming.

To create an npm project, we will make a package.json. This is just a file that stores some info about our project and also keeps track of all the modules we'll use. We can create an npm project by typing

npm init --yes

We can install packages and add them to our package.json by typing

npm install <package-name>

Step 5. Express

Express is a web framework written in and for Node.js. It solves the problem of receiving requests from a client (like the browser) and sending back a response (like a web page).

To install it, type:

npm install express --save

There are 2 things we need to do to get Express up and running:

  1. create and start a webserver (server.js)
  2. write rules for responding to requests (app/index.js)

Creating a Web Server

To create a web server we need to define a location (a host and port) and then tell the computer to run our Express app there and then listen for requests. This is the kind of code you can write once and then cut and paste forever:

const port = process.env.PORT || '8080';
const host = process.env.HOST || '0.0.0.0';
const express = require('express');
const app = express();

app.use(require('./app'));

app.listen(port, host);

console.log('Server running %s:%d...', host, port);

module.exports = app;

Routes: Request and Response Rules

The next problem we need to solve is how to tell our app what to do when we ask it to do specific things.

The way we ask a website to do things is called a request, and it comes from something called a client. A request is made of 2 things, an HTTP action (GET, POST, PUT, DELETE) and a URL which is the hostname (www.myawesomestuff.com) and a route (/my-route).

Express asks us to define:

  • app.<HTTP action>, e.g. app.get()
  • route, /my-route
  • what to send back when that request happens response.send("my message")

When we glue it all together, it looks a little like this:

app.get('/my-route', function(request, response){
  // do stuff!
  response.send("a webpage is just a really long string");
});
const express = require('express');
const app = express();

app.get('/', function(request, response) {
  response.send("hey i like your shoes");
});

module.exports = app;

Step 6. Using Packages in our App

Writing a bunch of motivational statements is fun, but also kind of time consuming. Luckily a bunch of people from the Node.js community already have written a bunch for you in a pacakge called motivations: https://www.npmjs.com/package/motivations

npm install motivations

We also need to solve the problem of needing to randomly pick one motivational statement from the set of them. Some languages have this built in, but JavaScript doesn't. Luckily we can use a package! https://www.npmjs.com/package/pick-one

npm install pick-one

Step 7. Deploying with Heroku

Heroku

Heroku is how we will push our project to the internet so we can share it will all our friends. Make an account here: https://heroku.com

https://devcenter.heroku.com/articles/getting-started-with-nodejs#introduction

To set up your app on Heroku type:

heroku create

You'll probably want to rename your app! You can do that by typing this when you are inside your app's directory:

heroku apps:rename newname

Reference

Now, let's push our app to the server using git:

git push heroku master

To see your app, you can now type:

heroku open

Not working? Try typing this to see the errors:

heroku logs
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment