A few weeks ago, I wrote a post for Cognition explaining my process for creating prototypes and how I arrived there. After being asked for more technical detail around my actual setup, I decided to create this step by step guide.
Note: This was written for those using a Mac running OSX 10.7 or later.
Step 1 — Install Xcode and the “Command Line Tools”
After Xcode is downloaded and installed, there is another step that I always forget about. I mean always… And it takes me a good 20 minutes of cursing trying figure out why my compiler is taking a dump. So here is what you gotta do: You open up Xcode and select “Preferences…” from the Xcode menu and manually install the “Command Line Tools” by clicking “Downloads” tab, and then the “Install” button next to the item in the list.
/images/blog/prototype-setup/install-commandline.png Install Command Line Tools
…AND you have to do this step every time you upgrade to the latest version of OSX as well.
###Step 2 — Install RVM and a non-system version of Ruby
I don’t like to muck around with the version of Ruby that comes installed with OSX. RVM (Ruby Version Manager) is a useful piece of software that lets you have segregated versions of Ruby installed at the same time. This lets us start from a clean Ruby enviroment every time, upgrade very easily, and not have to worry much about system configuration.
This is where you need to open up Terminal and get busy…
Install RVM & install the latest stable version of Ruby
Verify you a running on the newly installed “RVM” version of Ruby
The important thing to note here is the
/.rvm/rubies/ruby-1.9.3-p327. Your version numbers may be different, and thats ok but the path should be
/.rvm/rubies/ruby-x.x.x-pxxx. If you don’t see something like this, you should switch to the newly installed version:
This just tells your machine to switch to Ruby 1.9.3 installed by RVM. You may have a different version number installed by RVM, in which case you would run
rvm use 1.9.2 or
rvm use 1.9.4.
Step 3 — Install Git
The easiest way to install Git on an OSX machine is to download and install the Universal .dmg file from git-scm.com. There are other ways to do this from the command line, if you are a Homebrew user like me you can use:
Step 4 — Build your development environment
/images/blog/prototype-setup/active-projects.png Active Projects Folder
Create and/or open the folder where you might want to house all your prototyping projects. I like to use a folder called “_active” where all my current projects live.
Switch back over to terminal and CD (change directories) by typing
cd and then a space, do not press “Enter” yet:
Then drag the folder icon (in this case it’s called “_Active”) immediately following the space after
cd. Like magic, the full path to this location will appear after the
Now it’s time to get some development tools and start building:
</controversialname> is a pre-packaged set of tools and rake commands that I build with the help of my friend Stephen for quickly building HTML prototypes.
From your current location in Terminal run:
This will pull down a directory called “StrapOn” that you can use as a starter for your projects. A more detailed tutorial is in the works, but to get started
cd into the “StrapOn” directory:
Then install all the tools that are needed for this project by running:
If successful you should see something like this:
Start the StrapOn dev mode by running this rake command:
Voila, StrapOn has started a local server on your machine that you can use for development by pointing your browser to:
This also includes starts an auto-compiler for SASS, and all the built-in templating engine included in the Serve gem. Both of which will be explained in my next post about developing with StrapOn.