My internship has finished. This blog will not be updated anymore. x

Setting up my dev environment

I'm writing this blogpost to share some experiences setting up my personal dev environment on Mac OS X 10.8.3.

Table of contents

Setting up your MAMP PRO server

MAMP brings server power to your desktop or laptop. It bundles a typical software stack you'd need to run web applications: an Apache web server, a MySQL database server and a PHP interpreter. Those are "AMP", and the first letter of MAMP stands for Mac because it's OS X only. I would recommend WAMP to the Windows users. 

MAMP is the easy part. Thanks to MAMP PRO, setting up a multisite installation is a breeze. I'd highly recommend buying MAMP Pro. MAMP Pro doesn't reinstall the stack. It's just a nicer interface to the MAMP panel. The interface lets you control MAMP more easily.

Virtual hosts

I start by configuring my localhost virtual host. When I visit http://localhost, I arrive at my webroot. I have my webroot folder inside my Dropbox folder, so I changed the path of localhost by choosing Disk Location on the Hosts tab. I also like to see my index of all the files and folders inside localhost, so I checked the Indexes checkbox:

MAMP GUI

You can configure the virtual hosts so easily with the Mamp Pro GUI. All you need is a name and fill in the Disk location. Or follow Dave Lens his zero-config development tutorial.

Facing the dragon: Internet Explorer

There comes a time when you need to test your website on different browsers including Internet Explorer 7, 8, 9, ... I use an automated installation of virtual machines. With a single command you can have IE6, IE7, IE8, IE9 and IE10 running in separate virtual machines. You will need Virtualbox to do this. Just paste this command in your terminal and get some coffee because it can take a while to download and install the virtual machines:

curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | bash

This will install all the IE versions (IE6, IE7, IE8, IE9, IE10) with their appropriate VM. If you want to specify what version to install, you can take a look at this Github. By the way, this is all made possible thanks to the modern.IE project.

To access your MAMP server on virtual machines or somewhere on your local network at home or work, you have to lookup your local ip. You can find this ip by going to system preferences > network, or use the ifconfig command in terminal.

Installing PHPUnit and friends

I had a hard time to use PEAR, the php packet manager, to install PHPUnit and other tools. PEAR comes pre-installed with the MAMP php versions, but it's not properly configured! I'll explain my steps so you won't have too much trouble installing them.

Preparations

To make things easier, we're gonna add the MAMP PHP executables to the $PATH. Make a new file called .bash_profile in your home folder and add the following code:

# Add MAMP PHP installations
PATH=/Applications/MAMP/bin/php/php5.4.10/bin:/Applications/MAMP/Library/bin:$PATH

export PATH

Then, execute the following command: source ~/.bash_profile in your terminal to reload your $PATH environment variable. You can test if the commands PHP and PEAR are the ones of your MAMP folder, and not your local php installation (yes, PHP also comes installed with OS X) like this:

$ which php
/Applications/MAMP/bin/php/php5.4.10/bin/php

$ which pear
/Applications/MAMP/bin/php/php5.4.10/bin/pear

I found that PEAR doesn't work immediately, even if you're working with the PEAR rolled in with MAMP! Make sure to change a few PEAR config settings, as they are originally set to usr/bin or usr/lib and not the php dir used by your MAMP installation. Run these commands:

  • PEAR executables directory: pear config-set bin_dir /Applications/MAMP/bin/php/php5.4.10/bin
  • PEAR documentation directory: pear config-set doc_dir /Applications/MAMP/bin/php/php5.4.10/lib/php/doc
  • PEAR directory: pear config-set php_dir /Applications/MAMP/bin/php/php5.4.10/lib/php
  • PEAR CLI/CGI binary: pear config-set php_bin /Applications/MAMP/bin/php/php5.4.10/bin/php
  • PHP .INI location: pear config-set php_ini /Applications/MAMP/bin/php/php5.4.10/conf/php.ini

I didn't do this at first, and kept me searching for hours because PHPUnit didn't use the right PHP version and the right PHP .ini file!

PHPUnit: test your code!

