Welcome to SproutCore! SproutCore is a powerful framework that makes it easy to build desktop-quality JavaScript applications on the web. This tutorial will take you through the basics of creating a new SproutCore project and making your first views. This is a work in progress, so please send feedback or ask questions as you work through this!
Step 1. Installing SproutCore
IMPORTANT: To set up SproutCore 1.0 please see this page.
If you haven’t yet installed SproutCore, it’s really easy if you have Ruby installed on your machine. Just type:
sudo gem install sproutcore
And you are done! (Note that if you are on a Mac, you will need the developer tools installed as well for Ruby to work.) If you have further issues, you can find more info on our download page.
If you are on a machine without Ruby, if you are on Windows for example , or if the above install fails for you, visit theSproutCore Download Page for some (slightly) more involved ways to get going.
Step 2. Creating Your First Project
NOTE: If you are using the SproutCore 1.0 BETA not installed using RubyGems, you will need to use the path to these tools.
SproutCore comes with a complete set of build tools that will automatically assemble and optimize your HTML, CSS, and JavaScript. The first thing you want to do for any new site is to create a new SproutCore project to keep all of your files. To do this, just open your terminal, switch to a directory you want to work in and type:
sc-init hello_world
This will create a new project for you with all of the basic files you need to get started. If you open up this folder, you will see a directory called “apps”. This is where you will keep each SproutCore app you build for a site. Each web page you load with SproutCore on it will be a separate client. You can see here that SproutCore has created your first client for you, conveniently named “hello_world”.
cd into the root directory of your project (the one with the clients directory in it) and start the SproutCore server. This server dynamically assembles your content while you develop your code. To start it, just type:
cd hello_world
sc-server
And you’re good to go. Open a web browser (FireFox or Safari for now) and visit http://localhost:4020/hello_world, you should see something like this:
Great! You have SproutCore up and running. Now let’s start writing some code.
Go to Hello World Tutorial 2: Your First Views
Comments (7)
David Casseres said
at 9:16 pm on Dec 19, 2009
In addition to Firefox and Safari, everything I've tried with SproutCore works fine in Chrome Beta.
Frederik Heyninck said
at 2:50 pm on Jan 11, 2010
The sproutcore server seems to be very slow.
Juan Pinzon said
at 5:29 pm on Jan 14, 2010
It's not a production server , it's just a set of dev tools that are constantly building your app if you change the source code. Also the "server" is returning one by one without compression all the javascript files, those can be a couple dozens of files. Once your app is ready, you use sc-build to do a production build of your app that results into 1 html, 1-2 css files, 1-2* js. That build can be deployed in any server as they are just static files.
Stevie Graham said
at 4:44 am on Feb 17, 2010
I agree that sc-server is especially slow. It pegs my CPU at 100% for 10-15 seconds each request. Granted it is not a production server, but this performance also makes it unsuitable as a development server. Fast iterative development is impossible with sc-server.
Juan Pinzon said
at 6:52 pm on Feb 15, 2010
I updated and confirmed that this tutorial works by just copying and pasting the snippets of code. There were some outdated snippets of code that might have broken the styling but in general everything worked.
Tim said
at 2:49 am on Mar 21, 2010
Whats the path to sc-init likely to be on linux machine?
Tim said
at 2:54 am on Mar 21, 2010
/var/lib/gems/1.8/bin/
You don't have permission to comment on this page.