We help IT Professionals succeed at work.

On Windows 10 OS:  XAMPP/APACHE/PHP - hosting multiple sites inside xampp/htdocs - relative paths not working

444 Views
Last Modified: 2017-04-21
Windows 10 OS, Chrome browser:

 I am struggling with relative paths when running local sites in xampp / apache

When I run my site locally like this:

localhost/ukfnew

The page loads but the images don't load due to path issues. I checked the image paths and they are attempting to load from:

localhost/images/someimage.jpg

when my intent is to load them like this:

localhost/ukfnew/images/someimage.jpg


Now, I realize I could modify the pah for the anchor tag href attribute in HTML when pointing to an image:

/ukfnew/images/someimage.jpg

But this would fail once it was pushed to the server.  Having to remember to change the path back every time I push live sounds wrong-headed to me and not best-practice.


I've made what I thought were the appropriate <Virtual Host> entries in

C:\xampp\apache\conf\extra\httpd-vhosts.conf:

# Virtual Hosts
#
# Required modules: mod_log_config

# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at 
# <URL:http://httpd.apache.org/docs/2.4/vhosts/>
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.

#
# Use name-based virtual hosting.
#
##NameVirtualHost *:80
#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ##ServerName or ##ServerAlias in any <VirtualHost> block.
#

NameVirtualHost 127.0.0.1:80

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


##<VirtualHost *:80>
    ##ServerAdmin webmaster@dummy-host.example.com
    ##DocumentRoot "C:/xampp/htdocs/dummy-host.example.com"
    ##ServerName dummy-host.example.com
    ##ServerAlias www.dummy-host.example.com
    ##ErrorLog "logs/dummy-host.example.com-error.log"
    ##CustomLog "logs/dummy-host.example.com-access.log" common
##</VirtualHost>

##<VirtualHost *:80>
    ##ServerAdmin webmaster@dummy-host2.example.com
    ##DocumentRoot "C:/xampp/htdocs/dummy-host2.example.com"
    ##ServerName dummy-host2.example.com
    ##ErrorLog "logs/dummy-host2.example.com-error.log"
    ##CustomLog "logs/dummy-host2.example.com-access.log" common
##</VirtualHost>



<VirtualHost robotz>
  DocumentRoot "C:/xampp/htdocs/robotz/"
  ServerName robotz

  CustomLog "C:/xampp/htdocs/robotz/robotz.access.log" combined
  ErrorLog "C:/xampp/htdocs/robotz/robotz.error.log"

  <Directory "C:/xampp/htdocs/robotz/">
    Options Indexes FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all
  </Directory>
</VirtualHost>

<VirtualHost ukfnew>
  DocumentRoot "C:/xampp/htdocs/ukfnew/"
  ServerName robotz

  CustomLog "C:/xampp/htdocs/ukfnew/ukfnew.access.log" combined
  ErrorLog "C:/xampp/htdocs/ukfnew/ukfnew.error.log"

  <Directory "C:/xampp/htdocs/ukfnew/">
    Options Indexes FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all
  </Directory>
</VirtualHost>

Open in new window


and in the C:\Windows\System32\drivers\etc\hosts file:

# Copyright (c) 1993-1999 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handle within DNS itself.

127.0.0.1       localhost
127.0.0.1       robotz
127.0.0.1       ukfnew
#       ::1             localhost

Open in new window


Must be something dumb I am missing but I am brand new to apache / xampp / php so I do not know what is needed. When I push the site live - it works just fine with the relative paths.  Hmmm...  I wonder what the server settings are....

Still - I'd like to get a few replies in case I don't find the answer, ha ha.

Thank you,

Tom
Comment
Watch Question

CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
DocumentRoot in the virtualhost entry and the base (/) of the relative path for the site.
Usually when hosting sites, you would not reference them within htdocs unless you want to provide access under the main domain/site

The issue you might be running is your coding uses paths that are inconsistent with the DocumentRoot.

You have a typo, virtualhost on page 55 and 70 use the Same ServerName robotz change the second entry to correspond to the site
While at the sametime
Making your virtualhost look as follows in both cases
<VirtualHost *>

The ServerName is how Apache will distinguish which is being accessed.
Tom KnowltonWeb developer

Author

Commented:
I am only talking about when hosting  multiple sites locally.

In this location:

C:\xampp\apache\conf

I modified the httpd.conf file like so:


# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
DocumentRoot "C:/xampp/htdocs/ukfnew"
#DocumentRoot "C:/xampp/htdocs"
#DocumentRoot "C:/xampp/htdocs/robotz"

Open in new window



and this seemed to resolve the issues with the relative path.

*** but I have to change this file every time I want to support relative paths with a site i am testing, right?  *****


Is it possible to have multiple document roots?
CERTIFIED EXPERT
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
Tom KnowltonWeb developer

Author

Commented:
Thank you.  Sorry it took me so long to award your points.

Tom