Engineyard, Rails 3.x, NGINX, PASSENGER ASSETS NOT DISPLAYED


CAUTION: Please excuse the diction/grammar/spelling. It’s 3 AM and I am in a hurry to sleep as I need to drop my friends to airport in exactly 4 hrs.

So I was trying to set up this new application for my wife. I was using galleria plugin to show a slide like image. Everything was working fine in development so I decided to see how it would look like in production environment if it was deployed in a cloud or virtual server. So I ended up choosing engineyard because it gives you 500 free hours and you do not need to have dns name. Once the application is deployed on the server, you can view the application on temporary url.

Installing a rails app on engineyard is pretty easy, however tunneling (ssh) on to the server was a nightmare. I will cover the ssh experience in some other post. The main issue was my galleria plugin css, images and javascript was not showing correctly. After spending 2 days and mailing the engineyard (They pretty responsive and quick!!) I realized that there was an issue with application configuration. So I tried to run the application on my mac in production mode and found that galleria javascripts and css files were not loaded. The engineyard support told me that they were using passenger and Nginx. So I decided to install the same on my local and experiment.

You can install passenger with Nginx or apache. I used apache version initially but had some issues so decided to use nginx instead.

On an interesting note – While I was still struggling to load galleria assets using passenger, I searched a lot – site documentation, rails sites, forums etc., but none told me how to start and stop Nginx … call me dumb but that is something I did not find on any of the sites until I decided to go through the whole Nginx documentation and there it was…  buried deep half way through the documentation :-). It should have been there on there installation page.

So this post is in two parts, the first part will walk you through passenger and Nginx installation and the second part will let you know the configuration changes in your rails app so that assets are loaded properly in production mode.

PART 1: PASSENGER AND NGINX installation

1. Install passenger: Run this in your command line –

gem install passenger

2. Install the Nginx: Run this in your command line

passenger-install-nginx-module . If you see permission errors which says that you do not have permission to install then try –  sudo  passenger-install-nginx-module. 

If you still get error which says –

Could not find RubyGem passenger (>= 0) (Gem::LoadError),  then you probably use rvm to maintain your ruby rails version. So in this case try –

rvmsudo passenger-install-nginx-module . 

Now when the installation starts, it will ask you some basic question like should I install some file plugins or location of installation etc., just keep saying yes or hit enter to continue. The whole process will probably take 3-4 minutes to complete.

3. Update the nginx configuration file

By default nginx will be installed in /opt/nginx folder on your mac or linux system. I don’t know what is the default location for windows. On a lighter note do people actually use windows for RAILS development??? Seriously?? No offense but I have only met people who use windows to try out rails sample apps .

Ok I am done with bashing Windows users 🙂 So to update the configuration file go to nginx.conf file under /opt/nginx/conf and update the code under server tag. You can find more details about nginx configuration here.

