We used to use Nginx for all of our apps back in the good ‘ol days of mongrel clustering. Since Phusion Passenger, we like most other development companies, moved straight over to Apache for ease of install and maintenance. However we decided recently that we should look at Nginx again, for its super small memory footprint and low server load, as well as super fast serving. Apache is a beast and on small servers without correct optimisation it can eat up resource at a much quicker rate than Nginx.
We ran some side by side comparables on Nginx vs Apache on a 512 slice and the differences are significant. Anyway… on to the install!

I have put semi-colons after each line so in theory you can just copy entire blocks and just paste them into your terminal and they will execute.

Firstly on a blank system (logged in as root) add your user account

adduser deploy;

Then give this user sudo privileges by editing the sudoers file:

visudo;

Make sure the file is correctly saved as sudoers, not sudoers.tmp then log out and back in as your new deploy user.

Now lets get the base system ready, so firstly:

sudo apt-get update;
sudo apt-get upgrade;
sudo apt-get install build-essential zlib1g-dev libssl-dev libpcre3-dev git-core;

Now to install Ruby 1.9 and Rubygems
Go grab Ruby from here

cd;
wget ftp://ftp.ruby-lang.org/pub/ruby/1.9/ruby-1.9.1-p376.tar.gz;
tar zxvf ruby-1.9.1-p376.tar.gz;
cd ruby-1.9.1-p376;
./configure; make; sudo make install;

Now install libopenssl-ruby

cd;
cd ruby-1.9.1-p376/ext/openssl;
sudo ruby extconf.rb;
make; sudo make install;

And readline (to avoid the readline errors from the console)

sudo apt-get install libreadline5 libncurses5-dev libreadline5-dev;
cd;
cd ruby-1.9.1-p376/ext/readline;
ruby extconf.rb;
make; sudo make install;

Go and fetch Rubygems from here

cd;
wget http://rubyforge.org/frs/download.php/69365/rubygems-1.3.6.tgz;
tar zxvf rubygems-1.3.6.tgz;
cd rubygems-1.3.6;
sudo ruby setup.rb;

Check everything is running as expected:

ruby --version; gem --version;

And you output should show something like this:

ruby 1.9.1p376 (2009-12-07 revision 26041) [i686-linux]
1.3.6

Now to install nginx and passenger:
Grab the latest nginx from here

cd;
wget http://nginx.org/download/nginx-0.7.65.tar.gz;
tar zxvf nginx-0.7.65.tar.gz;

Before you install this, grab passenger and it will install nginx for you:

sudo gem update;
sudo gem install passenger --no-ri --no-rdoc;
sudo passenger-install-nginx-module;

When passenger install loads, select option 2 (advanced) as option one uses an older version of nginx than we just downloaded.
The directory where nginx source code is located is:

/home/deploy/nginx-0.7.65

Make sure you specify what user to run as, in the add extra arguments section add the following:

--user=nginx --group=nginx

And just go with the defaults for everything else. Nginx gets installed in /opt/nginx
Now add the nginx user:

sudo adduser --system --no-create-home --disabled-login --disabled-password --group nginx;

Now install the startup script from linode to get Nginx started:

cd;
wget http://library.linode.com/web-servers/nginx/installation/reference/init-deb.sh;
sudo mv init-deb.sh /etc/init.d/nginx;
sudo chmod +x /etc/init.d/nginx;
sudo /usr/sbin/update-rc.d -f nginx defaults;

Now Nginx is installed with passenger support, all we have left to install is Mongodb and monit.
Starting with mongodb, grab the source from here, make sure you get the correct version for your system architecture as the 32 bit has limitations so if you can install the 64 bit, do!
On the system I am installing it is 32 bit:

wget http://downloads.mongodb.org/linux/mongodb-linux-i686-1.4.1.tgz;
tar zxvf mongodb-linux-i686-1.4.1.tgz;
sudo mv mongodb-linux-i686-1.4.1 /opt/mongodb;

Now create the data directory for mongo (the following instructions have been taken originally from the tutorials at library.linode.com)

sudo mkdir -p /data/db/mongodb;
sudo touch /data/db/mongodb.log;

