September 21, 2009

This guide will show you how you can use JRuby to run any Rack application inside Google Web Toolkit’s (GWT) hosted mode server so your interface and your backend are of the Same Origin.

Background

GWT has two ways of interacting with a server: GWT Remote Procedure Call (RPC) and plain HTTP (XHR). GWT-RPC is a high level library designed for interacting with server-side Java code. GWT-RPC implements the GWT Remote Service interface allowing you to call those methods from the user interface. Essentially, GWT handles the dirty work for you. However, it only works on Java backends that can implement that interface. Since most of my backends are Sinatra/Rack applications, I’ll be using the plain HTTP library.

The problem

Due to the restriction of the Same Origin policy, the interface served out of GWT’s development, or Hosted Mode server can only make requests back to itself. If you were using real servlets or GWT’s RemoteService this wouldn’t be an issue; but since Rack applications listen on their own port, you cannot make requests from GWT to our application without resorting to something like JSONP or server-side proxying. This leaves you having to compile our interface to HTML/JS/CSS, which is lengthy process, and serve it from the origin of the Rack application to see our changes.

The solution

Since I wanted to develop using GWT’s development environment with a Rack backend, I devised a way to use jruby-rack to load arbitrary Rack applications alongside our interface.

1. Download and unpack the latest GWT for your platform (mine being linux) and goto it:

1 wget http://google-web-toolkit.googlecode.com/files/gwt-linux-1.7.0.tar.bz2tar -xvjpf gwt-linux-1.7.0.tar.bz2cd gwt-linux-1.7.02 .Download the latest jruby-complete.jar:

1 wget http://repository.codehaus.org/org/jruby/jruby-complete/1.3.1/jruby-complete-1.3.1.jarmv jruby-complete-1.3.1.jar jruby-complete.jar

1. Download the latest jruby-rack.jar

1 wget http://repository.codehaus.org/org/jruby/rack/jruby-rack/0.9.4/jruby-rack-0.9.4.jarmv jruby-rack-0.9.4.jar jruby-rack.jar

1. Create an app with webAppCreator:

1 ./webAppCreator -out MySinatra com.example.MySinatracd MySinatra

1. In order for this to work you have to package any gem dependencies your backend needs (sinatra, in our case) as jars within your application. For Sinatra it looks like this:

1 java -jar jruby-complete.jar -S gem install -i ./sinatra sinatra --no-rdoc --no-ri jar cf sinatra.jar -C sinatra .

1. Add jruby-complete.jar, jruby-rack.jar, sinatra.jar (and any other jars you’ve created) to the libs target of your build.xml:

1 <target name="libs" description="Copy libs to WEB-INF/lib"> 
2   <mkdir dir="war/WEB-INF/lib" /> 
3   <copy todir="war/WEB-INF/lib" file="${gwt.sdk}/gwt-servlet.jar" >
4   <copy todir="war/WEB-INF/lib" file="${gwt.sdk}/jruby-complete.jar" />
5   <copy todir="war/WEB-INF/lib" file="${gwt.sdk}/jruby-rack.jar" />
6   <copy todir="war/WEB-INF/lib" file="${gwt.sdk}/sinatra.jar" />
7 </target>

1. Add these lines right after <web-app> in war/WEB-INF/web.xml:

 1 <context-param> 
 2   <param-name>rackup</param-name> 
 3   <param-value> 
 4     require 'rubygems' 
 5 	require './lib/sinatra_app' 
 6 	map '/api' do run MyApp  
 7 	end 
 8   </param-value> 
 9 </context-param>
10 <filter>
11   <filter-name>RackFilter</filter-name>
12   <filter-class>org.jruby.rack.RackFilter</filter-class>
13 </filter>
14 <filter-mapping>
15   <filter-name>RackFilter</filter-name>
16   <url-pattern>/api/*</url-pattern>
17 </filter-mapping>
18 <listener>
19   <listener-class>org.jruby.rack.RackServletContextListener</listener-class>
20 </listener>

Note: All you’re doing here is passing the contents of a config.ru file into the <param-value> element for the <context-param> (make sure this is HTML encoded!). This states that any request to /api is to be handled by your Sinatra application and not GWT’s Hosted mode servlet.

1. Create your Sinatra backend and place it in war/WEB-INF/lib/sinatra_app.rb

 1 require 'sinatra'
 2 require 'open-uri'
 3 
 4 class MyApp < Sinatra::Base
 5 
 6   get '/showpage' do
 7     open('http://www.yahoo.com').read
 8   end
 9 
10   get '/helloworld' do
11     'hello world'
12   end
13 
14 end

1. Run your new awesome setup:

1 ant hosted

Now when you navigate to http://localhost:8888/api/helloworld orhttp://localhost:8888/api/showpage you should see the Sinatra application being served via GWT.