View
 

Hello World Tutorial 1: Getting Started

Page history last edited by Juan Pinzon 13 years, 10 months ago

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.