Multiple VirtualHosts For XAMPP Not Working

Question

Ok, so I'm at my wits end. I've been trying to get this up and running for the better part of a week and it I don't understand why it's not working.

Background

I have two wordpress sites, one dev and one prod. I would like to be able to view both of them on my local machine. However, what I'm seeing is that when I type in local.www.mysite.org or local.dev.mysite.org none of the images show up. In inspected the links and they are all pointed to localhost/image.jpg. I have XAMPP installed and it's working fine. The sites are pointing to the correct databases with data in their. If I don't use Virtual Hosts the site comes up perfectly fine.

This is what I have in my hosts file:

Hosts

127.0.0.1 localhost
127.0.0.1 local.www.mysite.org
127.0.0.1 local.dev.mysite.org

httpd-vhosts.conf

<VirtualHost *:80>
  DocumentRoot "D:/xampp/htdocs"
  ServerName localhost
</VirtualHost>

<VirtualHost *:80>
  DocumentRoot "C:/sites/www.mysite.org"
  ServerName local.www.mysite.org
  ServerAlias local.www.mysite.org
  <Directory "C:/sites/www.mysite.org">
    AllowOverride All
    Require all Granted
  </Directory>
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "C:/sites/www.mysite.org"
    ServerName local.www.mysite.org
    ServerAlias local.www.mysite.org
  <Directory "C:/sites/www.mysite.org">
    AllowOverride All
    Require all Granted
  </Directory>
</VirtualHost>

Question

Is there something that I've written in, incorrectly? Left something out? Really don't know where I could have gone wrong here.

thanks, Justin

Answer 1

Alright, finally figured it out. Here is my step-by-step guide:

1) Open up C:\xampp\apache\conf\extra\httpd-vhosts.conf, or wherever your httpd-vhosts.conf file is. Enter this first below the comments:

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs"
    ServerName localhost
</VirtualHost>

2) Next enter the sites you want to be locally hosted. For example:

<VirtualHost *:80>
  DocumentRoot "C:/sites/dev.mysite.org"
  ServerName local.dev.mysite.org
  ServerAlias local.dev.mysite.org
  <Directory "C:/sites/dev.mysite.org">
    AllowOverride All
    Require all Granted
  </Directory>
</VirtualHost>

<VirtualHost *:80>
  DocumentRoot "C:/sites/www.mysite.org"
  ServerName local.www.mysite.org
  ServerAlias local.www.mysite.org
  <Directory "C:/sites/www.mysite.org">
    AllowOverride All
    Require all Granted
  </Directory>
</VirtualHost>

3) Open up notepad or a similar text editor as an Administrator and then within that text editor open C:\Windows\System32\drivers\etc\hosts

4) Add the localhost entry (if not already there) and then the ServerAliases mapped to the local ip address like so:

127.0.0.1 localhost
127.0.0.1 local.www.mysite.org
127.0.0.1 local.dev.mysite.org

5) Finally, log into each of your local Wordpress instance and go to Settings > General and change the WordPress Address (URL) and the Site Address (URL) to their respective ServerAliases.