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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s