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

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
LVL 5
Tom KnowltonWeb developerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

arnoldCommented:
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.
0
Tom KnowltonWeb developerAuthor 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?
0
arnoldCommented:
VIRTUALHOST is how you set/host multiple sites on the same system.
the VirtualHost ip:port or * meaning any is apache bound to and listens on. The ServerName, ServerAlias within each VirtualHost is how apache determines what site is being requested. Based on that the specific VirtualHost's DocumentRoot sets the base reference...

The main htdocs.conf defines the Default web site DocumentRoot which you should leave as it was c:/xamp/htdocs!
In your example/setup http://127.0.0.1/robotz or http://127.0.0.1/ukfnew will open the respective sub site. note the logs for all will be within the same log file.

Each VirtualHost has their own DocumentRoot.
#site 1
<VirtuaHost *>
ServerName robotz
DocumentRoot /C:/xamp/htdocs/robotz
</VirtualHost>
#Site2
<VirtualHost *>
ServerName ukfnew
DocumentRoot c:/xamp/htdocs/ukfnew
</VirtualHost>

http://ukfnew/ will land and will be processed by site 2 rules
http://robotz/ will land and will be processed by site 1 rules.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Tom KnowltonWeb developerAuthor Commented:
Thank you.  Sorry it took me so long to award your points.

Tom
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Windows 10

From novice to tech pro — start learning today.