Step Two (Build a SPA): Create a development Environment

Right now there are no basic MAMP/LAMP like packages to get one going.  This means you will need to get comfortable using the terminal. So to get up and running, and playing with AngularJS we will need to create an environment. Actually, at this point we are going to create a NodeJS environment and then later Angular’ize it.

A basic environment includes:

  • NodeJS (Delivers the SPA)
  • An editor (I use Textmate)
  • A database

It’s really cool that there is not that much to install in order to get Angular going.  Really, you can do it with installing NodeJS.  Now, if you already have done that because you went and learned JavaScript as in Step one, great.

With NodeJS, we get node package manager (npm).  When developing in node, you will be using this often.  There are two ways we install things in node.  We either install it as a global because we want to use it from the command line. Or, we install it to the local project because we are going to use it on the server side.

When we install it globally it has the “g” option, like so:

$ npm install –g <package>

In my examples, I like to use express to handle the REST communication.  I do that by leveraging a server-side JavaScript module called express.  I will be using it from the command like, therefore it is a global install.  This also means that it requires root privileges to install.  The command to install express would then be:

$ sudo npm install –g express

While we are at it, let’s install nodemon.  When you are working with NodeJS, you will need to stop and start the server every time you change something.  In development, this sucks.  Luckily there is nodemon.  We can install nodemon, and this allows us to just refresh the browser to load the latest changes. Because it is a global, we need to use the format we just used.

$ sudo npm install –g nodemon

Later, I might want to install a mongodb driver for node.  This is different, as I am not looking to use this for the command line. In fact, I only want it installed for my project.  This means I do not want to add it to the projects npm.  In a project there is a npm module directory and a package.json file that tells the system what modules are active for the project.  Many people install the npm and then edit the package.json file, but we can do this in one command.

$ sudo npm install –-save mongodb

The –save option will add the modules information into the local package. These are the two ways you will likely install in node.  Globally with a sudo, or locally with a save option.

Create a working directory

When working on a project, organization is key.  This is especially true when the project gets big.  I do not put my projects in a Documents directory instead a create a Projects directory:

$ mkdir ~/Projects

$ cd ~/Projects

And here we begin to create our first SPA.  In this example, I call it first.  I am going to have express create a structure for me.

$ express first
create : first
create : first/package.json
create : first/app.js
create : first/public
create : first/public/javascripts
create : first/public/images
create : first/public/stylesheets
create : first/public/stylesheets/style.css
create : first/routes
create : first/routes/index.js
create : first/routes/user.js
create : first/views
create : first/views/layout.jade
create : first/views/index.jade
install dependencies:
$ cd first && npm install
run the app:
$ node app

This command, which is the express command we installed, created the structure that we are going to use.  However, we are not going to use express for page routing or templates.  After all, this is a single page application.

$ cd first
$ rm -rf views
$ rm -rf routes
$ cd public
$ ls
images         javascripts    stylesheets
$ mv javascripts js
$ mv stylesheets css
$ mv images img
$ cd ..
$ npm install
$ mate .

This gives us a base structure to work from:

Structure

What I’ve done here is get rid of the multi-page app directories.  I also renamed the directories to shorter names I am use to in web development.

Changing the app.js file

Now I need to change the app.js file in express to act like a SPA. The default app.js file looks like this:

/**
* Module dependencies.
*/
var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
, http = require('http')
, path = require('path');
var app = express();
app.configure(function(){
app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
});
app.configure('development', function(){
app.use(express.errorHandler());
});

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

http.createServer(app).listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});

And we are going to get rid for the page routing and views from express, but keep routing for REST calls. So, all the bold lines above are removed. This gives us a basic app.js file.

/**
* Module dependencies.
*/

var express = require('express')
, http = require('http')
, path = require('path');
var app = express();
/*
* Configure the app without Jade or Views.
* We are going to leverage the Public directory to deliver the SPA
* We are still going to use routes, but for handle REST calls.
*/

app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
app.enable("jsonp callback");
});

app.configure('development', function(){
app.use(express.errorHandler());
});

http.createServer(app).listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});

At this point, we just do not have a page to show.  Let’s put a stub (index.html) in the /public directory right now:

HelloScreen

Starting the page with nodemon

Now we can run our nodemon command from the first directory:

$ nodemon app.js

In your browser, point it to the localhost port of 3000 (http://localhost:3000).  That is the default user port in node. You should see:

hellothere

If you look at your terminal prompt, you will notice that nodemon tells you about the connection:

$ nodemon app.js
11 Oct 14:41:44 - [nodemon] v0.7.10
11 Oct 14:41:44 - [nodemon] to restart at any time, enter `rs`
11 Oct 14:41:44 - [nodemon] watching: /Users/chris/projects/first
11 Oct 14:41:44 - [nodemon] starting `node app.js`
Express server listening on port 3000
GET / 200 7ms - 52b

Summary

At this point, we are ready to start using Angular.  What we have in place is a NodeJS server running on our machine with nodemon also installed.  Next, we are going to start to populate the /js directory with Angular and the /css directory with bootstrap.  We are also going to increase the complexity of our index page.

Trackbacks

  1. […] Next we are going to create an environment on our system in order to start developing. […]

  2. […] their respective folders.  That is the reason that we created directories of css, img, and js (previous post).  Yet major package creators like Bootstrap and AngularJS are starting to leverage Bower.  Bower […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: