Skip to content

Using BPM with SproutCore 2.0

wagenet edited this page Sep 14, 2011 · 10 revisions

BPM makes it easy to get started on a new project using SproutCore 2.0. I would like to see this further simplified in the future, but for now these steps should get you going:

Create Your New App and Add Dependencies

On the console do the following:

bpm init hello_world
cd hello_world
bpm add sproutcore --pre
bpm add spade

This will add sproutcore as a dependency on your project and use the spade module loader to manage your app code. Spade is not required to build a SproutCore app but it is highly recommended since it will minimize your app load time on mobile and make it easy to break your code up into loadable modules later on.

Add The Spade Bootstrap

Since your app is being managed by Spade for module loading, you will need to add a little code to your index.html to bootstrap your app on page ready. [NOTE: This should be actually built into spade at some point in the future - hopefully this is just temporary. But this code will always work.]

In your index.html file, just below the script that loads bpm_libs.js add:

  <script type="text/javascript">

Of course, replace hello_world with the name of the app you supplied to bpm init earlier.

Just to test this, open the file in lib/main.js and add this line:


Preview Your App

Now start your preview server and make sure it works. On the console:

bpm preview

Then open http://localhost:4020/index.html. When the page loads you should see the 'HELLO' alert appear. If it does then everything is bootstrapped correctly and you can go onto the next thing.

Adding Support for Templates

OK now that everything is basically working, we want to get some basic SproutCore files setup so you can start writing your app. First things first, we are going to want a templates directory where we can keep our Handlebars templates.

Create a templates directory at the top level of your app and then open your hello_world.json file. This is the project file that is used by BPM to configure how it does builds. We want to add the templates directory here. Find the line in the JSON file where it says directories in the bpm_libs.js section. You should see "lib" listed there now. Add "templates". It should look like this:

"bpm_libs.js": {
  "files": [
    "lib", "templates"
  "minifier": "uglify-js"

While you are here, let's add a version number for the project. This will be useful for keeping track of your deployed app version down the road. Look for a top level key named "bpm". Just below that add:

"version": "0.0.1",

Setup Your App Namespace

Next we want to add a core.js file where you can define your application namespace:

create lib/core.js:

require('sproutcore'); // load sproutcore dependencies
HelloWorld = SC.Application.create({
  VERSION:  require('hello_world/~package').version

Create Your First Template

Next, let's create a starter template for you also:

create templates/main_page.handlebars:

Congratulations!  You are running HelloWorld v{{HelloWorld.VERSION}}

And in finally we need to update your main.js file so that it creates a view to use the template and displays it. Add the following, replacing the alert() you added earlier:

in lib/main.js:

require('./core'); // make sure the app namespace loads first
   templateName: 'hello_world/~templates/main_page'

Try It Out!

Now kill your bpm preview if it is still running and restart it. Then visit http://localhost:4020/index.html

You should see a page that says "Congratulations! You are now running Hello World v0.0.1"

You are all set to go!

Adding Other Dependencies

At this time you can also add any other dependencies you might want. For example, I like to write my apps in CoffeeScript so:

bpm add coffee-script

Note that SproutCore 2.0 does not ship with the SproutCore DataStore or Touch system as part of the default bundle. If you want to add these two you can do so now as well:

bpm add sproutcore-datastore sproutcore-touch --pre

Also, I like to use a CSS framework to make skinning easier. Currently skeleton is published:

bpm add skeleton

To see a complete list of the packages available visit or you can use

bpm list --remote
bpm list --remote --pre

To see both officially released and pre-released packages.

Something went wrong with that request. Please try again.