SproutCore Build Tools 5-minute Tour

Step 1: Install the new build tools - here.

(If you already have them, then go ahead to step 2).

Step 2: Create a SproutCore app

sproutcore example
cd example
sc-server

Now you can visit your new app at: “http://localhost:4020/example”: http://localhost:4020/example .

Step 3: Run a few generators

Create a model, view, and controller for your app. Cd into example and do:

sc-gen model example/contact
sc-gen controller example/detail
sc-gen view example/card

Browser through the source in clients/example to see all the classes created for you. Note that tests were also created along with fixtures for the model data.

Step 4: Edit the views

Edit the contents of clients/example/english.lproj/body.rhtml. Refresh the page and admire your work. You can create some views here too. For example, replace the contents of body.rhtml with:

<% content_for('body') do %>

<%= button_view :my_button, :label => 'Here is a functioning button!' %>
<% end %>

You can also edit the CSS files here if you want.

Step 5: Checkout the unit tests

Visit http://localhost:4020/example/-tests. The tests actually run! They don’t do much yet; that is your job.

Step 6: Check out the documentation.

Visit http://localhost:4020/example/-docs. Click on “Generate Docs” in the upper right hand corner. These docs are generated from the inline comments you place in your source. You can also get the same thing for SproutCore. Just visit http://localhost:4020/sproutcore/-docs and click “Generate Docs”. (This may take a few minutes to run the first time; but they are cached after that.)

Step 7: Build your output

In the example directory run:

sc-build

Look inside of a new directory created called tmp/build. You should see some prepared html, JS, and CSS ready for upload to your server. This automatically detects all of the frameworks required by your apps and builds them too. Built HTML is setup to properly handle caching and to optimize load times.

Step 8: Follow the Tutorial

The Hello World tutorial will give you a great introduction to using SproutCore.