How to set up virtual hosts on Windows

kerry14 · January 2, 2021, 4:08pm

Thanks for feedback but if I develop on xampp and if i use a leading / for the paths it breaks

tracknut · January 2, 2021, 4:52pm

Hmmm… there must be a way to solve that, but I don’t use xampp.

Erik_J · January 2, 2021, 6:58pm

Hi kerry14,

The leading / is pointing to the root directory.
This is a dynamic path relative the site, and to make that work in your dev setup you need to configure it to use a virtual host.

There’s many tutorials on that if you search for it, here’s one in the forum I think you could use:
https://community.apachefriends.org/f/viewtopic.php?f=29&t=79807

The example is for Linux but what OS you’re on shouldn’t matter, only the “hosts” file is placed in different locations, (Sorry I don’t recall where Windows hosts file is located for the moment, but use NotePad and just save the file back whithout parameters that would corrupt the file format).

John_Betong · January 2, 2021, 7:21pm

Ponderism for the day “would setting a HTML base tag solve the problem”?

Erik_J · January 2, 2021, 8:50pm

Good ad hoc solution, only remember to remove/alter it for the live site.

igor_g · January 2, 2021, 9:17pm

path/to/xampp/apache/conf/extra/httpd-vhosts:

NameVirtualHost 127.0.0.1:80
<VirtualHost 127.0.0.1:80>
    	DocumentRoot "path/to/root"
    	ServerName my-server.com
	<Directory path/to/root>
		AllowOverride all
		Order allow,deny 
		Allow from all 
		Require all granted
	</Directory>
</VirtualHost>

And also registration of my-server.com in OS hosts file required.

John_Betong · January 3, 2021, 4:04am

I use Linux and have the online source code mirrored onto my localhost.

The paths problem arises due to localhost URLs have http://localhost/ prefix and /public_html/ suffix after the online URL.

Example:

// URL localhost
http://localhost/my_domain.com/public_html/

// URL Online:
https:///my_domain.com/

If and only if I prefixed images. CSS files, etc with / then:

// localhost applying / to image hrtef, files, etc
http://localhost/

// Online applying / to image hrtef, files, etc
https://mysdomain.com/

To overcome the URL differences I usually point image HREFs, etc to the Online site:

// Localhost script
<img
  href="https://my_domain.com/assets/imgs/img-001.jpg" 
  width="123" height="456"
  title="wonderful place for a title"
  alt="#"
>

Also works for Html Head links such as CSS files and JavaScript files.

I think it is far better knowing the files exist online and not be surprised when the uploaded localhost files cannot find the relative paths.

Erik_J · January 3, 2021, 4:25am

Ponderism for the day “would setting a HTML base tag solve the problem”?

Reading this I assumed you meant setting the XAMPP path as the base for links in the page in order to use dynamic paths.

But, in order to edit a page locally while using the online assets, could you set the online live site’s root URL as the base for the page?

Then, though still an ad hoc solution, it would work also if uploaded with the base tag left active.

(If I understand correctly.)

John_Betong · January 3, 2021, 5:03am

I think that using HTML base tag could solve the paths problem but I prefer using actual URLs.

As an example of a localhost index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover">
<title> Title goes here  </title>
<link 
  rel='stylesheet' 
  href='https://example.com/assets/css/new-2021.css'
>
</head>
<body>

  <h1> Title goes here </h1>
  <img 
     src='https://peacevase.tk/assets/imgs/declare-variable-not-war.jpg'
     width="960" height="903"
     alt="#"
  >

 </body>
 </html>

Edit:

This should also work for the XAMPP Server.

Erik_J · January 3, 2021, 5:04am

Stumbled over an old thread here discussing XAMPP virtual hosts that doesn’t work as expected:

kerry14 · January 3, 2021, 11:15am

Hi
I don’t know what an html base tag is, I tried your solution

href='https://example.com/assets/css/new-2021.css'

but then the local site seems to read the live site css rather than local which is no good for testing / development. Also on local site I got strange result where F5 would refresh using the local css but ctrl F5 would refresh using remote css!

It seems the simplest solution would be to amend the windows hosts file but where is it and what do I put in it ?

Erik_J · January 3, 2021, 1:50pm

Two top search results that explain this:

https://www.howtogeek.com/howto/27350/beginner-geek-how-to-edit-your-hosts-file/

Mind not use the save dialog in Ms NotePad, just press the shortcut Ctrl+S. IIRC, NotePad had a habit to affect the file format if you specified details in the save dialog. (I last used W7)

Please ask again if you have difficulties setting up your virtual hosts.

John_Betong · January 3, 2021, 4:46pm

I think the ultimate goal is to get the local web page to render correctly.

The CSS file can be local or remote. It is not necessary to link a local CSS file. As mentioned I prefer linking to the online CSS file.

This is similar to linking a remote CDN JavaScript file.

kerry14 · January 4, 2021, 10:02am

I appreciate that thanks for the advice. Thing is I am trying to test locally, internet is not that reliable and if I am working on html and css I still have to upload the new css before I test plus all my links will have to be prefixed with https://www.example.com/css.

Really for me ideal would be to get same code to work completely locally or completely remote. It seems from comments that could be accomplished by amending hosts file on my Window laptop - but I have no idea how to do that.

Erik_J · January 4, 2021, 10:24am

Please tell if the links I gave in #12 was of any help or what didn’t work with XAMPP on your machine, and we’ll take it from there.

kerry14 · January 4, 2021, 10:36am

I tried the first one as I am familiar with that site - I am now able to edit hosts file but don’t know what to change/enter - thanks

# localhost name resolution is handled within DNS itself.
#	127.0.0.1       localhost
#	::1             localhost

Erik_J · January 4, 2021, 11:00am

OK,
That’s a start, you need to edit according the Apache config virtual hosts section. Check if this tutorial better explains what to do in Win 10:

Maybe post also the virtual hosts section in the config file too if the tutorial doesn’t cover what you have.

kerry14 · January 4, 2021, 11:02am

Ok, I can amend the apache config using the config button on the xampp control panel, I have looked at editing virtual hosts as well, cant remember how exactly but im sure i can do it again. So I am sure I can edit all those files if needed - sorry do you want me to post the section in virtual hosts? Do you mean this -

##<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>

Erik_J · January 4, 2021, 11:06am

Good, now read the tut what to add in the W10 hosts file that you already posted.

kerry14 · January 4, 2021, 11:07am

Sorry I do not understand - oops sorry - tutorial - which tutorial would that be ?