And create the basic control scripts:

sudo mkdir /opt/bin/;
sudo mkdir /opt/config/;

Copy and paste the following into /opt/bin/mongodb-start:

#!/bin/sh
/opt/mongodb/bin/mongod --config /opt/config/mongodb \
## --upgrade \ ##runs a database upgrade option if needed \

Copy and paste the following into /opt/bin/mongodb-stop:

#!/bin/bash

pid=`ps -o pid,command ax | grep mongod | awk '!/awk/ && !/grep/ {print $1}'`;
if [ "${pid}" != "" ]; then
    kill -2 ${pid};
fi

Copy and paste the following into /opt/config/mongodb:

# Configuration Options for MongoDB
#
# For More Information, Consider:
# - Configuration Parameters: http://www.mongodb.org/display/DOCS/Command+Line+Parameters
# - File Based Configuration: http://www.mongodb.org/display/DOCS/File+Based+Configuration

dbpath = /data/db/mongodb
logpath = /data/db/mongodb.log
logappend = true

bind_ip = 127.0.0.1
port = 27017
fork = true

auth = true
# noauth = true

And make sure the files are executable:

sudo chmod +x /opt/bin/mongodb-start;
sudo chmod +x /opt/bin/mongodb-stop

Now grab the init script from linode:

cd;
wget http://library.linode.com/databases/mongodb/reference/init-deb.sh;
sudo mv init-deb.sh /etc/init.d/mongodb;
sudo chmod +x /etc/init.d/mongodb;
sudo /usr/sbin/update-rc.d -f mongodb defaults;

Add a mongo user and make sure they own the right files:

sudo adduser --system --no-create-home --disabled-login --disabled-password --group mongodb;
sudo chown mongodb:mongodb -R /data;

Ok now to install monit:

sudo apt-get install monit;
sudo mkdir /etc/monit.d;

Now to configure everything!!!
Let start with nginx:

sudo mkdir /opt/nginx/vhosts;

I have created a optimised nginx config file available here. Grab this and copy the contents into /opt/nginx/conf/nginx.conf
The nginx conf assumes that your declare your servers in /opt/nginx/vhosts. If you have issues with passenger make sure the two lines regarding Passenger point to the correct Ruby and Passenger.
Now create your vitualhosts. For the purpose of this article I am going to create one generic one. You can grab this from the gist here and then put it inside the vhosts directory.

Thats Nginx done. Now to sort out monit.
First edit the /etc/default/monit file and make sure startup is set to 1, so it starts on boot.
Now create the monit.d directory:

sudo mkdir /etc/monit.d;

And then edit the /etc/monit/monitrc file. You can grab a template for this from here.
I have created one file for everthing in the /etc/monit.d directory. Grab it from here and then make sure it is executable:

cd /etc/monit.d;
sudo vi the_file_name;
sudo chmod +x the_file_name;

It doesn’t matter what the file is called. Monit will run any file located in the /etc/monit.d directory as we specified that in the monitrc file earlier.
Now start monit!

sudo /etc/init.d/monit start;
sudo monit;
sudo monit start all;
sudo monit status;

And that’s pretty much it! your server is set up with monitoring, nginx, mongodb and ruby 1.9. All you need to do now is set up your deployment strategy.

Running the RVM gem (which we show how to install) allows you to easily run multiple Ruby versions and switch seamlessly between them.

First steps:
- Checking your Architecture
Make sure that the stuff you install actually fits your current architecture. Even if you have a machine capable of 64bit it doesn’t necessarily mean that the OS you are running is 64bit. To check what your mac is running open the terminal and type:

uname -a

This should bring back something like this:
I am running this on a Macbook with i386 architecture (32 bit) so I see the following:

Darwin Dynamic50s-MacBook.local 10.2.0 Darwin Kernel Version 10.2.0: Tue Nov  3 10:37:10 PST 2009; root:xnu-1486.2.11~1/RELEASE_I386 i386

If I run the same test on a 64 bit machine instead of i386 I see x86_64

Darwin Dynamic50s-Macbook-Pro.local 10.0.0 Darwin Kernel Version 10.0.0: Tue Nov 3 10:37:34 PDT 2009; root:xnu-1456.1.25~1/RELEASE_X86_64 x86_64