server {

listen 80;

server_name  localhost;

root /Users/dinesharora/Desktop/Mydocument/ruby-proj/album;

passenger_enabled on;

passenger_base_uri /Users/xxxxx/Desktop/Mydocument/ruby-proj/album;

…..

After saving the file. Stop the Nginx server

Stop nginx by going into /opt/nginx/sbin. Then run this command – 

sudo ./nginx -s stop

To start just run ./ngnix

4. Start your passenger or application.

Go to your rails app folder and run this command in the terminal – passenger start (To stop ctrl+c)

Now by default passenger should start in production mode, but mine did not. It started in development mode. The documentation said that it will start in production mode by default but id did not. After racking my brains and going through the whole documentation, I did not find anything. Guess what ……. the documentation is outdated on the site. I almost gave up on Rails development and was thinking about going back to Java/Spring/Grails or GWT, but decided to stick a little longer. Anyway too much blabbering about what I did and whined …. here’s how to check if your passenger is running in production or development mode.

When you run you passenger start, you will in 3rd or fourth line something like this –

Log file: /Users/dinesharora/Desktop/Mydocument/ruby-proj/album/log/passenger.3000.log
Environment: development
Accessible via: http://0.0.0.0:3000/

If it is running in development mode, the you need to start your application using this command.

passenger start -e production.

It goes without saying that if you run into permission issues, run it using sudo or rvmsudo.

So that’s it. Your app is running and can be accessed via http://0.0.0.0:3000/. I mapped 0.0.0.0 to localhost :-). Anyway I was happy that my installation was successful(I struggled for 4-5 days), without any solutions.

PART 2: ASSETS CONFIGURATION

Well my happiness was short lived because my galleria plugin was not working. I initially thought it was an issue with galleria plugin so I switched it with other jquery image slide show plugin, but each had same issue, they all worked fine in development but were not loaded in production mode. I kept seeing this error in the production logs – Routing error – [get] /assets/javascripts/galleria/xxxx.js not found 404 error.

Every site said that – Just set config.assets.compile = true and it will start showing up. Well I believed that statement for 4 more days to no avail. I tried playing around with application.js (Sprockets gem – built in Rails 3.x) bit it did not work. I included the galleria folder as well in the application.js but still no images.

So I had placed my galleria plugin /app/assets/javascripts/galleria and I had to access

– js file

– galleria/plugins/*.css files etc

– galleria/plugins/images etc.

I tried placing them in app/assets, lib/assets, vendor/assets but nothing will work. Here are steps if you have the same issue.

– Open production.rb and make sure you have added or uncommented the following –

1.

# Code is not reloaded between requests
config.cache_classes = true

# Full error reports are disabled and caching is turned on
config.consider_all_requests_local = false
config.action_controller.perform_caching = true

# Disable Rails’s static asset server (Apache or nginx will already do this)
config.serve_static_assets = false

# Compress JavaScripts and CSS
config.assets.compress = true

# Don’t fallback to assets pipeline if a precompiled asset is missed
config.assets.compile = true

# Generate digests for assets URLs
config.assets.digest = true

config.i18n.fallbacks = true

# Send deprecation notices to registered listeners
config.active_support.deprecation = :notify

# config.assets.initialize_on_precompile = false
config.assets.precompile += [“*.js”, “*.css”] ——– This HAS TO BE ADDED and was the key. Unless you add this line galleria images or any other images which are sub folders in assets or controller specific or personal folder under app, vendor lib will not loaded.

After you have made the above changes in production.rb file, Rails needs to compile js and css and put them in public/assets folder. Now in development environment Rails does it for you but when you are in production, you need to generate assets. So while you are in you rails application folder run this command –

rake assets:precompile OR bundle exec rake assets:precompile. This will attach fingerprint to all the images, css and js files and put them in public/assets folder. Read Rails documentation.

Now start your application in production mode using

– passenger start -e production.

– Open the application url.

Voila!!! All the images show up.

–Cheers

This entry was posted in Uncategorized and tagged , , , , , , , . Bookmark the permalink.

7 Responses to Engineyard, Rails 3.x, NGINX, PASSENGER ASSETS NOT DISPLAYED

  1. Hey there,

    My name is Oscar Pedroso. I came by your blog while visiting the Beat the GMAT website. I really enjoy your blog and wish you the best as I see you’re aiming for ESADE. 🙂
    After spending 3 years applying to schools, I finally got interviews at schools like MIT Sloan and Stanford. Ironically, I decided to put my MBA on hold to go down the path of entrepreneurship first.

    I am emailing you because I’d like to engage your blog in some form. I am founder of mbawritersblock.com, a free admission resource for young professionals applying to business school and a site for those who don’t want to spend lots of money on admission consultants.

    I am also recruiting bloggers like yourself to be a part of my essay guide affiliate program. It entails marketing my essay guide on your blog and for any readers that purchase the guide, you get a 50% commission.

    If you’re interested in hearing more, please feel free to email me and I’d be happy to answer any questions. If not, no worries. I figured I had nothing to lose by asking and reaching out. Good luck!
    Thanks!

    Oscar

  2. jameydavis says:

    I followed a tutorial online to get my Rails 3.2 app up and running on RackSpace. I’ve been pulling my hair out for a day and a half over the standard Rails error in production. This finally solved it, thank you so much!

  3. Sachin says:

    This post is really very helpful. It solved my problem.

  4. ab says:

    When installing Nginx required installation of openSSL support. Despite installing this as instructed the Nginx installer could not find it. Found solution to this here:

    http://www.blog.bridgeutopiaweb.com/post/fix-openssl-not-found-error-for-passenger-installation-rvm/

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s