Skip to content
Open
4 changes: 2 additions & 2 deletions 404.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# 404 errors?

Errors are already addressed in Express for you. In the `app.js` file, there is the following:
Errors are already addressed in Express for you. In the `app.js` file, there are the following:

```javascript
/// catch 404 and forwarding to error handler
Expand All @@ -11,7 +11,7 @@ app.use(function(req, res, next) {
});
```

Then in the `views/` dir, there is `errors.jade`.
Then in the `views/` dir, we see `errors.jade`.

```jade
extends layout
Expand Down
6 changes: 4 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@

[![Build Status](https://www.gitbook.io/button/status/book/anotheruiguy/nodeexpreslibsass_from-scratch)](https://www.gitbook.io/book/anotheruiguy/nodeexpreslibsass_from-scratch/activity)

Node.js What's all the buzz about? Why are so many people talking about it? How can I get some of this awesome? Follow along in this workshop/tutorial to get your head wrapped around what it takes to make a Node project from scratch.
Node.js

But it doesn't stop at Node. In the 'full stack JavaScript' world, there is a whole eco system of tools that you need to need to know about. Besides Node, there is Express, npm, Bower, Grunt, Gulp, etc .... This books's goal is not to deep dive into any one specific subject, but to provide the overview learning needed to build a good foundation.
What's all the buzz about? Why are so many people talking about it? How can I get some of this awesome? Follow along in this workshop/tutorial to get your head wrapped around what it takes to make a Node project from scratch.

But it doesn't stop at Node. In the 'full stack JavaScript' world, there's a whole ecosystem of tools you need to know about. On top of Node, we have to worry about Express, npm, Bower, Grunt, Gulp, etc .... This book's goal is not to dive deeply into any one specific subject, but to provide the overview needed to build a solid foundation.

#### Fun deck

Expand Down
4 changes: 2 additions & 2 deletions add-some-data.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# Add some data

Great [demo](http://cwbuecheler.com/web/tutorials/2013/node-express-mongo/) that adds the next layer of awesome to this workshop. Adding a Mongo DB to the project to make a simple i/o UX.
Great [demo](http://cwbuecheler.com/web/tutorials/2013/node-express-mongo/) that adds the next layer of awesome to this workshop. It adds a Mongo DB to the project in order to make a simple i/o UX.

> My favorite thing about MongoDB is that it uses JSON for its structure, which means it was instantly familiar for me. If you're not familiar with JSON, you'll need to do some reading, as I'm afraid that's outside the scope of this tutorial.
> My favorite thing about MongoDB is that it uses JSON for it's structure, which means it was instantly familiar to me. If you're not familiar with JSON, you'll need to do some reading, as I'm afraid that's outside the scope of this tutorial.

> Let's add a record to our collection. For the purposes of this tutorial, we're just going to have a simple database of usernames and email addresses. Our data format will thus look like this:

Expand Down
8 changes: 4 additions & 4 deletions bower-grunt-sass.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Bower - Grunt - Sass

Now that we know the powers of Bower to easily manage our front-end development dependencies, what do we need to do to add a Bower package of Sass code to our project?
Now that we know the powers of Bower in easily managing our front-end development dependencies, what do we need to do to add a Bower package of Sass code to our project?

## Bower install

Expand All @@ -10,13 +10,13 @@ First off, let's install a simple Bower package for illustration:
$ bower install css-calc-mixin --save
```

There, we now have the library of code in our project.
There. We now have the library of code in our project.

## Update Gruntfile.js

Next we want to update the `Gruntfile.js` so that we can easily include the library into our Sass files. Without this step, we would need to write fill paths in our Sass file to this and that's simply lame.
Next we want to update the `Gruntfile.js` so that we can easily include the library in our Sass files. Without this step, we would need to write fill paths in our Sass file to this and that's simply lame.

In the Grunt-Sass API we have options and the one we need to use is `includePaths`. Here we can pass in a string that is the full path from root to the Bower package into an array.
In the Grunt-Sass API we have options and the one we need to use is `includePaths`. Here we can pass in a string that is the full path, from root to Bower package, into an array.

```javascript
module.exports = function(grunt) {
Expand Down
58 changes: 29 additions & 29 deletions bower.md

Large diffs are not rendered by default.

30 changes: 15 additions & 15 deletions deploy-app.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
# Deploy your first app

At this point, you should have an app that works locally on your computer. The following steps outline updates you need to make in order to deploy the codes.
At this point you should have an app that works locally on your computer. The following steps outline updates you need to make in order to deploy the codes.


## Update package.json

In this step, we need to add some code to the `package.json` file so that we can run the app from a remote server.
In this step we need to add some code to the `package.json` file so that we can run the app from a remote server.

Right now, there is a good chance that the file will look like this:

Expand All @@ -29,7 +29,7 @@ Right now, there is a good chance that the file will look like this:
}
```