Keep a note of this as you will need it later.

- Xcode
You need the latest version of xcode so download this from the apple developer site. Do not use the version off of the CD, get the latest version. Unless you are using XCode to develop for the IPhone, you only need the basic mac version.

- MySQL
If you want to use MySql then you will need to do the following:
If you have previously installed any versions of MySQL (from Macports or other) remove them. Make sure you download the correct version of MySQL for your architecture.
Download version from the MySQL site (DMG) here.
Make sure you get the right version for your platform, Also install the Prefpane (inside the DMG file), this makes it really easy to start and stop MySQL from System Preferences.

- Enable MySQL
Go to System Preferences and enable MySQL from the system preference pane. Then start it up and make sure it is running. Before you close the pref pane, make sure the start on start-up is also ticked.

- Git
If you use Git as your repository system then you will need to install it (if you don’t currently use it, you should be!). To do so go here and install it. You can also install this from macports, but I prefer to grab the most up to date version from the google code repos, and it comes packaged as a DMG.

Make sure it runs by opening a new terminal and running

git --version

And you should see something like this:

git version 1.7.0.2

If it is not there, you probably don’t have the path set correctly. Mine is located in

/usr/local/git/bin

So I have to make sure this bin directory is in my PATH. If I type:

env $PATH

into the terminal I get the following:

env: /Users/dynamic50/.rvm/rubies/ruby-1.8.7-p249/bin:/Users/dynamic50/.rvm/gems/ruby-1.8.7-p249/bin:/Users/dynamic50/.rvm/gems/ruby-1.8.7-p249%global/bin:/Users/dynamic50/.rvm/bin:/usr/local/mysql-5.1.45-osx10.6-x86_64/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/local/git/bin:/usr/X11/bin: No such file or directory

This shows that it indeed in the path, if it isn’t, simply add it by editing your .bash_profile file and reloading the terminal.

- Installing Ruby version manager
The recommended way of installing this is from source. Open up a new terminal and type:

cd $HOME/.rvm/src && git clone --depth 1 git://github.com/wayneeseguin/rvm.git && cd rvm && ./install

After install make sure you follow the instructions and add what is required to your bashrc and .bash_profile and the reload your sources (or restart the terminal).
Now install the Ruby versions you want.

rvm install 1.8.7
rvm install 1.9.1
rvm install 1.9.2

And set a default:

rvm --default 1.8.7
rvm default

Make sure that you are currently using the default. Open a terminal and type:

ruby --version

This should bring back something along the following lines:

ruby 1.8.7 (2010-01-10 patchlevel 249) [i686-darwin10.2.0]

I am only going to do the following stuff for Ruby 1.8.7, but if you want to do it for the other Ruby versions installed, simply switch to a different version and then perform the same tasks.
- Installing the MySQL gem:
This always seems to cause a headache and is usually due to architecture flags.
This should work, feel free to write a note in the comments if you are having issues on this and I will try and help out.
For 64bit Intel architecture:

sudo env ARCHFLAGS="-arch x86_64" gem install mysql -- --with-mysql-config=/usr/local/mysql/bin/mysql_config

For 32bit Intel architecture:

sudo env ARCHFLAGS="-arch i386" gem install mysql -- --with-mysql-config=/usr/local/mysql/bin/mysql_config

And thats about it! Now install any other gems required, or better still, use bundler and package them all into your application.

Please update your blog reader, we will be deprecating the old feeds shortly.

To embed on to your site, go to: Flight Carbon Calculator and choose a theme and comparable. I have chosen the cloud theme with cans of cola as my comparable. A embed code will appear at the bottom of the page when you have made your choices. Simply copy and paste the embed code straight on to your site. Here’s an example below.

And now you have your own Flight Carbon Calculator, running on Ruby on Rails, embedded into your site!

Sticking with the on-a-map idea, we have just released a jobs section for Rubymash. Companies can now list the positions they currently have available and they will appear on the map associated with the company. This gives potential employees more information on the Ruby on Rails company they are looking to work for than other jobs sites as you can view company information associated with the job, and also physically see where it is located in the world.

