"A meek endeavor to the triumph" by Sampath Jayarathna

Friday, July 17, 2015

[tutorial] How to setup Virtual Host using WAMP

In order to run PHP on your local Windows computer, you need to install a server stack - either WAMP orXAMPP. Either will do, but for the purposes of this tutorial we're going to stick with WAMP.

If you have your php project in another directory, this tutorial will help you to setup virtual directory in WAMP to point to your php project directory. As an example, if you have your php project under eclipse directory, you need to enable virtual host in Apache configuration to run your code from the eclipse codebase.

Now, you could just do a basic install of WAMP and be on your way (using wamp\www to keep all your php files), but being restricted to just one directory in an obscure location on your computer is awfully limiting, especially if you're working on multiple projects at a time using other IDEs. That's where virtual hosts come in. By configuring virtual hosts on your WAMP server, you'll be able to run as many separate sites as you want, from any location you want.


This tutorial should work for machines running either Vista or Windows 7.



10 STEPS TO VIRTUAL HOST BLISS WITH WAMP


STEP 1

Download and install WAMP, then start the program. Pick a location on your computer where you want to set up your virtual hosts, like "C:/Users/Sampath/git/my-project". We're just going to work with one folder for now, but when we're finished you can set up virtual hosts in as many directories as you want.
As a sanity test, create a basic index.php file with some text ("Hello World!") and place it in the "My Site" folder. When we're finished, you'll know you've done it right when you can view your page in a browser using your virtual host's URL.

STEP 2

Go to "C:/Windows/System32/drivers/etc" and open the "hosts" file in Notepad. For Windows 7, open the properties and remove read-only option before you open it in Notepad. Also you can Right-click on Notepad and select "run as administrator". Then select File>Open and at the bottom right of the dialog box, select "All Files" from the dropdown instead of "Text Documents (*.txt)":




Then navigate to "C:/Windows/System32/drivers/etc" and open the "hosts" file.



STEP 3

At the bottom of the hosts file, below all the other text, add a new line with the following:

127.0.0.1        mysite.localhost               #My Test Site
:: 1

"mysite.localhost" is the domain name that will be used for your local site. You can name this whatever you want, like "johnnyfooball.tamu" or whatever. "#My Test Site" is simply a comment to help identify the site, which will be helpful once you start stacking up a lot of virtual hosts. Again, you can put whatever you want here, just don't forget the hashtag (#) beforehand, which is what makes it a comment.

Save the file.

STEP 4

Open "C:\wamp\bin\apache\apache2.4.9\conf" (your Apache version number may be different)

Just to mess with your head, there are 2 files - one called "httpd.conf", and one called "httpd.conf.build":

Open "httpd.conf".

STEP 5

At line 467, under "# Virtual hosts", un-comment (remove the hashtag [#]) before the line "Include conf/extra/httpd-vhosts.conf":



This tells Apache to include the file "httpd-vhosts.conf" (the file where we set our virtual hosts) when configuring its settings.

STEP 6

Go to "C:\wamp\bin\apache\apache2.4.9\conf\extra" and open the file "httpd.vhosts.conf". It should look like this:


STEP 7

We need to give Apache permission to look in our "Projects" folder for websites. Remove any dummy virtual host examples in the file. At the bottom of the page, below all the other text, add the following:

<VirtualHost *:80> 
            DocumentRoot "c:/wamp/www"
            ServerName localhost
            ServerAlias localhost
            ErrorLog "logs/localhost-error.log"
            CustomLog "logs/localhost-access.log" common 

            <Directory "c:/wamp/www">
                      AllowOverride All
                      Options Indexes FollowSymLinks
                      Require local 

            </Directory> 
</VirtualHost> 

<VirtualHost *:80> 
             DocumentRoot "C:/Users/Sampath/git/my-project" 
             ServerName   mysite.localhost
             <Directory C:/Users/Sampath/git/my-prject/>
                        AllowOverride All 

                        Options Indexes FollowSymLinks
                        Require local

             </Directory> 
</VirtualHost>


The DocumentRoot should be the path to the folder where your site lives, and the ServerName should match the domain you entered in your hosts file in Step 3.

Important: The DocumentRoot must be inside the directory that you gave Apache permission to access in Step 7. Also the "/" at the end of   <Directory C:/Users/Sampath/git/my-prject/>  is important. See the difference in DocumentRoot and Document. There is no "/" at the end of DocumentRoot.

Save the file.

STEP 8

Click on the green WAMP icon in your toolbar and select "Restart all Services", then wait for the icon to turn back to green.

STEP 9

Open your browser and navigate to "mysite.localhost", or whatever your domain name is. You should see the test page you created in Step 1. 

STEP 10*

*Optional. Enjoy. Run around and scream "Eureka!!!"

Thanks to https://www.kristengrote.com/blog/articles/how-to-set-up-virtual-hosts-using-wamp for the original version of this tutorial.  

No comments: