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.
You can download and install Xcode from Apple’s App store after creating a Developer Account.
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.
Install Command Line Tools
…AND you have to do this step every time you upgrade to the latest version of OSX as well.
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…
$ \curl -L https://get.rvm.io |$ which ruby
/Users/patrickmarsceill/.rvm/rubies/ruby-1.9.3-p327/bin/rubyThe 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:
$ rvm use 1.9.3This 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.
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:
$ brew install git/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:
$ cdThen 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 cd:
$ cd /Users/patrickmarsceill/Dropbox/_ActivePress “Enter”
<controversialname> “StrapOn” </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:
$ git clone git@github.com:pmarsceill/StrapOn.gitThis 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:
$ cd StrapOnThen install all the tools that are needed for this project by running:
$ bundle installIf successful you should see something like this:
Your bundle is complete! Use `bundle show [gemname]` to see where a bundled gem is installed.Start the StrapOn dev mode by running this rake command:
$ rake start
DEPRECATION WARNING: ActiveSupport::Memoizable is deprecated and will be removed in future releases,simply use Ruby memoization pattern instead. (called from require at /Users/patrickmarsceill/.rvm/rubies/ruby-1.9.3-p327/lib/ruby/site_ruby/1.9.1/rubygems/custom_require.rb:36)
StrapOn starting.....................
DEPRECATION WARNING: ActiveSupport::Memoizable is deprecated and will be removed in
Voila, StrapOn has started a local server on your machine that you can use for development by pointing your browser to: http://localhost:4000
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.