• Welcome to Overclockers Forums! Join us to reply in threads, receive reduced ads, and to customize your site experience!

How to create a web development environment on your PC

Overclockers is supported by our readers. When you click a link to make a purchase, we may earn a commission. Learn More.

I.M.O.G.

Glorious Leader
Joined
Nov 12, 2002
Location
Rootstown, OH
This guide will explain how to create a web development environment on your PC.
This is an example to follow or learn from. To demonstrate and for simplicity, it focuses on an Apache/MySQL/PHP/Perl environment. In practice, you would want to choose an environment that mirrors your hosting configuration - this is the configuration used in this example. What you are installing to doesn't matter (win/lin/osx), just matching the hosting configuration does. XAMPP is an Apache distribution that includes MySQL/PHP/PERL and makes things very simple to install, so this is used in this example.

Why would you want to create a web development environment on your PC?
You can copy your website files locally to your PC, make changes to the code, and see those changes immediately as they would look on your site. Once you are satisfied with the changes, you can then copy them back up to the site for the world to see.

  1. Download and Install XAMPP. (Follow instructions, confirm prompts)
    Windows - Linux - OSX

  2. Once XAMPP is installed, configure folders within the xampp installation directory.
    • In the htdocs folder, create a "websites" folder.
      EX: C:\xampp\htdocs\websites
    • Within the websites folder, create folders for your sites.
      EX: C:\xampp\htdocs\websites\local.overclockers\public_html
      C:\xampp\htdocs\websites\local.overclockers\conf
    • Clone your website files into the public_html file
  3. Configure the hosts file. Input a line like this "127.0.0.1 localhost local.overclockers.com" here: c:\windows\System32\drivers\etc\hosts
  4. Setup the apache virtual host
    • Open the httpd-vhosts.conf file in your text editor. C:\xampp\apache\conf\extra\httpd-vhosts.conf
    • Create a virtual host for the local domain. For local.overclockers.com, my entry is:
      Code:
      <VirtualHost *:80>
          ServerName local.overclockers.com
          ServerAlias local.overclockers.com
          DocumentRoot "C:\xampp\htdocs\websites\local.overclockers/public_html"
          SetEnv INET_APPLICATION_ENV "C:\xampp\htdocs\websites\local.overclockers\"
      </VirtualHost>
    • Restart Apache to load the new vhost config
  5. If you have a database, configure your settings for connecting to the database

That's it, once this is done you have a local replica of your site where you can make changes, test quickly, and once complete you can move those changes back up to the webserver/commit them back to your version control system.

As far as making edits, everyone was their own preferences for IDE, and my personal choice is notepad++ currently on windows.
 
Back