We also added a ad-free jobs feed here, so you can follow the jobs as and when they get published.

If you have any ideas of how we can improve this site, please let us know!

My setup is Rails 3.0.0.beta with ruby 1.9.1 for this example. If the steps sound confusing, you can follow the example code here http://github.com/railsbob/MyApp.

First of all, lets create a generic, reusable application. My reusable ‘login application’ with one controller is called as ‘Saas’.

To allow sharing of this application by others, we need to wrap it as a Rails::Engine. To do so, add a file named ‘engine.rb’ to config folder.

Create a ’saas.rb’ in lib folder which requires this engine.rb. This is required, as we want to load the application as Saas::Engine instead of Saas::Application.

Lets create a container app which mounts the Saas Application.

rails MyApp

To mount it, copy the Saas application into lib of MyApp.

Saas application’s routes.rb should be modified to replace Saas::Application by Rails::Application. Also, to keep things modular, add a namespace to the routes.

The next step is to hook Saas app into the initializer process of MyApp. There are many ways to do it, but we will follow the bundler approach.

In MyApp/Gemfile, require the saas application from lib directory as a gem.

At this stage, bundler complains about missing version for saas as it is expecting a gem. So lets add a saas.gemspec at MyApp/lib/saas/saas.gemspec with basic information.

Start the server from the container app and if you go to /saas/sessions you should see the text ‘Hi from SessionsController’.

Note that even if the Saas application was modified to be an engine, it still works as a standalone application when run from its root.
The example code discussed above is available at http://github.com/railsbob/MyApp.
.

If your UI needs to hold state and do a little more then just returning a html string and
updating a dom element(not that cool); then json is the way to go.
Javascript is powerful so it can just receive the json and it can handle the state of the UI. We wanted templates that worked in both worlds; server side and client side; Based on these
requirements we went for Mustache and Mustache.js We also created a template resolver (super easy in rails3) to get these templates from the db so clients could have there own personal view; but that is another story;

However its not the easiest tool to get going in Rails; So based on that fact
we needed a quick implementation to get us going with Mustache.
Note: This is not the best approach to solve this problem; Mustache probably
needs a custom context that can be compliant in the rails3 in a action_view sense;
This seems to be actually quite hard; from my perspective action_view seems
to be one the most complexing parts in rails and rails3. I personally think that
the context should start from a simple hash and layer the extra functionality on
top in module fashion. But then you are in view helper hell; so in a nut shell I am
not that sure on that one.

What we did

• Create a template handler to get a handle on the mustache

• Create custom mustache to handle a context that can take a ActionView::Context;

  
  

• Register the template handler

  
  

Create a ViewModel (view/questions)

The apt-sources version of Ruby is not the latest version, as such it is better to compile everything from source.

First make sure your package sources are up to date and you have build essential and zlib1g-dev installed:

sudo apt-get update
sudo apt-get install build-essential zlib1g-dev

Now grab Ruby 1.9.1 latest stable from here. The latest version at the time of writing is p376.

wget ftp://ftp.ruby-lang.org/pub/ruby/1.9/ruby-1.9.1-p376.tar.gz

Untar and install it:

tar zxvf ruby-1.9.1-p376.tar.gz
cd ruby-1.9.1-p376
./configure
make
sudo make install

Now go and get the latest Rubygems. At the time of writing this was 1.3.5. Grab this from here.

wget http://rubyforge.org/frs/download.php/60718/rubygems-1.3.5.tgz

Untar and install it (if you downloaded the tgz)

tar zxvf rubygems-1.3.5.tgz
cd rubygems-1.3.5
sudo ruby setup.rb

And these should both now be installed.
Check that everything is running:

ruby --version; gem --version

Your output should show something like this:

ruby 1.9.1p376 (2009-12-07 revision 26041) [x86_64-linux]
1.3.5

If you are looking to install Passenger you will also need libopenssl-ruby. To install this, go to the ruby source:

cd ruby-1.9.1-p376/ext/openssl
sudo ruby extconf.rb
make
sudo make install

Here are few random snaps from the evening.

