Pages

Wednesday 2 January 2013

Node.js Raspberry Pi Tutorial 2 - Our first site

Well this is part 2 in a series of blogs I am making surrounding the Raspberry Pi and node.ns - Here is part 1

So in the last tutorial we installed node.js 0.8.16,


The aim of this tutorial is to create a site running on the Express framework.. Express is sort of like the defacto standard now for building web apps in node.js, there are more complex ones such as Meteor and Derby which feature loads more stuff.. and we might go into them in the future.. but they are built using express and the principles we are going to learn here anyway so it is worth starting at the bottom.. I think diving right into Meteor would be confusing..



So what is express?

Express is the glue which holds our app together.. it is the framework of our app.. express is a series of tools bundled together which when initialized will spit out a ready to use app.. 

For example, say I wanted to create a website using node.js.. where would I start? Well first of all I know that I would need a HTTP server as that's just how the web works.. So I would look into nodes documentation and pull out its HTTP module and create a server..

So far so good.. Okay well, I am happy with my server just serving up "Hello World" or whatever the most basic example is and I have decided I want to add another page to my site which will serve up some other content.. let's go with a picture of a cat..
Well I only have the http server so I would have to set up some sort of request handler/router which would take the new page url (/cat) and figure out what functions to carry out and then actually execute those functions and pipe the image of the cat to the user.

I now have a server and a router.. (no split files or organisation yet just one file with some router code) say I want to parse the cookies of the user visiting my site so that they can stay logged in even when they leave the tab in their browser.. well I would have to look around in node.js libraries and would use the connect-cookie module and play around with that..
HTML or CSS templating? maybe pull in stylus or Jade and try and get the thing going..
This all sounds like a ball ache right? well that's where our good friend express comes into play..

Express just does all this for you.. all you have to do is type "express myApp" and it will create all the configuration, file organisation and module installation for you.. all you do is sat back and smoke a cigar. So are we agreed.. express is awesome? Okay let's install the thing.

What is NPM?

NPM if you have never used it is this cool way to install packages in node.. it is much like apt in Raspbian, instead of typing "sudo apt-get install porno" you would type "npm install porno" and it would find the relevant porno for your needs.. the files get dumped in every directory you use the npm install command in.. for example if I was in a directory /bacon and I type npm install random-package, then npm would create a folder inside bacon called "node_modules" and inside that would be my random-package.. node always looks inside the node_modules folder..
/bacon/node_modules/random-package.

There is one other way to install packages in Node and that is globally so instead of just installing them for the current project like I showed above they are installed on the whole computer. This is especially useful for installing packages like express, as you are going to want to use them for every project you set up so it makes sense to be able to use them everywhere..

So that is what we are going to do, install express onto the whole computer but first of all we want to make sure our package manager NPM is up to date.. 


Type the above into any directory, this will tell NPM to update itself, once this is done type npm -v to make sure you are running an up to date version (1.1.69 is my version).


This will install express on the pi so we can use it in our projects.. the -g is the global install option which is mentioned above..


Express installed.. let's make an App

Right for this tutorial we are just going to create the most basic Express app, there are some options you can tweak depending on your preferences, but as we are assuming you are all beginners lets not go into those just yet..

First of all find a directory you want to try out an express app in.. for this kind of thing I have a folder called "node-playground" where I test out all of this kind of stuff.. maybe try that.

The above commands make the directory we are going to play in, then the express command makes a separate directory called myApp (or anything you want to call it) with all the relevant files in..

If you have done it right you should see the following screen, I have listed the files inside the folder too


if you have something that looks like above then all is going well.. express it telling us to install the dependencies this app needs.. so we will do that in a second.. this also uses NPM,  (npm is used for everything pretty much so get used to it).. when you download or clone someones app you always have to let npm install the dependencies on your computer and compile them properly. So let's do it..


Change directory into the app if you haven't already like I have done above.. and then type




This should set loads of text going.. what npm is doing here is reading from the file called package.json for which modules express wants to use. It then goes through its libraries to find whatever versions are specified and downloads and installs them to a folder called node_modules.

I will go into package.json and how JSON works soon but for now just know that npm has installed everything express has asked for.. if you get any error which I am sure you won't.. maybe try installing the package build-essential (sudo apt-get install build-essential).. this just contains some basic tools for building packages which npm might want to use.



That's it.. you have a finished website which will run on the Raspberry Pi

Seriously that's how easy it is.. install express.. npm install and then finally to actually run your app just type
node app.js
This tells node to run it.. if everything is working node should say.. "running on localhost:3000" if you go to the pi's ip and then type :3000 you should see a page saying "welcome to Express"..

eg my pi is on 192.168.0.11 so in chrome I type 192.168.0.11:3000 to see my amazing express app.

Well that's all well and good but how does all this work so I can make my own cool apps I hear you ask.. well full explanation is coming soon.. I am tired right now bed time!

2 comments:

  1. thats a really nice sneak peek! Learned alot from this tutorial. Thanks for that!

    ReplyDelete
  2. I am very inspired to read your post, it will be very helpful for us.
    node.js development Sydney

    ReplyDelete