Introduction
In a recent group Skype chat of fellow WordPress developers, both new and experienced, some questions came up and we began talking about how to set up our local development environments. Some of the newer developers were asking questions about what packages to go with and if it was worth spending the money on professional versions of software that make the process more automated. I explained that it does make the process very easy, but I always felt it wasn’t worth extra charges since I can set up a new WordPress site in a matter of minutes using all free software.
I am going to first introduce you to the tools I use in my local development then take you to the steps of setting up a new WordPress site using these tools. It’s possible that you may find using a pro version of a tool like MAMP Pro worth the money, however, I would like to share my proces. Also, this is all based towards Mac. I use Mac as my development environment and most of my colleagues do as well. If you would like suggestions for Windows, please contact me and I can give you some suggestions on software to use.
Tools Used
The following tools are ones I deem necessary to follow my process. You could find suitable alternatives, however, I am writing the post with these tools in mind and will be giving specific instructions based upon these tools.
MAMP (Free) – http://www.mamp.info/en/index.html
I use the Free version of MAMP rather than the paid Pro version. I know plenty of people who swear by the paid version because it makes setting up multiple sites very simple, however, I have found my process of setting up a new site only takes a matter of minutes and that I could put the $60 price tag to better use. Admittedly, though, the Pro version of MAMP does have a very nice interface and does make the process easy.
Sequel Pro (Free) – http://www.sequelpro.com/
I use Sequel Pro to manage my local databases. It is a GUI to view all database information, make backups, import databases, and more. PHPMyAdmin does come with MAMP, however, I find Sequel Pro much quicker and easier to use. I find the interface much more intuitive and it makes it easier to navigate to certain database tables if needed. Creating a new database takes a couple seconds and importing and exporting databases is a breeze. I recommend using this to manage your local databases and even site databases if they allow the proper access.
TextWrangler (Free) – http://www.barebones.com/products/textwrangler/
TextWrangler is a text editor for Mac. I use it for basic text documents and also to manage my vhosts and hosts files. I’ll get into explaining the vhosts and hosts files a bit later. You could use TextWrangler for all of your development if you’d like. It doesn’t do a bad job of it, however, I recommend Sublime Text 2 for that and to keep TextWrangler around for light text editing and the purpose I use it for in this post.
These tools are not necessary to use my process, however, I highly recommend them. These can save you a lot of time and extend your system in very useful ways. I wholeheartedly recommend them, but they are not needed to set up your environment.
iTerm (Free) – http://www.iterm2.com/
iTerm is a terminal replacement for working in the command line. The built-in Mac Terminal app is perfectly fine, however I prefer iTerm for a few of it’s features. There are plenty of extra features, but what I like the most is the ability to open multiple terminal connections side-by-side in a split pane view.
TextExpander ($35) – http://smilesoftware.com/TextExpander/index.html
Text Expander is one of those programs that can save you a ton of time. This program does text replacement and is invaluable for things you may end up typing over and over. For instance, if you saw yourself typing out your long home address to people in emails often, you could set up a text expansion to print your full address any time you type ;address saving you the time of going through everything. I like to prefix all of my TextExpander Snippets with a semi-colon since there is not usually a time I would type is one word.
Alfred (Free) – http://www.alfredapp.com/
Alfred is a quick app launcher. To launch any app, and even documents, folders, and more, I have it set up so I can press Command-Space and begin to type in the application name. I now hide my Mac Application Dock, as I never use it to launch applications. I find that I can go much quicker by launching via the keyboard. Mac OSX has Spotlight Search built-in, which works on Command-Space and can also launch applications, however I feel Alfred gives a much nicer interface and more customization options. To get Alfred to work on Command-Space you will have to disable Spotlight from using that key combination in your OSX Preferences and set Alfred to use it in the Alfred Preferences.
Setup
I’m not going to go through the installation of software as it is pretty straightforward and instructions are readily available on each vendor’s site. However, there are just a couple one-time configurations that are needed with MAMP to make it function properly for multiple sites with unique dev URLs.
Create a Directory for your Sites
You will need to create a folder to house all of your sites. This can be anywhere on your computer, but I have a folder set up under my user folder called projects. You can call your folder anything, but for our example lets call it projects. Just open the Finder, click on your Home folder in the left column and create a new folder in here called ‘projects’.
Change MAMP Ports
MAMP sets the ports that you can access Apache and MySQL at alternate ports form the standard so they won’t interfere with other software you may have. The standard port for web traffic is port 80, but MAMP sets it to port 8888 by default. This is why with a typical install of MAMP you have to type http://localhost:8888 to access your site. We are going to change the port to 80 so you don’t need to add the port number at the end and later we will make it so you don’t have to type in localhost, but you can assign your own URL to each site you set up. MAMP also changes the port to access MySQL to 8889, we will change this to the default port of 3306.
Just open MAMP, click Preferences, and change the Apache Port to 80 and the MySQL Port to 3306.
Uncomment Line to Activate vhosts File in httpd.conf
Navigate in the finder to /Applications/MAMP/conf/apache/ then right click on httpd.conf and select ‘Open with…’ -> ‘Other’. Scroll down your list of applications and open this file with TextWrangler or another text editor. Navigate down to line 525 where you will see the info in the following screen shot. Remove the # before the words Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf on line 525. This will uncomment that line so Apache Web Server reads this setting and allows you to set Virtual Hosts for multiple sites.
Steps for Creating a New Site
Now that we have everything set up properly, I will take you through the steps of creating a new site. Now that I have this down, it only takes me a minute or so to spin up a new site with a custom URL and a fresh WordPress Install.
1. Create a New Folder for Your Site
Each site will need a new folder to house your files. You will make this folder under the folder we created earlier at /Users/dustyf/projects. I will be using my name in these examples, but of course where you see dustyf be sure to replace with your computer’s username. To create this folder, you can just navigate to it in the Finder, however, I prefer to handle this with the Command Line as it makes this and the next few steps much quicker. Some people don’t feel comfortable behind a command line, but don’t be afraid of it. The Command Line can be very helpful and at least basic commands are something every developer should understand.
I use the terminal replacement program iTerm while working with the Command Line, but using Apple’s built-in Terminal is fine. Use the following command to change your directory (cd is the command to navigate between folders.
cd /Users/dustyf/projects
Now you are in your projects folder and we can start setting creating a new site. Next use the mkdir command to make a new directory for our site. We’re just going to call this site “newsite” so let’s create a directory by that name.
mkdir newsite
Now we want to work inside of that directory so we need to change directory to the “newsite” folder. Note that I am not using the / before my folder name this time. If you want to navigate folders inside of the current folder you are in, you do not use a preceding /. You use a preceding / to navigate from the main root of your computer, like we did in the first example.
cd newsite
While we are here, I like to create a folder that houses miscellaneous files that I use to work on my site. This way, I can keep all my files in the same place. I usually put extra graphics, PSDs, and other miscellaneous files here. I just call this folder “files.”
mkdir files
2. Install WordPress
Now we need an install of WordPress to work with. You could go ahead and download it from WordPress.org in your browser, unzip it, and move it into the folder in your Finder, but it’s actually much quicker to do it via the command line.
We’re going to grab the WordPress zip file from WordPress.org by using the wget command. This will download it to your newsite directory.
wget http://wordpress.org/latest.zip
3. Unzip WordPress
Again this could be done in the Finder, but I feel it’s much faster just staying in the command line. Just one command and your files will all unzip to a folder called “wordpress” in your site directory.
unzip latest.zip
Since by default it unzips to a folder called “wordpress” I want to change the name of this folder. I change the name to mimic what my normal live server uses. I call this folder “www.” We’ll use the mv command to “move” the folder to a new folder called “www”, which actually just renames it.
mv wordpress www
Now we can get rid of the WordPress zip file we downloaded. We won’t need that any more. We’ll just download a new one for any future installs. Use the rm command to remove the file.
rm latest.zip
***Tip: Use one of my tools above, TextExpander, to create shortcuts for each of these commands to speed things up even more. I have ;dlwp set up to do the wget http://wordpress.org/latest.zip command.***
4. Create a New Database
Creating a database can be easily done using PHPMyAdmin, which comes with MAMP, however I prefer using Sequel Pro. To begin you will have to connect to your database with Sequel Pro. This is a one time setup and you can save this for later. Open Sequel Pro and add the following connection info:
- Name: Local (or anything you want)
- Host: 127.0.0.1 (this is a reserved IP Address to connect to your local machine)
- Username: root (this is the default MySQL username of MAMP)
- Password: root (this is the default MySQL password of MAMP)
Be sure to “Add to Favorites so it appears in the left column for you to access easily later. Next hit connect and you will be connected to MAMP’s MySQL database.
Now you will need to add a new database for your new site. Just click the dropdown that says “Choose Database…” in the upper-left and select “Add Database…” Enter a name for your database such as “newsite.”
This is it. The database for your new site is all set up. In Sequel Pro you can also easily import and export databases for transferring data between your dev site and live site. That is another blog post though.
***Tip: To quickly launch Sequel Pro and other apps, I use the app launcher Alfred, from my tools above. I can just press “Command-Space” then start typing “seq” and press enter and very quickly open the app. This is one more way to speed up the process***
5. Add Entries to Hosts and Vhosts Files
Now you will need to edit the files that will tell Apache and your system where to go when you type in a URL. I set up my local URLs with a .dev at the end. For instance, I would set up my blog as dustyf.dev. You have to change two files to set this URL to connect to your local install. These files are hosts and httdp-vhosts.conf.
I open these in TextWrangler to edit and I always keep these open in TextWrangler so I can easily access them. One nice thing about TextWrangler is even if you quit the program and restart the computer, you can keep files open in the sidebar for use later meaning that opening these should be a one-time setup and you can access them very quickly later.
We’ll first open the hosts file. Press “Command-O” or or select open in the menu in TextWrangler. In the open dialog press “Shift-Command-.” (that’s a period). This will allow you to view hidden files. Then click on “Macintosh HD” navigate to the following directory and select the file called hosts.
/private/etc
Next, open the httpd-vhosts.conf file with the “Open” dialog by navigating to the following directory.
/Applications/MAMP/conf/apache/extra
Quick description: The hosts file tells your computer where a URL points to. You could set Google.com to go to a specific IP Address and it would go there rather than the actual Google site. Here is a more full description. The vhosts file is used by the Apache web server to tell it which site to go to when the server is being accessed by a URL. This allows you to not need a dedicated IP address and server for every site. More thorough description here.
First we’ll edit the hosts file. If you are worried about messing anything up, just don’t edit anything at the top and only add a new line for your site. At the bottom of the file, just add the following line, of course changing it to your site name. For any subsequent sites add a new line with a new site name. When editing this file you will probably be asked if you want to unlock the file. You can safely say yes. When you save the file, you will need to type in your system password, as this is a protected file. Go ahead and enter the following line to add your site.
127.0.0.1 newsite.dev
Next you’ll want to add to the httpd-vhosts.conf file. There are many settings you can change for Apache in this file, however, I keep it very basic for my local environment. I won’t go into detail on what this all means, but you will want to add this of course changing to your site directory and local URL. Keep adding these to the bottom for subsequent new sites. Add the following and save.
<VirtualHost *:80>
ServerName newsite.dev
DocumentRoot /Users/dustyf/projects/newsite/www/
<Directory />
AllowOverride All
Options -Indexes +FollowSymLinks
Order allow,deny
Allow from all
</Directory>
</VirtualHost>
6. Restart Servers in MAMP
Now you should be set to go. All you’ll need to do now is restart the servers in MAMP so Apache recognizes the new settings. Just go to the MAMP panel, hit “Stop Servers” and then “Start Servers” to restart.
Once you have the initial setup in place the process will go very quickly, especially using tools like TextExpander and Alfred. Subsequent installs you will just need to do the following:
- Create New Site Folder
- Download WordPress, Unzip, Rename, Clean Up
- Create Database in Sequel Pro
- Add hosts and vhosts Entries
- Restart MAMP Servers
If you have any suggestions to add or anything you’ve found useful, please add in the comments.
