You are here

SproutCore and Drupal Integration

SproutCore is "an HTML5 application framework for building responsive, desktop-caliber apps in any modern web browser, without plugins." Here at Appnovation we recently became a partner of Strobe, the main driving force behind SproutCore, and we're excited to hook it up to Drupal to deliver quality applications to the web browser, whether it be on a desktop, iOS (iPhone and iPad) or Android devices.

In this post I'd like to share a basic example of hooking SproutCore up to Drupal. Just to make one thing clear, SproutCore is a complex beast and we're barely going to scratch the surface of what it can do. If your interest is piqued, there are a number of examples and demos available on the SproutCore website. Rather than walk through the SproutCore install procedure, there are guides available here. Also for brevity I've set up a Git repository available here which contains a basic SproutCore app which can talk to a Drupal instance. Assuming you've gone ahead and set up SproutCore and cloned my repo, there's a couple of steps required before you can get this demo up and running.

Firstly, you need a Drupal instance to talk to! What I did was set up a very basic Drupal 7 install with the Services and CTools modules. I then set up an endpoint and allowed the Node service to index and retrieve nodes via that endpoint. Take note of the path because you're going to need to configure the SproutCore application next! Also keep in mind you should create some nodes for the SproutCore to load. If you're still playing along at home, you're going to need to break out your favourite text editor and point it at the Buildfile in the root of the repository you just cloned. At the end of that file is the (Ruby) line:

proxy '/anon', :to => 'sproutcore.local'

What this line does is proxy requests that begin with '/anon' (what I called my services endpoint) to my Drupal instance (in this case http://sproutcore.local/, but you should omit the http:// and the trailing slash!). This will allow you to get around the cross-domain request limitations. You're nearly there!

The next file to open is the Data Source file, which connects the SproutCore application to the Drupal webservice. This file is located at apps/drupal/data_sources/drupal.js. The line you're looking to amend looks like this:

SC.Request.getUrl('/anon/node.json')

You'll want to update that to reflect your Drupal service. Remember it should also reflect the proxy you just set up. Alright, fire up a terminal and navigate to the SproutCore application you cloned and amended. You should be able to start an internal SproutCore server with the 'sc-server' command. Everything going well, you should be able to point a browser window to http://localhost:4020/ and see a list of SproutCore applications (including some built in tests and demos). Obviously the one we're really interested in is the 'drupal' application - select that and hit 'Launch Application'!

With any luck you'll now be looking at an iPhone-esque list of nodes! You should be able to click on a node title to load that node (ideally I would've liked to have included the node body but didn't due to a limitation of the Services module). You can hit back to return to the list. Obviously this is a very simple example, but it forms the basis that we're going to be using to build complex applications in the future. Hopefully everything's gone right while following along with this little tutorial, but if not the browser console is your debugging friend! I've barely scratched the surface of the possibilities of Drupal and SproutCore working together here, but this is turning in to a very long blog.

If I've made any errors or omissions, or if you'd like to ask some questions, feel free to fire away in the comments. Cheers!