Avatar of Tom Knowlton
Tom Knowlton
Flag for United States of America asked on

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
Windows 10Chrome* HostingApache Web ServerWeb Browsers

Avatar of undefined
Last Comment
Tom Knowlton

8/22/2022 - Mon
arnold

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 Knowlton

ASKER
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?
ASKER CERTIFIED SOLUTION
arnold

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Tom Knowlton

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

Tom
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23