What We’re Trying to Do
We’re trying to set up a local web development environment on a Windows computer with an XAMPP installation. XAMPP will allow us to run Apache and MySQL on our local computer.
XAMPP is neat, but unfortunately, the only official documentation consists of FAQs. It can be pretty overwhelming at first. Alternatively, there’s WAMP. It is supposed to be a little more user-friendly but I can’t personally attest to that, as I’ve never used it.
What We’re Using
I’m using Windows 7 and XAMPP 1.8.3.
Optional: I’m using Notepad++ for editing files. You can use regular Notepad (you’ll probably have to Right Click > “Open With” > Browse for the program when we edit files). Notepad is a pain and you should probably get Notepad++ or Sublime Text for editing files.
Get XAMPP from Apache Friends. Usually installation is not problematic; if you want to just let it whirl with the default settings, go ahead.
However, you may not want to install Tomcat and Mercury. They won’t hurt anything, but you probably don’t need either. It’s is just a tiny sliver of space you can save.
Once it’s installed, fire up the control panel and start Apache and MySQL. Once they’ve started, go to your browser of choice and type localhost into the address bar. After selecting a language, you’ll be presented with the XAMPP home screen. Your installation is working, yay!
Make sure to stop Apache and MySQL before you do the next changes. You can make the changes if you have them running, but you’ll need to remember to stop and restart the services after you’re done with the set-up. Otherwise, your virtual hosts will not work.
Setting Up Virtual Hosts
You’ll want to set up virtual hosts (fake domain names, essentially) for development.
If you don’t set up virtual hosts, you can run into problems setting the URL of your website, as well as accessing images, CSS, and links. It also makes the transfer from your local site to your live site more painful, as there’s greater potential for broken links.
With virtual hosts, you can use relative URLs (URLs starting with /) for your resources (images, CSS, links, etc.) as you develop. The transfer from development to production will be seamless*, with no broken links.
Basically, there are three steps:
- Apache Vhosts File: Editing your httpd-vhosts.conf file.
- Windows Hosts File: Editing your hosts file.
- Adding the Site Files: Tossing your website’s files into the appropriate folder.
Apache Vhosts File
Navigate to the folder where your Apache vhosts file is located. That’s usually
C:\xampp\apache\conf\extra. The file you want is httpd-vhosts.conf.
Go to the end of the file and insert the following. Replace the [site-name] and [name-of-folder] tags (don’t forget to remove the brackets, either) with the appropriate values.
ServerAdmin webmaster@dev-[site-name].com DocumentRoot "C:/xampp/htdocs/[name-of-folder]" ServerName dev-[site-name].com ErrorLog "logs/dev-[site-name]-error.log"
ServerAdmin firstname.lastname@example.org DocumentRoot "C:/xampp/htdocs/mycoolsite" ServerName dev-mycoolsite.com ErrorLog "logs/dev-mycoolsite-error.log"
The vhosts file also provides an example code for you to work with. Use that as a template or copy this one here — it doesn’t matter, they’re pretty much the same.
I usually name the host
dev-[name].com — truncating longer names. So for katemwalsh.com, it’d be dev-kmw.com. But — you can do whatever you want here, with one caveat: don’t name your development
ServerName the same as your live site (or any other site you frequent). If you do, you won’t be able to view your live website. Your changes will redirect you to your development site.
Windows Hosts File
This one’s easier. Navigate to the folder
C:\Windows\System32\drivers\etc and open the “hosts” file. Again, you may need to right click to open it up in Notepad++ for editing, or you may need to browse for the correct program. Add this at the top of the list:
127.0.0.1 dev-[site-name].com ::1 dev-[site-name].com
127.0.0.1 dev-mycoolsite.com ::1 dev-mycoolsite.com
You do not have to change the IP address. 127.0.0.1 and ::1 are both addresses for
localhost. Localhost essentially means “this computer.” So now, after this change — when you type in dev-mycoolsite.com, your computer looks on itself to find the files.
Now you need to add the folder where your website will live and put the files there. Navigate to the
htdocs directory of your XAMPP installation, usually
C:\xampp\htdocs\. Create a new folder, and name it what you named
DocumentRoot in the first step when you edited your Apache vhosts file:
Your folder name here has to match whatever you named the folder (in this case, “mycoolsite”) in the first step. The
DocumentRoot is where XAMPP will look for your website, so this needs to be the folder where the files are. If they don’t match, you’ll get an “Object Not Found” error — which is basically the same thing as a 404 error. XAMPP is telling you it can’t find the folder you’re trying to access. Check to make sure
DocumentRoot is the same thing as your folder name.
You can extract a ZIP file directly into this folder now, or download an already-live site here.
If you stopped Apache before, restart it now. If you did not stop the Apache service before altering your vhosts and hosts files, you will now need to stop and then restart the Apache service before your virtual hosts work.
Possibly Optional. If you’re installing a PHP application, you’ll probably need a MySQL database, too. XAMPP has phpMyAdmin built in, accessible from the XAMPP index screen when you type
localhost into your browser.
Also, a tip — keep your database name, user, password, etc. the same as it is on your live server. It might be tempting to just use the root user without a password locally, but this adds more steps to the switchover from local to live.
Alternatively, you can use Bitnami to install WordPress. I have to be honest and say I never use automated tools for installation. I prefer manual installation by getting what I need straight from the source. This guarantees two things: I’m getting the most updated version, and it hasn’t been bloated with “helpful” things the installer decided to add (sometimes a problem, not necessarily with Bitnami).
Common XAMPP Issues
Apache Won’t Run
Can’t Access localhost (XAMPP Home) After Creating Virtual Hosts
When I first started on XAMPP, I found after getting virtual hosts running, I could no longer access the XAMPP homepage at
localhost. You have to actually set up a virtual host for that, too, and afterwards it’ll work just fine:
ServerAdmin webmaster@localhost DocumentRoot "C:/xampp/htdocs/" ServerName localhost ErrorLog "logs/localhost-error.log"
WordPress is Redirecting to My Live Site!
If you had a live website and installed your live site locally for the first time, you may find the site — especially a WordPress site — automatically bringing you to your live website.
That’s actually a good thing, and it isn’t an XAMPP problem. Your local installation is working — but we have a few options to change.
You need to update your local (local — not live!) WordPress settings. You can do so by entering your locally hosted version of phpMyAdmin. Enter the
wp_options table. Display 500 rows, CTRL+F for
your-live-site-url.com and change the two instances where it appears:
These settings might also exist in your
wp-config.php file, where your
home variables can be hard-coded. For other options, check the WordPress Codex.
If you have a local development environment, you should probably use a staging environment, too. This can be a separate domain or a subdomain of your live website.
You want to put your locally developed website on the staging server to perform one last test before shoving everything onto your live website. Environment differences between your live server and your local XAMPP installation can also cause breakage, and it’s good to avoid potential downtime.
Sharing XAMPP on a Dedicated IP LAN
Working on a local area network (LAN), want to share with your co-workers? Hop on their computer and make the same edits as described in Windows Hosts File. Instead of using 127.0.0.1, use your computer’s IP address (leave off the ::1 declaration on their computer).
You can get your IP address on a Windows computer by opening the command prompt and typing
ipconfig. Your IP address will come up as
IPv4Address. The rest of the numbers shouldn’t matter.
Note that this won’t work without a dedicated IP address for your machines.
Using XAMPP for Production
You should not use XAMPP for live websites. It is built extremely insecurely to allow the developer maximum freedom without having to play with permissions for everything. In a production environment, this is simply unsafe and exposes your site to malicious activity.
While you can maybe fix this with know-how and secure everything, it’s easier to maintain updates with standalone technologies. Using XAMPP requires you wait for Apache Friends to update. It’s probably going to be easier (and safer and faster) for you to do your own updates on technologies such as Apache and MySQL.
Lastly — I definitely don’t know enough about server administration to say this for a certainty, so don’t take this as gospel — it seems counterproductive to install an added layer of software between your server and its services? If you’re starting the XAMPP control panel and then starting Apache from it, that’s adding another layer of complication. You could install Apache, MySQL, etc. directly on your server and avoid XAMPP altogether — thus avoiding any crashes or complications from running XAMPP.