# Getting Started With Node

For the Node-js-Denver-Boulder Meetup <3

You can grab the example code here.

## Part 1

### Node Setup

Save the file.

#### 4. Point your browser to http://localhost:1137/.

##### What’s going on?
• var http = require('http') uses the HTTP server to process requests and send subsequent responses.
• http.createServer creates the web server object.
• function (request, response) {} handles requests and serves responses.
• response.writeHead(200, {'Content-Type': 'text/plain'}) sends a response header in the form of a status code along with the exact header message.
• response.end('Hello, World!\n') tells the server that all response headers as well as the body have been sent.
• .listen(1137, "127.0.0.1") accepts connections on port 1137 on URL http://127.0.0.1 (or http://localhost).

### Extended Example

#### 4. Go over this line by line. See if you can figure out what’s going on? Need help? Consult the Node documentation and/or use the “Google-it-first” algorithm.

Next time we’ll add Express into the mix!

## Part 2

We’ll be creating an entirely new app for this tutorial.

As promised, let’s add Express, which is a lightweight framework for Node.

There’s also an Express command line tool used to set up a project structure/boilerplate for use with, well, the Express framework. We can install them at the same time …

Start by installing Express globally:

### Project Setup

#### 1. Use the Express command line tool to create our project structure:

This creates a new directory with a basic project structure.

#### 2. Before we can begin developing, navigate into the folder then run the following command to load the Express dependencies from the package.json file:

Please note: The dependencies within package.json are generally listed by name and version. In some cases, instead of a version, you’ll see an *, which means that npm will retrieve the latest version of the dependency. For more information on NPM, please check out this link.

Your project structure should now look like this:

##### What’s going on?
• app.js includes your app configuration, middleware, and routing.
• package.json holds you app’s dependencies configs.
• The “public” folder contains images, Javascript files, and stylesheets.
• The file in your “routes” folder define the app’s business logic.
• “views” contain views, templates, and partials.

#### 3. Test out your app to ensure everything is installed:

Point your browser to http://localhost:3000/, and you should see:

Congrats! You just set up Express. Now, we just need to customize it. In this case we are going to build a form for submitting random strings that will be displayed beneath the form upon submission.

### Server Side

#### What’s going on?

• First, we load our module dependencies. Essentially, when you structure a Node app, you use the global require() method to load and cache Javascript modules. The app variable is the actual Express server.
• In the second section, app.set() is used to tell Express that we want to use Jade templates and where to find our “views” folder. Meanwhile app.use() functions are for middlewares, which you can read more about here.
• Next, we have routes. The actual endpoint, or path, is defined here as well as the specific HTTP method. The actual callback is handled within the “routes” folder in the index.js file.
• Finally, we configure the HTTP server like in Part 1.

#### 2. Next, let’s set up the first route. Open index.js from the “routes” folder. Update the code as follows:

Remember: Routes have a path (string and/or regex), callback function, and a HTTP method. In the above code, we are simply adding the callback, which renders the index view and sets a title.

Jade is a templating language, which compiles down to HTML. It makes it easy to separate logic from markup. If you’re having trouble with the syntax, check out the online convertor here. Keep practicing!

### Client Side

#### 1. Add a main.js file to the “javascripts” file and add the following code to the file:

Here we grab the value from the input upon form submission and assign it to the variable requestData. Then we simply append the value back to the DOM.

#### 2. We’re just about done. Let’s add one custom style to style.css:

Refresh the page. Test it out. Boom!

## Part 3

Try this on your own. Create a basic number guessing game.

Building on the code from the second part, update the code so that you enter a number instead of text. Create a new route that checks to see if the number is equal to the right number. If the user guesses right, return “Right!”; but, if the user guesses wrong, return “Wrong. Guess again.” Finally, update your main.js to call the new endpoint of the route - passing the inputted number - then have it wait for a callback (“Right!” or “Wrong. Guess again.”), which will be appended to the DOM.

Need help? Check out my answer in the “part3” folder.

Cheers!