Spotify Boilerplate App

Posted May 15th, 2021 • 3 min read

A while ago we were proud to be releasing 2 of the very first Spotify Apps in the Netherlands at NoProtocol. For a long time since I've been planning on creating a Boilerplate in which we could put all the best practices and redo some stuff in hindsight.

And finally, it's here! You can grab it at

For a bit more in-depth information, read on ..

The Boilerplate project aims to provide a foundation upon which you can start building Spotify Apps. It takes away the hassle of writing the necessary boilerplate code and is structured so you can start developing straight away.

I will add to it as I stumble upon free time, but feel free to open a Pull Request or submit an issue for a suggestion

Some of the features

How to set it up (on your Mac)

  1. Sign up for a developer account on Spotify
  2. Open Terminal, and if it doesn't exist yet mkdir ~/Spotify
  3. cd ~/Spotify
  4. git clone
  5. Download the latest version of Spotify
  6. Open Spotify and type spotify:app:boilerplate in the search bar

What's in the Boilerplate

The aim is to keep the Boilerplate as clean as possible, while giving all the tools to quickly develop your app.

How to work with it (the short version)

What you want to look for is js/app.js. Once index.html has been loaded by Spotify it will fire off our Sammy instance:

$(document).ready(function () {"/home");

Here you can also handle any other bootstrapping you might want to do.

Next up, the Sammy route gets invoked:

this.get("home", function (ctxt) {
    function () {
      // Callback actions

This is what you will most likely expand on for your app. The route loads a Mustache template into the DOM, parses it, asynch-y fill in the Spotify details, and cache it. After that it will run your callback actions, should you need to.

loadSection takes 5 parameters at the moment:

ctxt A reference to the Sammy.Context which was passed to the route

ID A unique identifier for the content which is used as a cache-key

Template File location to the Mustache template

JSON Location location to the JSON you want to use. This is useful if you want to connect your app with a (RESTful) web service to feed content to your app. NOTE: If you use absolute URLs here you should add the domains to your manifest.json

Callback This callback function you can use to do your post-processing


The boilerplate relies on a couple of libraries:

Sammy.js for the routing, templating parsing and content swapping. It's just an awesome little tool

jQuery as we've all become used to it at some point

Mustache as a template handler. This can just as well be any of the other gazillion templating engines out there, so feel free to hack your favourite in.


More posts

May 15th, 2021 • 35 min read
Exploring the options we have as developers to retrieve a large dataset. We will go through the process of finding the data we need, and then write the code to make that date ours in a format we can use.
May 15th, 2021 • 12 min read
Maintaining a local server for your projects can become cumbersome and can cause conflicts with your co-workers. Streamlining this with Docker makes sure everyone is in on the same page.
May 15th, 2021 • 1 min read
How to use sessions within your unit tests using PHPUnit and CakePHP