The advantage of using CSS gradients rather than a tiled image is flexibility and speed. Not needing to load up images can speed up your website performance by reducing both the data needed for a page and more importantly, http requests. The flexibility comes from the fact that to change a gradient, you need only to change some colour values and/or positions, so no more firing up Photoshop just to change a gradient that starts from black to not-quite-as-black. In addition, using CSS gradients lets you draw gradients that span the full width or height of an element, no matter the size- something that can’t quite so easily with a background image.

Usage

The -moz-linear-gradient value can be used where background-image value is used. So for example, instead of using…

background-image: url(path/to/image.png);

you would use instead (taken from Mozilla Documentation)

background-image: -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* );

In English, this means you need to provide it with…

• - a starting point or gradient angle (optional)
• - a minimum or 2 colour positions

points and angles

Inclusion of a point and/or angle is optional. If you do not specify one as the first parameter, the gradient will be assumed to go from top to bottom. If you do chose to specify this parameter, you can provide

• - A single point
• - A single angle
• - A point and angle combination

A <point> is the standard way of defining an x and y position in CSS i.e. keyword values such as “left”, “top”, “center” etc.; percentage values or other valid value unit. If you provide only one value, the other is assumed to to “center”.

The value of the <angle> can be specified in degrees (deg), gradians(grad) or radians(rad). Unlike the webkit implementation of CSS gradients, there is no way of defining the end point of the gradient. Instead, the end point is determined by what values you provide.

<point>

In the case that you provide only a <point> value, the end point is determined to be the point you would get if you rotated the starting point 180 degrees around the centre of the element being styled. It is much easier to see what is happening in an image, so here is an animation showing the process of creating a gradient with a <point> value of center top, fading from black to white.

-moz-linear-gradient(center top, #000, #fff)

The resulting element (Firefox 3.6+ users only):

And just for clarity, here is another example, this time using a <point> value of 35% 60%

-moz-linear-gradient(35% 60%, #000, #fff)

And its resulting element:

<angle>

Determining what actually happens when you provide an angle is quite intuitive, but rather difficult to explain. The Mozilla Developer Documentation description of the process at first glance is pretty confusing, but does convey the right information. It is helpful however, to know that the angles are measured from the x-axis, with positive angles measured anti-clockwise.

The short description is that it works, pretty much, just like the Gradient Overlay layer effect in Photoshop. The long description is something like this (assuming a specified angle of 150deg)…

The starting point is placed at one of the element corners (left top; right top; left bottom or right bottom).

The corner used depends on the angle provided. The correct corner is the one that allows the specified angle to point into the element.

To determine the ending point, you would need to imagine 2 others thing. First is to imagine a line drawn from your start point, along the specified angle (this is known as the axis).

The second is to imagine a line drawn from the opposite corner, which is perpendicular to the axis.

The ending point would be where these 2 lines meet.

And for sake of completenes, here is the full animation

-moz-linear-gradient(150deg, #000,#fff)

And the resulting element:

point angle combo

Providing both a <point> and an <angle> works as you would expect. The start point is taken as the point you provide, and the angle is then drawn as shown above.

<stop>

The <stop> value describes 2 things: a colour and the position along the axis at which the colour should appear. As such, a <stop> takes 2 values: a colour value and an optional length value, separated by a space. A gradient will be created from one stop to the next, blending the colour (and even opacity) as needed. Some valid examples would be…

#fff
#999 50%
#a909f2 80px
rgba(255,255,255,0.5) 6em

You are required to provide at least 2 stop values, one for the start and one for the end of the gradient. If the first stop value has no position, it is assumed to be 0. If the last stop value has no position, it is assumed to be 100%. For any other <stop> values without positions, it is assumed to be half way between the previous and next <stop> values. Adding additional <stop> values is as easy as chaining them together, separated with a comma (,).

Piecing all these bits together (along with some other css3 bits) we can create some subtle but nice effects such as a glass effect button (Firefox 3.6+ only!).
Button

The gradient part of the styling is like so…

a#example{
  background-color: #000;
  background-image: -moz-linear-gradient(
    center top,
    rgba(255, 255, 255, 0.5) 0pt,
    rgba(255, 255, 255, 0.33) 50%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.2) 100%);
}