Setting Up Your First Development Environment in OSX

A friend of mine recently switched to OSX coming from Windows and needed help setting up his computer for web development. So I made this list of OSX tools and apps that hopefully you can also find useful to start setting up your first dev environment. I’ve also added a few bonus tools at the end that might not be considered super essential but (I think) are useful.

Get essential unix command line tools

Xcode Command Line Tools

Make sure you have the latest Xcode command line tool package. These include utilities and compilers including make, GCC, clang, perl, svn, git, size, strip, strings, libtool, cpp, what, and many other useful commands that are usually found in default linux installations.

This will ask you to install the Xcode

The essential installer for OSX

Homebrew

Probably the fastest and most popular way of installing software on OSX, Homebrew is a software package management system that makes installation of software very simple. It uses the command line and from there you can have access to a super huge repository of software from which you can install programs as well as update them.

http://brew.sh/

Get a better terminal

iterm2

As a replacement for the OS X supplied ‘terminal’, iterm2 comes with more options out of the box, including, split panes, auto complete, history, extensible configuration and more.

https://iterm2.com/

Go back in time and undo mistakes

GIT version control

Git provides history for content changes, it makes it easy because its fast, you can work offline, you can undo mistakes, collaborate with a team, etc. Git also comes as part of the

Xcode tools. http://git-scm.com/download/mac

get the node package manager

npm

The node package manager is probably best known for being the default way to manage Node.js modules. It also works for loading modules in front-end by using browserify or some other way to loading common.js modules in the client side.

https://nodejs.org/en/download/

Search for things faster

Ack

Ack is program written in Perl that makes it super easy to search inside your folders for filenames or text. It does deep searches through entire subtrees while ignoring Subversion, Git and other VCS directories and other files that aren’t your source code. If you’re already happy with

grep this might not be for you, but I found it easier to just type ‘ack “something” to find something under a folder tree.

http://beyondgrep.com/

Load multiple guest OSs

VirtualBox

Host and manage your virtual machines like Windows, Linux BSD, etc when you need to work on a different environment. Essential if you’re gonna test in windows explorer on a mac.

https://www.virtualbox.org/wiki/Downloads

Control your work environments

Vagrant

An easy way to manage particular Virtual Machines and configurations. Vagrant provides easy to configure, reproducible, and portable work environments. It makes Virtual Machines behave like software so you can put them under source control, or even download them and install them from a URL.

https://www.vagrantup.com/

Be more productive

Tmux

lets you switch easily between several programs in one terminal, detach them (they keep running in the background) and reattach them to a different terminal.

https://tmux.github.io/

Inspect the browser

Dev Tools in Chrome Canary

Canary is a version of the Chrome browser that is released daily, and automatically, for the Mac and Windows platforms. It’s also useful to have a separate browser where you can experiment, clear cache, cookies, sessions, etc. without messing your personal tabs on your main browser.

https://www.google.com/chrome/browser/canary.html I would also recommend getting console tools for Javascript frameworks like Backbone Debugger, Marionette Debugger, Angular Beatarang, Ember Inspector, React Developer Tools to debug these frameworks straight from your browser.

Choose a code editor

Code Editors

Sublime Text A sophisticated text editor with an amazing performance and plugin community.
Atom Backed by github, Atom is a very customizable editor built in node.js
VIM A command line interface editor that is highly configurable built to enable efficient text editing. It is an improved version of the vi editor distributed with most UNIX systems.
WebStorm An intelligent editor with support for many modern frameworks (like JavaScript, Node.js, TypeScript, etc). It features powerful autocomplete and advanced debugging capabilities.
Start your web projects faster

Yeoman

A command line utility that helps you generate projects skeletons so you can start projects faster. It generates code and tools that are usually best practice so you stay productive.

http://yeoman.io/

Bonus OSX tools:

Sync your files

Dropbox

This popular file hosting service is also very useful for developers. Say You want to sync your web projects across multiple computers having always the latest version. Or even setup git repositories to achieve file versioning. You can get some ideas on this article:

6 Dropbox Tips for Developers. http://dropbox.com

Organize your screen

Spectacle

Spectacle lets you organize your OS X windows by moving and snapping them using keyboard shortcuts. Split your screen with two apps side by side, or divide the screen in four equal parts.

https://www.spectacleapp.com/

Have access to quick API documentation

Dash

Dash stores snippets of code and instantly searches offline documentation sets for tons of APIs like xcode, python, sass, backbone, angular, mongodb, mysql, etc. It even integrates with your favorite editor so you can access the docs quicker.

https://kapeli.com/dash

Animated screen captures

LICEcap

Nice tool to capture parts of the screen as animated GIF files. I mostly use this to quickly capture UI behaviors and share them with coworkers.

http://www.cockos.com/licecap/

Image editor

Gimp

This is the free alternative to image editing software like photoshop. It’s gotten so much better lately. It’s cross-platform and works for Linux, OS X, Windows and more.

https://www.gimp.org/

Manage your DB services

LaunchRocket

A Mac PrefPane to manage all your Homebred-Installed services like Database services. Mysql, MongoDB, Postgres.

https://github.com/jimbojsb/launchrocket https://github.com/jimbojsb/launchrocket/releases