At the end of the `dependencies": { ... }` object, you need to add a comma `,` so that we can add more code. First let's add the `main` keyword:
At the end of the `dependencies": { ... }` object you need to add a comma `,` so that we can add more code. First let's add the `main` keyword:

```
"main": "app.js",
Expand Down Expand Up @@ -73,35 +73,35 @@ You should have something that looks like the following:

### Don't forget the Grunt + Bower

If at this time you do not have any of the Grunt packages or Bower in the `dependenciess` object, we need to get that in there.
If, at this time, you do not have any of the Grunt packages or Bower in the `dependenciess` object, we need to get that in there.

You can either add them manually to the `package.json` file or dun:
You can either add them manually to the `package.json` file or run:

```
$ npm install --save grunt
$ npm install --save grunt-sass
$ npm install --save bower
```

Something that you probably don't have is the ability for the deployed server to run the Grunt tasks. For this we need Grunt-CLI.
Something that you probably don't have is the ability of the deployed server to run Grunt tasks. For this we need Grunt-CLI.

```
$ npm install --save grunt-cli
```

Right about now, you should be looking pretty good.
Right about now you should be looking pretty good.

### Postinstall instructions

When we deploy the codes to Heroku, we have to tell it to run some commands, basically install the Bower packages and run the Grunt tasks. To do this, we need to add the instructions within the `scripts` object of the `package.json` file.
When we deploy the codes to Heroku we have to tell it to run some commands. Basically, install the Bower packages and run the Grunt tasks. To do this we need to add the instructions within the `scripts` object of the `package.json` file.

Directly under the `"start": "node ./bin/www"`, add:
Directly under the `"start": "node ./bin/www"` add:

```
"postinstall": "./node_modules/.bin/bower install && ./node_modules/.bin/grunt"
```

There, now we have everything that Heroku needs to install the packages and run the scripts.
There. Now we have everything that Heroku needs to install the packages and run the scripts.

## Add the Procfile

Expand All @@ -117,14 +117,14 @@ Add the following code:
web: npm start
```

Heroku will use this to kick start the app.
Heroku will use this to kickstart the app.


## Make this a Git repo

It is important to make this a git repo BEFORE you create the Heroku server. **WAIT!** Before you go all crazy on the Git, there are some things we need to do.
It is important to make this a git repo BEFORE you create the Heroku server. **WAIT!** Before you go all crazy on the Git there are some things we need to do.

You should have a `.gitignore` file in your repo at this point. open that up and make sure you are ignoring all the `node_modules`, all the `bower_components` and anything in the `/stylesheets/*.css` spectrum.
You should have a `.gitignore` file in your repo at this point. Open that up and make sure you are ignoring all the `node_modules`, all the `bower_components` and anything in the `/stylesheets/*.css` spectrum.

```
node_modules
Expand All @@ -143,7 +143,7 @@ It is not required at this time to make this a Github repo, but you may want to

## Deploy the codes

This is pretty hard here. Make sure to follow the commands specifically:
This right here is pretty hard. Make sure to follow the commands specifically:

```
$ heroku create <your-app-name>
Expand All @@ -152,7 +152,7 @@ $ git push heroku master

## Rejoice

If all is well, you should see a return like this:
If all is well you should see a return like this:

