I have inherited a website where the previous developer has coded all links relative to the site root, with a leading backslash in each link:
<link href="/css/file.css" />
<script src="/js/file.js"></script>
This works great for when the site is hosted on a server, as the links will equate to:
http://www.example.com/css/file.css
http://www.example.com/js/file.js
However, I'm trying to get these links to work correctly when called from within a subfolder for local testing. Specifically, I'm using WAMP, and have moved the entire code to a local folder called site at http://localhost:8080/site/.
I can't use the root of localhost, as WAMP stores various files there (including an index that would get overwritten).
The obvious solution, as many posts here on StackOverflow suggest, is to simply use folder-relative links, such as:
<link href="css/file.css" />
<script src="js/file.js"></script>
However, there are literally hundreds of hard-coded root-relative links in various different files, so it would be great having to avoid altering every single one of them if possible.
To avoid having to edit every link, I've tried setting an HTML <base> tag and specifying the folder directly:
<base href="http://localhost:8080/site/">
However, this doesn't seem to work.
Is <base> incompatible with root-relative links?
Is there any way I can easily have all files reference http://localhost:8080/site/ without having to manually edit each one of their preexisting root-relative links? Or will I have to manually update each one to be folder-relative?
Is <base> incompatible with root-relative links?
No, but an absolute path is still an absolute path. It will resolve relative to http://localhost:8080/site/ by dropping /site/.
If you want to use absolute paths and not keep your development sites in subdirectories, then configure your HTTP server to use Virtual Name Hosting.
Add custom hostnames (either in the DNS server for your LAN or in the hosts file on your development system), such as site.localhost, and set the DocumentRoot in a virtual host.
Have you tried using the replace function in your IDE? You can simply replace all the ="/ with =". It'll save you a lot of work and stress.
Related
I was making a new path for pages on my site and was trying to figure out how to path to my stylesheet and images cleanly. Here's an element that shows my problem:
<link rel="stylesheet" href="/src/styles.css">
My local copy of my site is hosted here at "E:/Documents/WEBSITE", the local page I'm trying to link the stylesheet from is "file:///E:/Documents/WEBSITE/things/weapons.html", and the stylesheet is at "E:/Documents/WEBSITE/src/styles.css". I have the local site open on Firefox and I am using VSC to code. When I follow the href path in VSC, it brings me to the correct stylesheet. When I upload a version of the site that has the same path, it works correctly.
I have the local site open on Firefox and I am using VSC to code. When I follow the href path in VSC, it brings me to the correct stylesheet.
I've looked over the code and made sure it would(and does) work otherwise. Like I said, it works when on the live site.
I've placed dummy "src" folders with "styles.css" in them on my base E drive, my Documents folder, and even in the "things" folder itself. If the href were pulling from any one of these, there would be an obvious change to the local site, but none of them are pulled from with that path.
When I upload a version of the site that has the same path, it works correctly. The same happens with some elements that I tried this with the src on. It simply will not work locally. The only other thing I can possibly think of is that it has a problem with the "file://" at the beginning, but I can't imagine how I would troubleshoot or avoid that. I get no errors logged.
I really can't include a reproducible example of code, but what I've done that works locally and on a live site:
<link rel="stylesheet" href="../src/styles.css">
and to reiterate, this doesn't work locally, but it works on a live site:
<link rel="stylesheet" href="/src/styles.css">
And just to clarify at the end here, the path is working when the site is live, but not locally. Not the other way around.
href="/src/styles.css" is an absolute path, not a relative one.
From file:///E:/Documents/WEBSITE/things/weapons.html it maps to something like file:///E:/src/styles.css (I think Windows file paths preserve the drive, but I'm not certain).
The browser has no way of knowing that you want file:///E:/Documents/WEBSITE/ to be the root directory of the site. The root is determined by stripping all the path information off the URL, not just parts of the path.
Absolute paths are, generally, not suitable for links used on a local file system.
Use an HTTP server. There are many free ones you can use for testing. VS Code has an extension called Live Server that makes it easy to run one.
I have a huge problem: Everytime I want to include a file in any kind of web project it does not work because for some reason all paths I put into the (for example) html file as a link or script tag don't load because it seams like the relative paths are not working. If I open the html as a file in chrome, it's actually looking for the file in the root directory of the drive and not in the folder of the html. The same error appears if I try to use any kind of local webserver (real hosted server works). I also downloaded any kind of demo projects and installed a few yeoman generators and the all got the same problem: Chrome says that it cannot find the file or it's just an empty file.
That's the reason why I think the problem has to do with my own pc. Any ideas what could cause this issue?
If your URLs for includes start with /, they will go to the absolute path. When testing locally from your filesystem, this is the root drive (such as C:\). If you want relative path, drop the /.
Also, check for the following tag in your HTML: <base href...> See http://w3schools.com/tags/tag_base.asp. Make sure it's not set to / if you're testing locally.
This <base> tag helps shorten potentially lengthy relative paths. For example:
<script src="resources/production/script.js"></script>
If you add <base href="resources/production/"> to the <head> element, you can shorten your script tag to src="script.js"
Beware ALL relative paths will have their root at resources/production/ if you define it in your <base> tag
I copy a large html source of an external page (say, http://www.example.com/bar/something.html) into a directory in my PC (say, /xxx). The file 'something.html' contains many absolute references in the form href="/bar/another.html" or src="/bar2/yetanother.jpg" etc.
If I simply click 'something.html' (accessing it from my browser as 'file://') -- or even if I upload it to my own server and access it via 'http://' -- all those references will be looked in the same host where the file is. I still want them to be looked in the original host (i.e., http://www.example.com).
Had they been relative references (without the 1st slash), I would simple put <base href=" http://www.example.com/"> in the HEAD section. How can I achieve a similar effect with those absolute references??
Consider also the case where something.html includes many other files (css, js, ...) which may also have such absolute references...
You have the terminology backwards: the reference /bar/another.html is a relative reference, not an absolute reference. The / indicates to restart at the root of the resource. For file:/// URLs, this will start at the root of the filesystem, but it's still relative.
If you add the <base href="..."> it will prepend the ... to the URL, unless the URL is indeed absolute (begins with http://, ftp://, file:// etc)
If you use the base href as file:///where_i_downloaded/, you'll get resources linked from there (not from the root of the file system), or as http://www.foo.com/ which would force the browser to attempt to load from the original server (attempt, because URLs for AJAX services may not work with this).
I am examining some code for a friend, and have found that the developer who built his site began each and every relative src, href, and include with a forward slash /.
For example:
src="/assets/js/jquery.js"
I have never seen this before. So my question is, why would a developer place a forward slash / at the start of a relative path?
It's done in order to root the path (making it an absolute path).
It ensures that the path is not relative but read from the root of the site.
This allows one to move a file around and not have to change the links to the different resources.
Using your example:
src="/assets/js/jquery.js"
If the referencing file is in /pages/admin/main.html (for example) using relative paths you would use:
src="../../assets/js/jquery.js"
Suppose you move the file to a child directory. No changes would be needed for with the original rooted path, but the relative one would need to change to:
src="../../../assets/js/jquery.js"
Adding on #Oded's answer, the slash makes the URL absolute.
For example:
/foo/bar/baz.css
This translates to:
http://www.example.com/foo/bar/baz.css
But without the slash, things become a bit different:
foo/bar/baz.css
This tells the browser to look in the current folder (not the root folder) for the directory foo and then the subsequent directories and the file.
Also, take for instance this HTML:
<script type="text/javascript" src="foo.js"></script>
If you move the HTML file into another folder, then the script will not load, as foo.js isn't being moved with the HTML file.
But if you use an absolute URL:
<script type="text/javascript" src="/foo.js"></script>
Then the JS file is loaded EXACTLY from http://www.example.com/foo.js no matter where the HTML file is.
This is to ensure the asset comes from the "root" of the web server.
e.g.
Host is www.example.com
URL becomes www.example.com/assets/js/jquery.js
I do this with project I want to ensure live on their own virtual host.
The issue really comes down to where those assets are being included. For example if the asset is being included from /help/pages/faq then the developer can be sure the path will work correctly when the site is hosted on a non changing host, e.g. example.com.
The issue of using relative paths, 'assets/js/jquery.js' is that if the assets are included from the /help/pages/faqs then the path becomes relative to that starting point, e.g. /help/pages/faqs/assets/js/jquery.js
Hope that helps
This is a bit off topic, but if there is any chance that your application will ever be served behind a reverse proxy (eg. using apache2 or nginx) under a sub-path, you should try to avoid absolute paths.
For example, if you reference "/style.css" on https://example.com/, and you tried to hide it behind a reverse proxy at https://proxy.example.com/example/, your absolute reference would break. The browser would make the request to "https://proxy.example.com/style.css" when it should have requested "https://proxy.example.com/example/style.css".
Unintentional absolute paths from a leading forward slash are a nightmare for reverse proxies to deal with.
When opening a file from your hard drive into your browser, where is the document root? To illustrate, given the following HTML code, if the page is opened from the local machine (file:///) then where should the css file be for the browser to find it?
<link href="/temp/test.css" rel="stylesheet" type="text/css" />
You can, but probably don't want to, set the document root on a per-file basis in the head of your file:
<base href="my-root">
It depends on what browser you use, but Internet Explorer, for example, would take you to the root directory of your harddrive (eg. C:/), while browsers such as Firefox does nothing.
On a Mac, the document root is what you see in the window that appears after you double click on the main hard drive icon on your desktop. The temp folder needs to be in there for a browser to find the CSS file as you have it written in your code.
Actually, you could also write the code like this:
<link href="file:///temp/test.css" rel="stylesheet" type="text/css" />
Eric, the document root is the folder in which your file is, wherever it may be.
As far as local, static html goes, unless you specify it, most browsers will take the location of the html file you are viewing as the root. So any css put in there can just be referenced by it's name only.
The lazy way to get the correct reference for your css file is to open it in your browser. Then just grab the url that you see there - something like: file:///blah/test.css and copy that into your stylesheet link on your html: <link href="file:///blah/test.css" rel="stylesheet" type="text/css">
Either that or you can just take the url for the html file and amend it to refer to the stylesheet.
Then your local page should load fine with the local stylesheet.
If you're interested in setting the document root, you might look at getting a web server installed on your machine, or, if you already have one (like Apache or IIS), storing your project-in-development in the web root of that server (htdocs in Apache, not entirely sure in IIS). If you'd rather leave your files where they are, you can set up virtual hosts and even map them to addresses that you can type into your browser (for example, I have a local.mrwarshaw.com address that resolves to the web root of my personal site's development folder).
If you're on Windows and don't want to mess around with setting up a server on your own, you could get a package like XAMPP or WAMPP, though bear in mind that those carry the extra weight of PHP and MySQL with them. Still, if you've got the space, they're a pretty easy drop-in development environment for your machine.