In my last post I mentioned that it was possible to build a static music app using Drupal as a backend and Pushtape Cassette as a static frontend. I have put off writing this tutorial because such a simple approach has some real limitations, but maybe it can help folks out there who are curious about decoupled architectures, and perhaps serve as a proof-of-concept and inspiration for your own project.
Cassette.json is a portable discography format incorporating the JSPF music playlist format, designed for data portability and readability, and intended to be used as a music schema for simple application development. In terms of an MVC framework, cassette.json acts as a model that sits between Drupal (controller) and Pushtape Cassette (view). For a more complicated site, a more robust API and architecture would likely be needed, but for a simple music site it is likely more than enough. Overall, I've found building for "static first" is a powerful way to reduce the complexity of any project and can increase site speed while also lowering the cost of long-term maintenance. For further reading on the advantages of static site generators, check out this introduction by Jekyll proponent Eduardo Bouças.
The backend of the site is handled in Drupal, meaning all content management and assets are managed there. The Pushtape Services module automatically updates relevant JSPF tracklists and generates a cassette.json file which is then connected to an instance of Pushtape Cassette. When changes are made in Drupal, cassette.json is updated, and in turn those changes are reflected in Pushtape Cassette.
Step 1: Install & Configure Drupal
Download and install the Pushtape Drupal distribution.
After installation, check the permissions for Pushtape Services. You need to make sure the JSPF and JSON endpoints are accessible to an anonymous user.
- Add some tracks and an album to your Drupal site if you haven't already. For best results, you'll want to add mp3s, artwork and liner notes. Note: Not all fields will transfer over to Pushtape Cassette (see "known limitations" below).
Add a new track.
Example of a full release with multiple tracks..
- Check that cassette.json is being generated. The path will be
http://yoursite.com/pushtape/services/cassette?callback=?and will probably just look like a blob of unreadable JSON when viewed in your browser. Note: The addition of ?callback=? ensures the server response is formatted as JSONP to prevent cross-origin problems. In the next section, we will use this URL to connect Pushtape Cassette to Drupal.
Step 2: Install & Configure Pushtape Cassette
Download and install Pushtape Cassette.
Open up index.html and make sure the base url is set correctly.
In index.html:
<!-- If installation is in subdir and pages won't load, try altering base href to /subdir/ -->
<base href="/"/>
This is particularly important if you have installed Pushtape Cassette in a subdirectory. For instance if your index.html file is located at http://yoursite.com/subdir/index.html then the base tag should be <base href="/subdir/"/>.
While you have index.html open, go ahead and scroll down to the bottom to app.settings. Set cassettePath to the JSONP path from the previous section.
// General app settings
var app = {};
app.settings = {
'cassettePath' : 'http://yoursite.com/pushtape/services/cassette?callback=?', // Path to cassette.json (if remote must be jsonp)
'cleanURLs' : false, // Set true to remove # from URLs
'homePage' : 'releases' // Default menu path for homepage
}
Step 3: View your new static site
That's really all there is to it. Now when you update your discography in Drupal, cassette.json will get updated and those changes will be reflected on your Pushtape Cassette site.
Known limitations
- The structured field content of albums and tracks is not fully supported. Only simple music tracks, artwork, and notes will transfer correctly.
- Only static pages in Drupal that are in the main-menu will transfer over to Pushtape Cassette -- dynamic views such as photos, news, shows, event listings, and other pages won't show up. Likewise, the menu structure from your Drupal site won't transfer over. Pushtape Cassette has its own routing system and supporting decoupled menu paths is beyond this tutorial.
- By design, theme settings and custom styles from your Drupal site will not transfer over to Pushtape Cassette. They are intended to be completely separate.
Hopefully this has shown you how you can use Drupal to create a simple decoupled static site using Pushtape Cassette. Despite the limitations, I really like how a static approach forces one to think very hard about separation of concerns, application structure, and data portability from the very beginning.