WordPress Development from Dropbox with MAMP, Git and git-ftp (on Mac)

I work on 2 different computers almost on a daily basis. For me it makes sense, developing WordPress websites, taking a bit of pressure of my server, to have a local copy. When you are done with a section/function of the work, to deploy those changes to a remote copy, for it to update. With this, it also makes sense to have the local copy synced between the two computers I use. Thinking about it, I thought in that case, it can can work to have the local development, using MAMP, in my Dropbox rather. I decided to use Git as my (distributed) version control system, that track changes made to the source code. And git-ftp, to deploy all my work to a remote server.

In this blog post I run through the process I undertook (there are obviously more ways about it) and I will mention some hick-ups along the way and how I overcome it!

1. Setting up MAMP in Dropbox

To start off, I followed the first few steps of a post on WP Tuts Plus – WordPress Development and  Deployment With MAMP, Git and Dropbox. Below are the steps I followed with a few of my comments:

Step 1: Create Directory Structure in Dropbox

Please note, the one folder’s name should change from ‘vhost’ to ‘vhosts’. You will see in a later step where it is important. This has not been updated in the post under this heading.

Step 2: Install and Configure MAMP

Step: Change MAMP – Apache Configuration
In this step, I personally find it easier to do this through Terminal. With the last step you should be in the Applications/MAMP folder from Terminal. With the following command, change directory to go where the httpd.conf file is:

$ cd /conf/apache/

Use the following command to add the two necessary lines (remember to update the YOURUSERNAME bit) to the file and save:

$ sudo nano httpd.conf

Step: Setup Apache Virtual Host on MAMP
With this step you actually need to create the local-development.conf file in your conf folder located in Dropbox/Development that was created earlier. You can do this by following the next few steps in Dropbox.

$ cd ~/
$ cd /Users/YOURUSERNAME/Dropbox/Development/conf/
$ touch local-development.conf

The touch command creates the new file. Then use the following to add the content as per the post:

$ nano local-development.conf

Step 3: Setup WordPress

This step shows where/how to add the new hostname to map to the localhost IP Address by adding it to /etc/hosts. This can be located in the private folder, which is a hidden folder. To locate the file, you can also use Go from the top Finder menu and search /etc/hosts. I would once again rather do this from Terminal by inputting the following:

$ cd ~/
$ cd ../../
$ cd private/etc
$ sudo nano hosts

There you can add 127.0.0.1   www.site.dev under the other content of the file. Save and close. Follow the rest of the instructions of that section (end of ‘Setup WordPress’) in the blog post.

2. Xcode and Command Line Tools

With a few mysteries and hickups in my path of getting all of this working, including Git and git-ftp, I realised now is a good stage to make sure you have Xcode installed. This is to run the shell script mentioned later in #3 in my post. And also to install Command Line Tools from Xcode, which is necessary for the method I used to install git-ftp.

After installing Xcode from the App store, go to Xcode > Preferences > Downloads and select to install Command Line Tools. Doing this and installing Git and git-ftp, needs to be done on both (all) computers you are syncing to your Dropbox development area.

3. Installing Git

To install Git, I used the Git OS X Installer. You can find it on the git-osx-installer page on Google Code, and click Download the packages here. Download the latest image; in my case, that was Git 1.8.1. Mount the image and install the package inside. You should also run the shell script in the Git image.

I got my hands on Getting Good with Git by Andrew Burgess. This little book gives a thorough explanation of different methods for installing Git (Mac and PC) and still serve as a good quick reference. It includes an intro to Terminal and Git commands and understanding Git. Below I will discuss just a few of the absolute basics from the book. You can find loads more at Git’s official website.

Configuring Git

First you need to configure Git with your own information. Execute the following in Terminal (replace name and email with your own…):

$ git config --global user.name Semblance 
$ git config --global user.email semblance.design@gmail.com

There are quite a few other configuration settings that can be used. I have used this one: all the programming languages I use are whitespace independent, thus set it to:

$ git config --global apply.whitespace nowarn

Using Git

$ git init
Run this command in the project directory and you’re ready to use Git to manage your project.

$ git status
This gives you important/useful information about your git status. The first line tells you on which branch you are on. The next line show a list of untracked files if they have not been committed. If you have nothing to commit it will tell you so.

$ git add .
This command tells Git to track the files and move it into the staging area.

$ git commit
This will basically make the snapshot of the project at the current stage. For every commit you make, you have to supply a description of the commit. This is handy for future reference, especially when you need to revert back to previous stages of the project.

.gitignore
In your project directory, you can create a file called .gitignore. This enable you to make a list of file names that we want Git to ignore for the next staging. Even if changes has been made to it. A good example is wp-config.php file. This will always be different to your remote copy and best not to overwrite!

4. Install and use git-ftp

I use Resmo’s git-ftp. From the installation page on github I followed the first option: installation for Linux/Unix based systems. This is where you need the Command Line Tools from Xcode installed, because it use the make command for the installation.

You can install git-ftp anywhere on your hard drive, but I preferred to change the directory to Applications using Terminal. The run the following commands:

$ git clone https://github.com/resmo/git-ftp.git
$ cd git-ftp
$ git checkout master
$ sudo make install

With that installed you go to you project folder from Terminal. Here you should have your project’s Git repository already. Then you need to authorise the ftp push with some ftp credentials, that project is using. I use the following command:

$ git ftp init -u username -p - ftp://example.com

This will prompt for the ftp password and then you can do the initial push. After that, when you have done a git commit, you simply need to use: git ftp push. This will deploy the changed and new files to the remote server. I have came to realise that there is a limit of 1700 files that can pushed/uploaded at a time. With the initial push of WordPress, I delete the theme files that comes with WordPress, that I know I will not be using for the project.

There are more usage options and more information about more commands at the man page.

5. Find out more

Last year at London WordPress Meetup, Rob Miller gave a great presentation on Developing with WordPress and Git. He is sharing his presentation online, make sure to view it on SlideShare (slide 107 has a useful list of resources…).