For years and years, developers would silently cringe when making each change. "Is it possible that I just broke the code? I'll better check!". Say hello to Test Driven Development.Write tests to check your code on every save. If you happen to break anything, your tests will notify you immediately! PHPUnit is a unit testing framework for PHP. 

To install PHPUnit, execute the following commands in your terminal:

$ sudo pear upgrade pear
$ sudo pear upgrade-all
$ pear config-set auto_discover 1
$ sudo pear install --alldeps pear.phpunit.de/PHPUnit

You have now succesfully installed PHPUnit. You can test if this works correctly by executing phpunit --version

$ phpunit --version
PHPUnit 3.7.18 by Sebastian Bergmann.

PHP Code Sniffer: stick to the coding standards

It's in human nature to bend the rules. But working in a team demands a strict coding standard. PHP Code Sniffer delivers automatic code validation against your team's coding standard.

To install PHP Code Sniffer, execute the following commands in your terminal:

$ sudo pear install PHP_CodeSniffer
$ phpcs --version
PHP_CodeSniffer version 1.4.4 (stable) by Squiz Pty Ltd. (http://www.squiz.com.au)

Composer: Easy packet management

You’ve definitely experienced the pain of working on a PHP application which uses third-party libraries and then trying to keep them and their dependencies up to date. Composer is a PHP dependency packet manager that can soothe your pain. 

To install composer:

# Download composer
$ curl -s http://getcomposer.org/installer | php

# Move composer to the bin folder
$ sudo mv composer.phar /usr/bin/composer

# Test composer
$ composer about

Build and deploy: Phing Capistrano

Imagine writing code, testing your code and if succesfull: deploy your code to the server and make changes to the database. This can all be done with a single command when you're using continuous integration. Phing helps to overcome such issues by automating tasks. It can for example run unit tests, apply database changes, deploy code, etc. 

To install Phing:

$ sudo pear install --alldeps pear.phing.info/phing
$ phing -version
Phing 2.5.0

NOTE: I'm using Capistrano to deploy php website's and it's great! Loving the simplicity.

Choosing the right editor: Sublime Text 2

Sublime Text 2 is a great editor, even out of the box. It's blazing fast and it has amazing features like the multi-cursor and multi-selection. But there are many third-party plugins available that will speed up your coding even more. 

The Nettuts+ tutorial is a great resource to learn Sublime Text 2, but I'll summarize some important things I learned.

Preparation & preferences

The first plugin I recommend installing is the Sublime Package Control plugin. This will help you to automate the installation of other packages and upgrading. To show the Command pallette, use CMD+Shift+P. Write "install" and press enter. Package control will now give you a list of packages. Just choose one and press enter to install! That's it!

The next thing I normally do is set my favorite theme in ST2. More than fifteen themes come pre-installed with ST2. I prefer to use the Blackboard theme. Go to Preferences > Color Scheme > Blackboard to activate the theme. You can configure almost everything inside Sublime Text 2. If you go to Preferences > Settings - User, you can override the default ST2 preferences. Here's my preferences list:

{
	"color_scheme": "Packages/Color Scheme - Default/Blackboard.tmTheme",
	"default_encoding": "UTF-8",
	"detect_indentation": true,
	"font_face": "Monaco",
	"font_size": 12.0,
	"highlight_modified_tabs": true,
	"ignored_packages":
	[
		"Vintage"
	],
	"open_files_in_new_window": false,
	"tab_size": 4,
	"translate_tabs_to_spaces": false,
	"trim_trailing_white_space_on_save": true,
	"word_separators": "./\\()\"'-:,.;<>[email protected]#%^&*|+=[]{}`~?"
}

You can also customize your key bindings. Go to Preferences > Key Bindings - User. Here are my keybindings. Some of them are configured the way I like to use them, some of them are reconfigured to use them with Azerty instead of Qwerty. Just try what fits you best.

[
	// Square brackets aren't that usable in azerty.
	{ "keys": ["super+shift+ù"], "command": "prev_view" },
	{ "keys": ["super+shift+$"], "command": "next_view" },

	// Unindent code with shift+tab
	{ "keys": ["shift+tab"], "command": "unindent" },

	// Comments, just press cmd+/ or cmd+shift+/
	{ "keys": ["super+:"], "command": "toggle_comment", "args": { "block": false} },
	{ "keys": ["super+alt+:"], "command": "toggle_comment", "args": { "block": true} },

	// Default console toggle shortcut (ctrl+`) does not work in azerty. Press [email protected] instead
	{ "keys": ["[email protected]"], "command": "show_panel", "args": {"panel": "console", "toggle": true} }
]

Must-have plugins:

  • Emmet will let you code in overdrive! It can convert syntax for example #main>.container>ul>(li>a[href="#"])*6 to a full code-block with main div, container div and an unordered list with six list-items, and it has even more advanced features! Same thing for writing CSS. Everything can be written shorter and faster. Be sure to follow this video tutorial.
  • SublimeLinter can check your code for syntax errors on every save. This has saved me a lot of time by warning me for stupid mistakes.
  • Prefixr will convert your CSS3 properties and add all the browser vendor-specific prefixes! Just press CMD+CTRL+X and that's it!
  • DocBlockr will let you write documentation in PHP, Javascript, C, etc in a breeze.
  • ColorPick is a plugin that fixes something I used frequently in Coda. When you're writing a color in CSS, pressing CMD+SHIFT+C will show the apple color picker to edit that color. 
  • AutoFileName will autocomplete the path when typing an url (in CSS, HTML, ...). Very usefull!
  • Gist will let you automatically create a Gist.
  • Tag offers advanced features for HTML tags, and will also autoclose the tags when writing them.
  • jQuery plugin gives you more support for jQuery. Be sure to set the syntax of your script to jQuery after installing.
  • Also worth checking out: GitGutter, HTMLTidy, Markdown Preview, SidebarEnhancements

Customize your terminal

As a developer, you'll use the terminal A LOT! So I've customized it to be somewhat more colorful and more readable thanks to this tutorial. I used the Solarized Dark theme. You can download the .terminal file on this git page. Just open it and it should be installed. Check your terminal preferences and configure the theme as default:

Terminal themes

I configured terminal to use the free monospace Inconsolata font at 15pt. I also made my window larger by setting the columns to 130 and the rows to 30 in the terminal preferences. You can also customize your terminal output, just install OH-MY-ZSHELL:

$ curl -L https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh | sh

You can make your own theme with its specific terminal prompt output. Follow the tutorial If you want to do that.

I removed some of the useless code in the tutorial. This is my theme I used:

PROMPT='%{$fg_bold[red]%}➜ %{$fg_bold[green]%}%p %{$fg[cyan]%}%c %{$fg_bold[blue]%}$(git_prompt_info)%{$fg_bold[blue]%} % %{$reset_color%}'

ZSH_THEME_GIT_PROMPT_PREFIX="git:(%{$fg[red]%}"
ZSH_THEME_GIT_PROMPT_SUFFIX="%{$reset_color%}"
ZSH_THEME_GIT_PROMPT_DIRTY="%{$fg[blue]%}) %{$fg[yellow]%}✗%{$reset_color%}"
ZSH_THEME_GIT_PROMPT_CLEAN="%{$fg[blue]%})"

This is the result:

My terminal

Conclusion

These are some of the tools I use daily on my mac. Offcourse there are a lot of other tools I use:

  • PHPStorm 6, to code PHP. I still prefer to use PHPStorm over Sublime Text because of his powerful debugging features. 
  • Alfred app to launch applications lightning fast.
  • CodeKit to build websites faster & better.
  • Hammer app to build static html pages very fast.
  • Transmit, my favourite FTP app.
  • LiveReload, to refresh my page after every code edit.
  • Tower, favourite powerful Git client. 
  • Sketch, to do design work. Highly recommended.
  • Gitifier, notifies you when there are new commits to a git repo.
  • Kaleidoscope, git file comparison.
  • Wunderlist, to make to-do lists.

If you have tips & tricks or remarks, I'll be happy to read them in the comments section!

Nick K

Nick K

5 years ago

Thanks man!!! Some of these settings saved me hours!

Jamie

Jamie

5 years ago

Thanks for sharing this info, it really helped me out!

Write a comment