Hardcore Development Setup

Expanding on Chris Mallinson awesome tutorial we have fine-tuned this guide for our WordPress setup and made some updates for the latest version of OSX which we will endeavour to keep up to date.

After toying with Vagrant boxes for a year or two, we have gone back to the simplicity and “always on” speed of this native setup. The only downside is it can be tricky to setup and easy to break.

1. Xcode

To start your journey, you will need to set up Xcode, Apple’s own software development bundle.

• Grab Xcode from the App Store or (for all OS X Mavericks 10.9 and higher) run the below command in terminal.

xcode-select --install

• Click Install on the dialogue box and wait for it to complete.
• Once installed, you will need to start up the app (the tools won’t work unless it has been started up at least once) then accept the licence agreement close the app.

2. Homebrew

• Now install Homebrew, a popular package manager for OSX, by running the below command.

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

3. MySQL

• Next, install MySQL by running the below command. If you’re having issues, try installing version 5.7.


brew install mysql

4. DNSMASQ

Finally, install dnsmasq by running the below command. This allows wildcard subdomain names.

brew install dnsmasq

cd $(brew --prefix); mkdir etc; echo 'address=/.localhost/127.0.0.1' > etc/dnsmasq.conf

sudo cp -v $(brew --prefix dnsmasq)/homebrew.mxcl.dnsmasq.plist /Library/LaunchDaemons

sudo launchctl load -w /Library/LaunchDaemons/homebrew.mxcl.dnsmasq.plist

sudo mkdir /etc/resolver

sudo bash -c 'echo "nameserver 127.0.0.1" > /etc/resolver/localhost‘

5. Apache

• Now we have to set up Apache, a cross-platform web server which is where we will store our web files. Run the below command to get this started.


sudo apachectl start

• Test this is working by heading over to http://localhost/ in your browser of choice (we suggest Chrome). You should see a page that says “It Works”.

If it’s working, the easy part is done!

Now we need to make a few quick changes to the configuration files.

Edit the http.conf

• First, we need to navigate into the http.conf file. Use the command below.

sudo nano /private/etc/apache2/httpd.conf

• Now use the terminal search feature (Ctrl + W) to find and uncomment (remove the ‘#’) the following lines:

#LoadModule php5_module libexec/apache2/libphp5.so

#LoadModule vhost_alias_module libexec/apache2/mod_vhost_alias.so

#Include /private/etc/apache2/extra/httpd-vhosts.conf

For Mojave, High Sierra, or PHP 7 uncomment:

#LoadModule php7_module libexec/apache2/libphp7.so

• Next, using the same search (Ctrl + W) find and comment out (add a ‘#’ in front of each line) the following lines:

AllowOverride none

Require all denied

This will give Apache full access to your file system and help direct all your files and virtual hosts to the right places.

• Now give writing access to all your site directories by running the following command. Search for your username and then ensure that group is changed to staff as seen below. User should be set your user. Use whoami in terminal to check your username.

# If you wish httpd to run as a different user or group, you must run
# httpd as root initially and it will switch.
# User/Group: The name (or #number) of the user/group to run httpd as.
# It is usually good practice to create a dedicated user and group for
# running httpd, as with most system services.
#
User example_user
Group staff

Edit httpd-vhosts.conf

• First, we need to navigate into the httpd-vhosts.conf file. Use the command below.

sudo nano /private/etc/apache2/extra/httpd-vhosts.conf

• Look for the following lines, and ensure that yourusername matches your username. Also check that /Users/yourfolder/www/sites/%1/public matches you website locations!

<Directory "/Users/yourusername/www">
Options Indexes MultiViews FollowSymLinks
AllowOverride All
Require all granted

VirtualDocumentRoot "/Users/yourfolder/www/sites/%1/public"
ServerName sites.localhost
ServerAlias *.localhost
UseCanonicalName Off

Note: .dev no longer works as Chrome now forces to HTTPS via preloaded HSTS.

• Now restart Apache by running the following command.

sudo apachectl restart

• Test this is working by adding some files to a new website folder at the path you defined in httpd-vhosts.conf and you should be able to view it at your foldername.local in your browser.

Updating OSX

• Before you update your OSX, make sure to backup your httpd-vhosts.conf file as this will most likely be overwritten! If it’s too late, you will need to recreate this file as above.
• After updating, find your way into your httpd.conf file and confirm that all the correct lines are edited. This is extremely important as they will most likely has been altered during the system update!

Troubleshooting

• Check your user/group set are correct in httpd.conf
• Check the path set in httpd-vhosts.conf matches your folder structure
• Check for sneaky hidden .htaccess files in your documents folder
• If you are getting a server error, check your error log in /var/log/apache2/

Did you give this setup a try? We’d love to hear your feedback or additional tips for making the most of your development setup!