This list in not exhaustive, just my bare minimum for frontend purposes. I’m not dealing with Rails, PostgreSQL, MongoDB or other server tools since it’s not my day-to-day use. Just yet. It’s surprising that you need so many console tools these days to do frontend, but things fall apart, and most of them really improve your performance in many ways.
Installation for one or multiple users would be the same, but there are tasks we will perform as admin user so that we can share part of the environment across multiple users, who will only need to configure personal data (Git, $PATH, Sublime or other editor, …). We are using Mountain Lion but the following should work the same in older systems, down to at least Leopard or Snow Leopard.
Developer environment installation by admin user:
- If we are going to use the complete Apple developers set up, including iOS simulators, we need to install XCode (from the Mac Store), then open it, preferences, downloads, install command line tools and the needed simulators.
- If we don’t need iOS simulators, just go to https://developer.apple.com/downloads and download, then install the Command line tools for your system. It’s around 200Kb only.
- Open a Terminal window and check if you have properly installed build tools:
(it should return /usr/bin/gcc)
- Then we will install homebrew, a nice package manager for OS X, from the terminal:
ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"
- We are going to install Git now to have a control version in our projects without the need of a centralised repository:
brew install git
- Update homebrew now:
- Install rbenv to manage different versions of Ruby:
brew install rbenv
To use Homebrew’s directories rather than ~/.rbenv add to your profile:
brew install ruby-build
- We are going to install Compass, a CSS framework that uses Sass stylesheets (make sure you code your Sass with ‘compass watch’ running in a terminal tab):
sudo gem install compass
brew install node
We recommend prepending the following path to your PATH environment variable to have npm-installed binaries picked up: /usr/local/share/npm/bin
npm install -g grunt-cli
- Now you can install grunt locally on each of your project’s folder (even a specific version for each project). Best approach is following offical Getting started and create a package.json, then use
npm install --save-devto install npm modules locally
brew install phantomjs
- Install nanoc, a nice static site generator
sudo gem install nanoc
If we need the preview server of nanoc we need to install it::
sudo gem install adsf
We can use other preview servers, like Apache from our system, MAMP or even a LiveReload server.
- Install MAMP, which lets you have Apache, MySQL and PHP environment in a second.
- We are going to configure /etc/hosts file according to this tutorial: How to use vhosts in Wordpress development.
- Install Go2Shell (from the Mac Store), which opens a terminal window to the current directory in Finder. We just need to drag the app to the icons bar in Finder.
- We install Chrome now, with LiveReload, Web Developer, YSlow plugins.
If you’re going to use Wordpress, I recommend installing wp-cli so you can perform admin tasks from the terminal. You will need to add an alias for mysqldump
sudo ln -s /Applications/MAMP/Library/bin/mysqldump /usr/local/bin/mysqldump
Now you can go to your wordpress project folder in terminal and, for instance, perform a database backup just typing
wp db export
Developer environment config for each non admin users:
We have most of the environment set up ready, we just need some personal configurations. These will be performed by each non-admin user of the machine:
- Open Finder and customize sidebars
- We are heading to our personal folder ~/ and create an Applications folder. We are going to use this to install our programs, since /Applications will be used by programs installed by the system or admin for all users.
- Install Dropbox (disclaimer, this is a recommendation link, both you and me will get extra space). Dropbox will let you have some Gb of your data backed up in the cloud and synchronized across your computers. It will require admin permissions to the folders in order to be installed.
- Open /Applications folder and drag the app to the icons bar in Finder.
- If you’re like me and prefer your finder to reveal hidden files, open Terminal and type:
defaults write com.apple.finder AppleShowAllFiles -bool YES
- Copy your public/private SSH keys from an older computer. If it’s the first time you need these (Git, for instance), just create your keys.
- To configure your Git user, we can copy ~/.gitconfig from an older computer into ~/ or:
git config --global user.name "Your name"
git config --global user.email firstname.lastname@example.org
- Install SublimeText2 into our personal ~/Applications. You can buy it too! Or use Textmate, vim or whatever.
- We need to create a folder for our binaries, type this in Terminal:
- We are enabling Sublime access from terminal, pointing to a symlink in our bin (beware, link takes to the Sublime we just installed in our ~/Applications)
ln -s ~/Applications/Sublime\ Text\ 2.app/Contents/SharedSupport/bin/subl ~/bin/subl
- If we open a new terminal window or tab (cmd+t) we should be able to open Sublime by typing
- Install Sublime user prefs from an old computer, or use mine if you like them https://gist.github.com/zigotica/4954546
- Install the package with color and typography settings (I keep a copy in Dropbox), usually found in
“~/Library/Application Support/Sublime Text 2/Packages/Color Scheme - Default”
- Install Package Control from View > Show console, following these instructions
- We can now install these packages from Package control: Emmet (previously known as Zen code), SuperCalculator (nice for px/em conversions), GitGutter (awesome, to see changes in gutter from last Git commit)
- Install your .bash_profile from an old computer into ~/ or https://gist.github.com/zigotica/4523081
- Now you check if your .bash_profile includes PATH to our bin, grunt, and other tools:
- Alternatively, much better approach is separate each path into a specific var (thanx @happywebcoder for the tip):
- Open Chrome and authenticate with your login/password in order to start sync’ing our favorites, plugins, and so on.
- If we are going to develop responsive sites (or sites adapted to be viewed in mobile gadgets) you will want to install Adobe Edge Inspect which lets you synchronize what you see in your browser to your mobile device, instantly, and even inspect your device for a debug session.
Other programs you may like:
I don’t work nor get anything from the following, I just think they are awesome apps:
- We love TotalFinder, your Finder with Tabs! Buy it, it’s worth it.
- CloudApp is an awesome service that stores screen captures and other files in the cloud.
- Buy and install Transmit FTP, but don’t forget to use Git locally :-)
- Buy and install Divvy a cool app that lets you manage your windows size very easily with shortcuts.