VirtualHosts with XAMPP

This is how you can change your URL from http://localhost/myapp to http://www.myapp.com on your local machine using a Mac and using XAMPP. This is with Apache 2.4.

You will need to open two files:

  1. /Applications/XAMPP/xamppfiles/etc/httpd.conf
  2. /Applications/XAMPP/xamppfiles/etc/extra/httpd_vhosts.conf

The steps:

  1. Uncomment a line in httpd.conf
  2. Add your VirtualHost configuration
  3. Start Apache server
  4. Check the server is running successfully
  5. Edit your hosts file
  6. Navigate to URL browser to view your app

1.  In the first file, httpd.conf, find this line and uncomment it:

# Virtual hosts
Include etc/extra/httpd-vhosts.conf

This will let Apache know that any changes you make to the httpd-vhosts.conf file will be included when you start the server.


2.  In the second file, httpd_vhosts.conf, add something similar to:

< VirtualHost *:80 >   
   ServerName www.myapp.com
   DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs/my_app"
   <Directory "/Applications/XAMPP/xamppfiles/htdocs/my_app">
        DirectoryIndex index.php
        AllowOverride All
        Order Allow,Deny
        Allow from all
        Require all granted
        Options FollowSymlinks Indexes
   </ Directory >
</ VirtualHost >
    

Where 80 is the port you will use. If another app is also using port 80, you should change this to another port. After changing to another port, for example port 8080, make sure to add: Listen 8080 to your httpd.conf file in the Listen section (you can do a search for this in an editor by pressing CMD + F (Mac) or CTRL + F (Windows)).

ServerName  this is the URL you want to redirect to
DocumentRoot this is where the directory for where your app files are
<Directory “path”> this will set permissions and configurations for the directory

Remember the closing tags.

3,4.  To check your Apache configuration, you can start your Apache server and type this into your Terminal:

$ apachectl -S

This will tell you if Apache was able to successfully load everything in the configuration or not.

5.  Once it’s working, to load http://www.myapp.com locally on your computer, you will need to edit your hosts file. On Mac, it is found at /etc/hosts.

 $ sudo nano /etc/hosts

Add the following to the end of the hosts file:

 127.0.0.1 www.myapp.com

CONTROL + O to save your changes
ENTER to confirm the file name
CONTROL + X to exit the nano editor

6.  Open your browser and go to http://www.myapp.com and you should see your app running!

Advertisements