```
http://<your-new-app>.herokuapp.com/ deployed to Heroku
Expand Down
6 changes: 3 additions & 3 deletions express.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@

It has a wealth of [APIs](http://expressjs.com/4x/api.html) and is FAST AS HELL!!

Express is well known for NOT following after Rails as far as frameworks go, but more so it takes after another Ruby framework called [Sinatra](http://www.sinatrarb.com/). The concept is simple, the framework gives you enough to get things up and running as fast as possible and all without getting in your way.
Express is well known for NOT following after Rails as far as frameworks go, but more so it takes after another Ruby framework called [Sinatra](http://www.sinatrarb.com/). The concept is simple: The framework gives you enough to get things up and running as fast as possible and all without getting in your way.

For the most part, Express continues to live up to this statement.

For this workshop, we will be using Express as the core tool for getting a web app up and running with a server, route support, error pages, loggers, etc ...
For this workshop we will be using Express as the core tool for getting a web app up and running with a server, routing support, creating error pages, loggers, etc ...


## Install Express

Installing Express with npm is really easy. Keep in mind that there are two parts to Express, the library that runs it and an awesome generator.
Installing Express with npm is really easy. Keep in mind that there are two parts to Express: The library that runs it and an awesome generator.

To install Express:

Expand Down
10 changes: 5 additions & 5 deletions grunt-watch.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# Grunt-watch w/Livereload

Now that we have Grunt set up with Sass, when we run the `grunt` task in the CLI, this will process the edits we have. While in rapid development, going back the the CLI, typing in `grunt` and then refreshing the browser will get old fast.
Now that we have Grunt set up with Sass, running the `grunt` task in the command line will process our edits. While in rapid development going back the the CLI, typing in `grunt`, and then refreshing the browser will get old fast.

Thankfully, we have options. `grunt-contrib-watch` is a npm package that will watch our Sass files and when one is touched, it will run the Grunt tasks to process it. To install:
Thankfully, we have options. `grunt-contrib-watch` is a npm package that will watch our Sass files and, when one is touched, will run the Grunt tasks to process it. To install:

```
npm install --save-dev grunt-contrib-watch
```

As an added bonus, not only can we run a watcher that will process our Sass, but we can also watch `.jade` files for changes as well.
As an added bonus, not only can we run a watcher that will process our Sass, but we can also watch `.jade` files for change.


In the `Gruntfile.js` we need to add some Grunt tasks:
Expand Down Expand Up @@ -40,7 +40,7 @@ module.exports = function(grunt) {
};
```

And there we have it. Grunt is installed, we have a functional `Gruntfile.js` and we can start writing some Sass too.
And there we have it. Grunt is installed, we have a functional `Gruntfile.js` and we can start writing some Sass, too.

## Add Livereload to layout.jade

