Search the Community

The purpose of this short tutorial – my first one – is to help you to manage your web laboratory, combining online and offline stuffs, and switch easily between virtual and real host using the same address. Let’s say that you want to test in a safe and clean way some codes in your own PC before to upload them to the web. Your websites use external stuff, like fonts, javascripts, datas or whatever offered by Google, Bloomberg or Facebook, and are located to their websites. The question is: how to switch easily between the testing environment (the virtual host located in your PC, only accessible to you) and real host (located in the real world, the Web), and reverse using the same address: ‘yoursite.com’? Half answer is: the latest version of EasyPHP includes an optional module called ‘Virtual Hosts Manager’. It’s perfects for simple needs and is easy to install... but it has some issues that makes it useless. We'll solve this here. At first you’ll have to install once the environment Server in your PC, then we'll see how to create in 3 easy steps your web laboratory with as many domains and subdomains as you wish into your computer, and switch between virtual and real web, __________________________________________________________________________ Installation and configuration of your WAMP __________________________________________________________________________ Install your WAMP – Windows Apache MySQL PHP Goal: to get a virtual web server environment full featured in you PC. Go to http://www.easyphp.org/ and install the version and modules of your choice. (Wordpress, Drupal, Prestashop, Joomla, etc.) By default it will be installed in this folder: C:Program FilesEasyPHP-12.1 Note: if you want to install it elsewhere, make sure to do the appropriate modifications in the further steps. __________________________________________________________________________ Install the Virtual Hosts Manager in your WAMP Goal: configure your WAMP to support Virtual Hosts Go to http://www.easyphp.org/ to get the latest Virtual Hosts Manager, or download it directly using this link: http://forums.xisto.com/no_longer_exists/ Install it in the same folder as EasyPHP: C:Program FilesEasyPHP-12.1 In the EasyPHP program, make sure that Apache is running and go to ‘Administration’, or press the touches ‘ctrl+A’, or go directly in your browser to: http://forums.xisto.com/no_longer_exists/ (If it doesn’t work, do the appropriate changes as described in the next step, and come back here) In the list of modules, you’ll see Virtual Hosts Manager, and at it’s left a button saying ‘add virtual host’. Feel free to use it, personally I avoid it. This module doesn’t offer all the flexibility and liability that you deserve, you’ll probably get several heavy warning messages while you use it, and switching often between virtual and real Host may become a nightmare when you do many tests, instead of exiting as it should be: it doesn’t activate/deactivate virtual hosts properly. But, if it works well enough for you and meets all your needs, you can use it ‘as is’ and won’t need to walk through the further steps. At this point: We installed a module that alouds easyPhp to support Virtual Hosting. __________________________________________________________________________ Apache - Edit the port of your localhost Goal: simplify the configuration of your localhost Make a backup and open the Apache configuration file: C:Program FilesEasyPHP-12.1conf_fileshttpd.conf Go to the row 62, normally you should see this: Listen 127.0.0.1:80 Then it’s ok and you can go to the next step. Otherwise, if you see something like: Listen 127.0.0.1:8887 Below this row, add this one: Listen 127.0.0.1:80 Note: if you want to deactivate this for whatever reason, you can comment this row just adding a ‘#’ at the beginning of the row. At this point: now you can access to your localhost just typing 127.0.0.1 in your browser and will be able to edit properly the hosts file as described below. __________________________________________________________________________ The 3 easy Steps to configure your Virtual Hosts __________________________________________________________________________ Step 1: Edit your ‘Hosts’ file Goal: redirect ‘yoursite.com’ to your localhost With Wordpad, open the file: C:WINDOWSsystem32driversetchosts It’s a file without extension, make first a backup copy. Add the following row to your ‘hosts’ file: 127.0.0.1 yoursite.com Optional tip: If you want to access to your localhost just typing ‘localhost’, then add this row if it’s missing: 127.0.0.1 localhost Save your modifications and make sure that your text editor didn’t add a ‘.txt’ extension to your file, otherwise it won’t work, and that’s why I recommend Wordpad to do it. At this point, if you visit ‘yoursite.com’ with your browser, you should access to the contents of your ‘localhost’ witch files are located in your PC. __________________________________________________________________________ Step 2: Apache - Create a configuration file for ‘yoursite.com’ Goal: define the specific folder for ‘yoursite.com’ in your localhost First, create the main folder for your offline works: C:Program FilesEasyPHP-12.1wwwyoursite Now, open the Apache configuration folder C:Program FilesEasyPHP-12.1apacheconf Create a new text file and add the following rows: <VirtualHost 127.0.0.1> DocumentRoot "C:/Program Files/EasyPHP-12.1/www/yoursite" ServerName yoursite.com <Directory "C:/Program Files/EasyPHP-12.1/www/yoursite"> Options FollowSymLinks Indexes AllowOverride All Order deny,allow Allow from 127.0.0.1 Deny from all Require all granted </Directory> </VirtualHost> Note: be aware, Apache makes a difference between ‘/’ and ‘’ Save this file as: C:Program FilesEasyPHP-12.1apacheconfyoursite.conf At this point: you just created a configuration file for the Apache server that you can activate/deactivate in the next step. __________________________________________________________________________ Step 3: Apache – Activate your configuration file Goal: Activate the configuration of your Virtual Host in you local server With your text editor, open the Apache configuration file: C:PROGRAM FILESEASYPHP-12.1conf_fileshttpd.conf At the end of the file, add the following row: Include conf/yoursite.conf Important: with your EasyPhp console, first: STOP Apache, then: START Apache, just restarting may not always work properly either. At this point: if you visit ‘yoursite.com’ with your browser, you’ll access to the empty file you just created for your virtual host. __________________________________________________________________________ How to Activate/Deactivate Virtual Hosts Like in Step 1, open your ‘Hosts’ file, and then, to deactivate, the Virtual Host of your choice just add a ‘#’ at the beginning of it’s row, and save it. To reactivate it, just remove the ‘#’: # 127.0.0.1 yoursite.com Then you’ll access directly to the web. Note: Apache doesn’t need to restart, as you don’t need to touch the configuration files. __________________________________________________________________________ Conclusion Now you can install and test everything you wish safely and combine online and offline stuffs using the same address, and switch easily between your online and offline websites, just adding or removing a ‘#’ from your ‘Hosts’ file. It may seem tricky in a first view, but the result is very simple, quick and reliable. Note: This is my first tutorial, if you find whatever mistake, something unclear, know a better way to do or say it, I will really appreciate.