Categories

Related tags

My lovely Mac OS X web-development environment

09 August 2014

A few months ago I bought a new Macbook. I’m really fond of the development environment I set up on it. The more I work with it, the more I love it. However, while building the environment I couldn’t find any decent step-by-step manual. So, it took me for a while to get what I wanted. Here’s my experience.

Front-end environment

For the beginning we need a package manager. Here arises the first question: which manager is the best to use Homebrew, MacPorts, Fink or Rudix? I worked with the first two and found out that a need both. Sometimes you can find the latest version of particular software on the ports (e.g. svn), sometimes with brew (e.g. rhino). In any case you’ll need to install Xcode (at least Command Line Tools for Xcode).

For macports we just download the package and install it. Homebrew can be installed by the following terminal command:

If you happened to be not familiar with package managers, that’s nothing to worry about. They are pretty easy in use. You just need to type in the terminal window manager name, command (can be install, uninstall, load, unload, search, update, upgrade and others) and package name (can be with version number) :

brew install rhino

After getting package manager installed, we can take care of dot-files. Under OS X you can share the files (dot-files or hidden files) in which the commonly used utilities keep user preferences data. It got trendy among developers to share their dot-files. After Addy Osmani’s presentation at Fronteers 2012 I chose his set. In additions, it contains a nice shell-script, which installs a bunch of useful tools:

git-friendly - A collection of shell scripts for making pulling, branching, and merging with git fast and painless.

rvm - RVM is a command-line tool which allows you to easily install, manage, and work with multiple ruby environments from interpreters to sets of gems.

Now let’s install an accessible from command-line JavaScript engine. Apparently Mozilla Rhino is the most likely choice:

brew install rhino

As for me, I prefer PhantomJS:

brew install phantomjs

If you are using building scripts on your projects, I would strongly recommend H5Boilerplate Ant Build Script. Apache Ant is already available in OS X. So you can just adjust script configuration and simply run it. Moreover, the package contains a set of useful utilities such as CSS Lint, JS-Lint, JS-Hint adapted for Rhino, image optimizers, JS compressor and so on.

Being a web-developer you’re likely to use version control software. SVN can be installed by the command:

This way we map any folder of /Users/yourname/Sites/dev to the host http://folder-name.dev. Public files exposed by the host are located in wwwroot subfolder.

For the local DNS server we can user dnsmasq.

sudo port install dnsmasq

Next, we edit /opt/local/etc/dnsmasq.conf file and added the following lines to the bottom:

listen-address=127.0.0.1
address=/.dev/127.0.0.1

Now we enter OS X System Preferences -> Network -> {Wifi or Ethernet} -> Advanced… -> DNS and click on button at the bottom of the left hand panel and add 127.0.0.1 to the list of DNS servers. Drag 127.0.0.1 at the top of the list.

A few months ago I bought a new Macbook. I’m really fond of the development environment I set up on it. The more I work with it, the more I love it. However, while building the environment I couldn’t find any decent step-by-step manual. So, it took me for a while to get what I wanted. Here’s my experience

Who's the dude?

Dmitry Sheiko is a web-developer living and working in Frankfurt am Main, DE