Search the Community

In the prior topic we saw how to install a WAMP and customize it to easily switch between virtual and real hosts typing the same address in the browser: ‘yoursite.com’. Now, we’ll separate the Virtual Host’s files from the WAMP program to make virtual management easier. To see the prior tutorial, follow this link (if you have any issue, please live a comment): 3 Steps To Create And Manage Virtual Hosts To Test And Combine Offline And Online Explanation To store the programs we used the folder: C:\Program Files\EasyPHP-12.1\ And the virtual hosts are physically located in: C:\Program Files\EasyPHP-12.1\www\ As it doesn’t make many sense to store Virtual Host’s files within the programs, we’ll bring them here: Z:\home\yoursite\public_html\yoursite.com\ Note: If you don’t have a ‘Z:/’ partition, you can easily create one using a partition editor like MagicPartition or Easeus, or whatever program you prefer. Of course, you can also choose an another location for your files ... We’ll create this folders assuming that you use xisto's services and that your top-level directory in your real web hosting is: /home/yoursite/ and that your domain’s files are located in: /home/yoursite/public_html/yoursite.com/ This way your virtual and real hosts will have the most similar directory structures as possible. (To do the appropriate changes, you can find your Home Directory at the left side of your cPanel below the 'Main Domain') Changes to do in yoursite.conf Goal: To change the folder location of ‘yoursite.com’ in Apache. Open the Apache configuration folder: C:\Program Files\EasyPHP-12.1\apache\conf\ Make a backup of ‘yoursite.conf’ before modifying it, and then open it to make the changes as follow: <VirtualHost 127.0.0.1>DocumentRoot "Z:/home/yoursite/public_html/yoursite.com/"ServerName yoursite.com<Directory "Z:/home/yoursite/public_html/yoursite.com/">Options FollowSymLinks IndexesAllowOverride AllOrder deny,allowAllow from 127.0.0.1Deny from allRequire all granted</Directory></VirtualHost>Stop and run Apache, then go with your browser to: http://ww38.yoursite.com/ You should acceed to the new location. Advantages: - It’ll be easier for you to manage your stuff, as you’ll have a better view on your files and they’ll be easier to access, maintain, backup, upload, etc. - If you do the appropriate changes, you’ll have almost a similar structure as you real web hosting. - An another advantage is that you can install an another WAMP with a different configuration and map some Virtual Hosts to the same place if you wish so... I hope you’ll enjoy it at least as I do, Cheers :-) ------------------------------------------------------------------------ PS: In case EasyPhp shows a warning message accessing to the new location, you can try this:) Mapping the ‘Z:\’ in EasyPhp Goal: To aloud EasyPhp to access files located in ‘Z:\’ In your browser, go to the administration panel: http://forums.xisto.com/no_longer_exists/ In the local files click in add an alias, name it ‘z’ or whatever you like, and write Z:\ as the path to the directory. Stop and run Apache, with your browser you should be able to access to http://forums.xisto.com/no_longer_exists/ ------------------------------------------------------------------------

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.