This is Part 5 of The Beginner’s Guide To Setting Up a Development Environment.
By now, we’ve covered the major components of a development environment and have even begun to setup our own local development environment.
Whenever I setup a new environment, there are always a few tweaks that I like to make to ensure that I’ve got the most flexible, easy-to-manage environment possible for web-based work.
Though the following tips are completely optional, I’ve had a lot of success in this particular setup.
1. Setup Dropbox
Earlier in this series, we talked about managing our files and file history with Dropbox. If you followed through with that particular step, then you can skip to the next section.
If not, we basically setup a directory out of which we would be doing all of our development work. This is valuable as it gives us cloud-based storage and simple file version history.
So if you’ve not already done this, create a directory within your Dropbox out of which you can manage your projects. It’s best to keep the directory a single word as spaces can cause issues in more advanced development:
Done.
2. Re-configure Apache
At this point, we need to modify some Apache configuration files. Before doing this, make sure that you’ve disabled all of the applications in the XAMPP Control Panel and that you’ve got your favorite text editor ready.
Follow the following instructions closely – typos can result in a malfunctioning environment.
First, we need to tell Apache that we’re going to be hosting our projects out of our Dropbox directory. Locate the Apache configuration file. It should be in xamppapacheconf and the filename is httpd.conf.
At this point, make a copy of that file exactly as it is and rename is to something such as httpd.conf.orig. We need to back it up, just in case.
httpd.conf includes all of the configuration options for the Apache web server including the path out of which we host our files. We need to change that, so open it up in your text editor and look for the line containing DocumentRoot.
Yours should look something like this:
[cc lang=”text”]
#
# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
DocumentRoot “C:/xampp/htdocs”
[/cc]
We want to update that last line. Rather than specifying the default path, we need to point it to our Dropbox directory. For example, if your directory is called Projects and is located within Dropbox, then yours will read something like:
[cc lang=”text”]
DocumentRoot “C:/Users/Tom/Dropbox/Projects”
[/cc]
Next, locate the lines that look like this:
[cc lang=”text”]
#
# This should be changed to whatever you set DocumentRoot to.
#
[/cc]
And update that particular line to contain the same path as you specified above. For example, mine looks like this:
[cc lang=”text”]
[/cc]
Save the file, restart Apache, and navigate to http://localhost. Permitting that you specified everything correctly, your screen should now display the contents of your Projects directory:
3. Minor PHP Configuration
You can open a PHP tag in two ways: <?php and <?. The latter is a convenience method but often causes trouble and broken functionality in hosting environments as a lot of web hosts don’t turn on that option.
Since we want our development environment to be as closely related to a hosting environment as possible, we should do the same.
So locate your PHP configuration file. It should be found in /xampp/php. Look for php.ini.
Open the file and locate the line that contains:
[cc lang=”text”]
short_open_tag = On
[/cc]
And update it to read:
[cc lang=”text”]
short_open_tag = Off
[/cc]
Save the file and restart Apache. Permitting everything went well, Apache should restart with no problem.
3. Install SQLBuddy
As you get more involved with web development, you’re likely going to begin creating and querying databases much more often.
PHPMyAdmin ships with XAMPP and its a powerful utility, but I prefer the simplicity of SQLBuddy. With our current setup, it’s a piece of cake to install.
- Download the application from the SQLBuddy website
- Extract the contents to your Dropbox Project directory (yes, the same one in which we’re saving our projects)
- This should create a directory called sqlbuddy unless you named it something different
Once done, navigation to http://localhost/sqlbuddy. You should be presented with the login screen:
The username is already specified and there is no password so you should be able to login with the information that’s provided (remember that MySQL must be activated in the XAMPP Control Panel!):
Done and done. That’s enough database management for now.
4. Miscellaneous Tips and Terminology
Finally, I wanted to cover a few points and terms that can often trip up new developers when it comes to running their projects.
- Don’t install your database in Dropbox. Some want to throw their entire application into Dropbox. For performance and technical reasons, don’t do that. Yes, this means that you’ll have to mirror the database on any other synced machine but it’s worth it.
- Local Environment refers to the machine on which you do your development. It’s your sandbox. It’s where it’s okay for things to go wrong.
- Testing or Staging is the environment, usually hosted on a separate machine, that mirrors the hosting environment in which your site and/or application is going to run. This is where you simulate the public launch of your project and testit out. If something goes wrong here, that’s okay.
- Production is the live site. This is where you’re launching the project and where no testing or breaking should occur. Testing should not occur here.
Hopefully that helps explain some of the language and reasons that we have for doing the things that we do.
In the next post, we’ll talk about configuring several editors to work with our development environment.
Aaron Fenwick says
Hey Tom… I’m having some trouble editing the httpd.conf file. I’m a Mac user and for the DocumentRoot path I have “Users/AaronFenwick/Dropbox/Projects”. When I go to startup Apache, this error displays: “Syntax error on line 178 of /Applications/XAMPP/xamppfiles/etc/httpd.conf:
DocumentRoot must be a directory”. Any ideas on why this might be occuring? Thanks!
Tom McFarlin says
Try this (with the leading slash):
/Users/AaronFenwick/Dropbox/Projects
Aaron Fenwick says
Thanks! I thought that might be it, will I was bored in Chemistry today. 😉
Aaron Fenwick says
*while* I was bored…
Tom McFarlin says
That’s awesome. Been there, done that ;).
Joshua Kahn says
Hey Tom,
nice clear tutorials, glad I found you, thank you internet.
I’m on a mac. Working on changing the httpd.config file to my dropbox project. I’m getting a 403 error…
“Access forbidden!
You don’t have permission to access the requested directory. There is either no index document or the directory is read-protected.”
I’ve read elsewhere that Mac’s are a little funny about accessing the applications folder. What’s weird is that with the default pointers in the config file, it works fine.
Any thoughts?
Tom McFarlin says
I’ve not experienced this issue on my Mac, but I use MAMP. From there, just click on the ‘Hosts’ tab, click on ‘General’ and then in the ‘Disk Location’ point it to your Dropbox projects directory.
Joshua Kahn says
Well, lucky for me I work with some devs, one of whom was generous enough to help me figure this out.
Turned out the the permissions on Dropbox weren’t set up to allow XAMPP to access it.
Double cool is he showed me how to use the command line in terminal to identify the permissions issue and fix it. Not sure I could reproduce it exactly, but I’m going to try and write it up.
Tom McFarlin says
Sweet – feel free to contribute a tutorial for this site if you want! Would help others out :).
Eric Dye says
Indeed! We’re always looking for awesome stuff like this!
https://churchm.ag/contribute
Joshua Kahn says
Okey doke, I’ll give it a shot. I’ll submit via that link once it’s done. It’ll be a few days probably.
Eric Dye says
😀
Rhys Owen says
You need to ensure the Dropbox folder is accessible. Try chmod 775 Dropbox – worked a treat for me!
Dave says
Thank you so much for this; it’s going to save me a ton of hassle switching between machines!
Julian says
Excellent! This is exactly what I was looking for. Now I have my Dropbox environment enabled 😉
Eric Dye says
Sweet!
NITHISH KARTHIK E says
Dear Sir,
I have created a table names dslams under this bb . Under the dslams i have uploaded the database of 300 nos in i am able to view the database but unable to update it. How to enable the checkbox for all the 300nos.kindly help to resolve it.