Expand All @@ -64,4 +64,4 @@ html
script(src='http://localhost:35729/livereload.js')
```

After this is added, go back and REFRESH the browser and then any edit in either Sass or Jade should fire the Livereload.
After this is added go back and REFRESH the browser, and then any edit in either Sass or Jade should fire the Livereload.
8 changes: 4 additions & 4 deletions grunt.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# Install and set up Grunt

Grunt is the workhorse of the Node world. You need tasks run, then you put Grunt to work. If you are from the Rails world, Grunt is much like make or Rake. There is a TOM of documentation out there on this task runner, but in this workshop, I will focus on the basics that will get you up and running with an application.
Grunt is the workhorse of the Node world. You need tasks run? You put Grunt to work. If you are from the Rails world, Grunt is much like make or Rake. There is a TON of documentation out there on this task runner but, in this workshop, I will focus on the basics that will get you up and running with an application.

Grunt is pretty simple to set up, create a new `Gruntfile.js` file in the root of your project and add the following shell syntax:
Grunt is pretty simple to set up. Create a new `Gruntfile.js` file in the root of your project and add the following shell syntax:

```javascript
module.exports = function(grunt) {
Expand All @@ -16,7 +16,7 @@ module.exports = function(grunt) {
};
```

To run Grunt, it is typical to install Grunt globally:
To run Grunt it is typical to install Grunt globally:

```
npm install grunt -g
Expand All @@ -28,4 +28,4 @@ BUT WAIT!! What about deployment? If we create tasks that require Grunt to run o
npm install --save grunt
```

Using this base structure and Grunt installed, we can now begin to add new features to our app.
Using this base structure, and with Grunt installed, we can now begin to add new features to our app.
6 changes: 3 additions & 3 deletions gulp.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,19 @@ The following are some interesting articles that need to be worked into this wor

### Getting Started With Gulp

> This article will make the assumption that you have never used a task runner or command-line interface before and will walk through every step required to get up and running with gulp.
> This article will make the assumption that you have never used a task runner or command-line interface before and will walk through every step required to get up and running with Gulp.

[source](http://travismaynard.com/writing/getting-started-with-gulp)

### Roll Your Own Asset Pipeline with Gulp

> I’ve found myself using Gulp for just about everything involving HTML/CSS/JS these days. It’s super fast, quick to write scripts for and flexible. I’m at a point now where I have a ton of projects I can just cd into, run gulp and be up and running. It’s the best solution I’ve found for delivering static assets whether for local development or production.
> I’ve found myself using Gulp for just about everything involving HTML/CSS/JS these days. It’s super fast, quick to write scripts for and flexible. I’m at a point now where I have a ton of projects I can just cd into, run Gulp in and be up and running. It’s the best solution I’ve found for delivering static assets for either local development or production.

[source](http://blog.carbonfive.com/2014/05/05/roll-your-own-asset-pipeline-with-gulp/)

### Advanced Gulp File

> With gulp starting to find itself into my everyday workflow - I've started to understand its quirks and twists, and how to get along with it. My baseline gulfile.js has become a lot neater and advanced in its functionality that the one I originally developed back in March.
> With Gulp starting to find itself into my everyday workflow I've started to understand it's quirks and twists, and how to get along with it. My baseline Gulpfile.js has become much neater and more advanced in it's functionality than the one I originally developed back in March.

[source](http://www.mikestreety.co.uk/blog/an-advanced-gulpjs-file)

10 changes: 5 additions & 5 deletions heroku.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# Heroku

The following are basic steps needed to quickly set up a Node.js app with Express and deploy to Heroku.
The following are basic steps needed to quickly set up a Node.js app with Express and then deploy it to Heroku.

### Step 1 - Heroku account

Make sure you have a Heroku account set up
First, make sure you have a Heroku account set up.

### Step 2 - Install Heroku Toolbelt

Download and install the tool belt package specific for your OS
Download and install the tool belt package specific for your OS.

##### OSX

Expand All @@ -26,7 +26,7 @@ $ wget -qO- https://toolbelt.heroku.com/install-ubuntu.sh | sh

### Step 3 - Log into you account

Once toolbelt is installed, you should be able to access your account
Once your toolbelt is installed you should be able to access your account.

```
$ heroku login
Expand All @@ -39,4 +39,4 @@ Generating new SSH public key.
Uploading ssh public key /Users/adam/.ssh/id_rsa.pub
```

That's pretty much about it. Pass these steps and you are ready to DEPLOY THE CODES!
That's pretty much it. Pass these steps and you are ready to DEPLOY THE CODES!
24 changes: 12 additions & 12 deletions new-app.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# Crate a new Express app

At this point, you should be able to go forth and create an app. In this example, we will create a Node.js app with Express framework.
At this point you should be able to go forth and create an app. In this example we will create a Node.js app with the Express framework.

```
$ express <your-new-app>
```

Running this command (using `demo-app` as the example), you should see the following:
Running this command (using `demo-app` as the example) you should see the following:

```
create : demo-app
Expand Down Expand Up @@ -34,11 +34,11 @@ Running this command (using `demo-app` as the example), you should see the follo
$ DEBUG=my-application ./bin/www
```

BOOM! Express takes care of most of the labor. Now, we do what the computer says, change directory into the app dir and run `npm install`.
BOOM! Express takes care of most of the labor. Now we do what the computer says: Change directory into the app dir and run `npm install`.

## What's in the app?

At this point, you should be able to do a `ls` and see the new structure that was created for you.
At this point you should be able to run `ls` and see the new structure that was created for you.

```
app.js node_modules/ public/ views/
Expand All @@ -47,29 +47,29 @@ bin/ package.json routes/

#### app.js

This is the logical starting point for your app. Some of the things in there, lets talk about:
This is the logical starting point for your app. Let's talk about some of the things in here:

The following lines, for this type of app, we don't need them:
For this particular type of app we don't need the following lines:

```
var user = require('./routes/user');

app.get('/users', user.list);
```

Sets the path to the dir where the view files are located:
This sets the path to the dir where the view files are located:

```
app.set('views', path.join(__dirname, 'views'));
```

Sets the path to the dir with static assets:
This sets the path to the dir with static assets:

```
app.use(express.static(path.join(__dirname, 'public')));
```

Sets the root route for the app:
This sets the root route for the app:

```
app.use('/', routes);
Expand All @@ -85,11 +85,11 @@ Directory for all static assets like images, JavaScript, CSS, fonts, etc ...

#### views/

Where all your layout and view Jade files will live.
Where all your layout and View Jade files will live.

#### bin/

There is a single file here, `www` and this is what activate the Node server.
There is a single file here, `www`, and this is what activates your Node server.

#### package.json

Expand All @@ -105,4 +105,4 @@ This is the code that allows you to run `npm start` for the app.

#### routes/

This is the directory where you will build out the RESTful routes for your app. With a base install there should be two files in there, `index.js` and `users.js`.
This is the directory where you will build out the RESTful routes for your app. With a base install there should be two files in there: `index.js` and `users.js`.
Loading