The SproutCore developer tools are easy to install using RubyGems. Once you are ready to deploy your application on the Internet, all you will need is a web server and no other special software since SproutCore applications are static HTML, JavaScript, and CSS.

Installing the SproutCore Developer Tools

If you have Ruby 1.8.6 and RubyGems 1.3.1 or later installed on your machine (and the Xcode developer tools for Mac users), then the SproutCore developer tools can be installed with just one command. If you don’t know if you have these things installed or you need to install them, visit Installing Ruby and RubyGems for more info.

Throughout this tutorial, commands for you to type at the terminal are presented in a mono-spaced font, with a dollar sign at the front, like this:

$ sudo gem install sproutcore

If you haven’t already, you should open up a command line now (use Terminal.app on Mac OS X), type in the previous command exactly (excluding the dollar sign at the front), and then press Return. (If you are in Windows, leave out “sudo”). If you are using 10.5.x (Leopard), you will first need to do
$ sudo gem install activesupport

IF YOU HAVE TROUBLE: Visit SproutCore Install Problems for help.

NOTE: For space reasons, I usually won’t show the output of the commands, so don’t worry if you see things printed to the console when you run commands. Most commands will print information to the console, and that’s okay.

If you have never used RubyGems before, installing SproutCore may take some time while the package system initializes. It may also ask you if you want to install dependencies. Just choose “Y” for each of these.

Once this commands finishes running, congratulations! You just installed sproutcore. The next sections will get you through the first steps setting up your first project.

Initialize a new SproutCore workspace

All SproutCore commands are designed to be run from the root of a SproutCore workspace. SproutCore doesn’t use the name of the workspace for any purpose. You can name it whatever you want.

$ sproutcore my_app

Here are the contents of a newly-created SproutCore workspace:

README sc-config.rb (required) clients my_app core.js english.lproj body.css body.rhtml strings.js main.js frameworks (a directory — initially empty) lib (a directory — initially empty) log (a directory — initially empty) public (a directory — initially empty)

Individual SproutCore applications are stored in the clients directory. As you can see, a SproutCore application (called my_app) was automatically created for you.

NOTE: The name of the SproutCore application was taken from the name of your SproutCore project workspace. You can rename it something else if you want, but the rest of the tutorial assumes you will leave it my_app.

Because SproutCore is a framework, a newly created SproutCore application is already functional. You can begin serving the application using sc-server and load it into your browser immediately.

If you need to, you can create additional SproutCore applications in the same workspace. Applications created in the same workspace will automatically share certain attributes, and can be served up simultaneously by the same sc-server while you are developing them.

For example, if you were creating a suite of applications for a single company, you could keep all of those applications in the same SproutCore workspace to avoid duplicating common resources.

Start the SproutCore development server

$ cd my_app $ sc-server

In development mode, you can make a change to your JavaScript, HTML, or CSS, save the file(s), and then reload your SproutCore application in the browser to see the changes. You don’t need to restart sc-server. To stop the server, hit Ctrl-c in the terminal window.

Load your SproutCore application into a web browser

SproutCore serves up files at http://localhost:4020/.

NOTE: pointing the browser here can generate errors (at least on OS X.4). Be sure to use the address below.

To load a specific SproutCore application, append the name of the application to http://localhost:4020 as shown below:

http://localhost:4020/my_app

Go ahead and click on the URL above to open it in a new browser window. Then delete the “my_app” placeholder and add the name of your app to the URL.

You should see the SproutCore welcome page. If you don’t, check the JavaScript error log for your browser and report the error to the mailing list, or through IRC at #sproutcore on irc.freenode.net. Someone will help you get the issue resolved.

Where to Next?

Now that you’ve setup and run your first application, you’re ready to start coding. Checkout the Hello World tutorial on the main site to build your first app.

Related Links

• Hello World – The official “Hello World” quick-start guide at sproutcore.com.
• Troubleshooting Common Startup Errors
• Install for Dummies – Windows – More basic instructions from a beginner on setting up SproutCore on Windows.

Comments

anteaya – eased in a change to the URL/my_app portion

bshirley – if your sudo command doesn’t work on your Mac, you may not be logged into an administrative account, on the Terminal command line, switch users (su admin) and login to an account that has administrative access, then sudo

meelash – added how to stop the server on a Mac, if someone could add for Windows, that would be great…