I would like to call script and css from site root.
I have a dev environment using wamp so my route is localhost/mysite/js/script.js.
My prod environment will be mysite/js/script.js.
I would like to call script from root, what should be the route if I'm not in the root folder and don't want to use ../?
The reason for that is I imagine a much more complex arborescence and I want to avoid excessive ../../../../[...] and I'm wondering if there is something for this.
Let's say I've a page in pages/contact.html and I want to call scripts/contact.js
If I call scripts/contact.js : 404 because I'm in the pages folder.
If I call /scripts/contact.js : It will work in mysite.com but won't in local because I need to call /mysite/scripts/contact.js.
Thanks for your help.
As #peter-krebs mentioned, the cleanest solution would be to spin up an isolated web server to develop this project in. You could use XAMPP as suggested but a containerized approach using Docker might be more flexible.
Alternatively, you can add a <base href="/mysite/"> tag to the head of all your pages and write all your paths as relative to that directory. You will have to specify all of your resource paths (js, css, images, links) using this relatively-absolute method though. Meaning you won't be able to directly access relative resources in the same directory anymore.
For example, if pages/contact.html needed the file pages/contact.js you could not use the path ./contact.js from within contact.html. You would have to specify pages/contact.js even though those files are in the same directory.
When you move the site to production, just change the base to <base href="/"> and everything will continue to work as expected. You could even do this in an automated way by adding the following script to your document head.
<!DOCTYPE html>
<html>
<head>
<script>
let base = document.createElement('base');
base.href = (document.location.host == 'localhost') ? '/mysite/' : '/';
document.currentScript.replaceWith(base);
</script>
...
Related
So I'm trying to access my root directory in HTML but when I use / it is not working. So for example I'm trying to get my navigation css by doing:
<link rel="stylesheet" href="/nav.css">
The weird thing is, it works perfectly fine when I am using VS Code with the live server extension, but I just recently noticed when I run the index.html file alone none of the links starting with the / work. I know this is the issue too, because when I take away the / in the above line, it works perfectly fine again (only for the homepage page in the root directory already).
As Quentin points out, if you're loading the index.html file locally without a server, the root directory will be the root of your file system. If your requirement is for the index.html file to work locally on your professor's machine without a web server, you should use relative paths.
In order to traverse back up your file system from the current file, you can use paths that start with ../
when I run the index.html file alone none of the links starting with the / work
If you are running index.html alone then the links starting with / will be relative to the root of your file system.
The browser doesn't (and can't) know which directory represents the root of your web site project.
Use a web server. Load the data over HTTP.
Try this:
./nav.css
It (I mean, ./) loads files in the same directory of index.html, same as nav.css. With VS Code, I bet ./nav.css should work for the live preview too: using an external HTTP server (such as http-server on Node.js) helps, because it takes the current directory (where index.html is) as the root and you can easily reach /nav.css. Without a live server, the relative path could be reached as I said with ./nav.css (a typical *NIX path) or simply nav.css without slashes on Windows.
As others have indicated then the reason it's not working is because by loading the file directly you are now loading it as a local file rather than a file on website, and thus your URL base (Your /) is now referring to the root of your local file system. Which would likely be C:\ on a windows system or your actual root / on a *nix system.
To actually solve your issue I would suggest one of the following solutions:
Just always run the project over HTTP through a server.
Go through your project and change all of your paths to be relative paths. You might be able to use a find replace in your editor to do this.
Use a <base> tag to specify what the base href of your web page should be.
If you can't use a server and just have a single HTML file then it might be quickest to use fix 3. You can probably get away with using <base href="."> to make the base the current directory of your index.html file which, I suspect, will be a drop in solution to make things work as they did before.
In future best consider this and how you are going to run the file, and what your URLs are going to be relative to. It's a wrinkle that can be easily missed nowadays that the tools we use in development are so good at hiding the details of how websites are actually deployed.
I don't think <base> is a good idea.
It will change the base href in the whole page, which might cause problems when using other links or section navigation.
I know ../ means go up a path, but what does ./ mean exactly?
I was recently going through a tutorial and it seems to be referring to just a file in the same location, so is it necessary at all? Can I just not use it if that's all it's doing?
/ means the root of the current drive;
./ means the current directory;
../ means the parent of the current directory.
You can use the following list as quick reference:
/ = Root directory
. = This location
.. = Up a directory
./ = Current directory
../ = Parent of current directory
../../ = Two directories backwards
Useful article:
https://css-tricks.com/quick-reminder-about-file-paths/
./ is the the folder that the working file is in:
So in /index.htm ./ is the root directory
but in /css/style.css ./ is the css folder.
This is important to remember because if you move CSS from /index.htm to /css/style.css the path will change.
. = This location
.. = Up a directory
So, ./foo.html is just foo.html. And it is optional, but may have relevance if a script generated the path (relevance to the script that is, not how the reference works).
Yes, ./ means the current working directory. You can just reference the file directly by name, without it.
A fast and small recap about paths
Absolute paths
http://website.com/assets/image.jpg
IF the image is not on your domain - go look there for image
//website.com/assets/image.jpg
image loaded using http or https protocols
Relative paths
(For internal use if the image is on the same server)
image.jpg
image in the same place as the document calling the image!
./image.jpg
Same as above, image in the same place as the document calling the image!
/assets/image.jpg
Similar to Absolute Paths, just omitting the protocol and domain name
Go search my image starting from my root folder /, than into assets/
assets/image.jpg
this time assets is in the same place as the document, so go into assets for the image
../assets/image.jpg
From where the document is, go one folder back ../ and go into assets
../../image.jpg
go two folders back, there's my image!
../../assets/image.jpg
go two folders back ../../ and than go into assets
You are correct that you can omit it. It's useful only for clarity. There is no functional difference between it being there and not being there.
For example css files are in folder named CSS and html files are in folder HTML, and both these are in folder named XYZ means we refer css files in html as
<link rel="stylesheet" type="text/css" href="./../CSS/style.css" />
Here .. moves up to HTML
and . refers to the current directory XYZ
---by this logic you would just reference as:
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
Yeah ./ means the directory you're currently in.
Do NOT use ./ as a web path! I explain why and what it is below...
TRUE WEB PATHS YOU SHOULD ALWAYS USE
../siblingfolder/file.html is a web path that starts from the folder you are in, goes up one parent folder (../), goes down into a new folder called "siblingfolder" and to "file.html" inside it. This is a type of relative path in the web world.
childfolder/file.html is another kind of web path that starts from the folder you are in and goes down to "childfolder" and "file.html" inside it. This is also as a relative path.
/subrootfolder/file.html is a web path that starts from the web root of your website and goes down from the web root into "subrootfolder" as an absolute path. Note: This path has the added advantage in that it works from any file and folder location on the server.
http://somewebsite.com/subrootfolder/file.html is another web path which works exactly the same as the ones above, but requires your web domain in the path. It still works but is very limiting because the web domain is hard-coded into the path. Some call this a fully qualified web path, which has some uses. The web browser also resolves most file paths to this address or an IP version of it.
AWKWARD AND RARELY USED PATHS
. is a shorthand for the current location or file context and is used in Linux and Unix to execute a compiled program in the current directory. That is why you don't see this used in Web Development much except by open source, non-Windows frameworks like Google Angular which was written by people stuck on open source platforms.
./ also resolves to the current directory and is atypical in Web but supported as a path in some open source frameworks. Because it resolves the same as no path to the current file directory its not used. Example: ./image.jpg = image.jpg. Even though it is used by software to identify a current folder location, because it is identical to the current software path or file location, it is the same as no path so redundant. Again, this is a relic of Unix operating systems that need path resolutions like this to run executables and resolve paths for security reasons. Its not a typical web path. That is why this syntax is redundant in HTML and web technologies.
//somewebsite.com/folder/folder/file.html this is a form of a fully qualified web URL resolution format. "//" tells the web browser to determine the fully qualified web URL/URI at runtime and concatenate the right http protocol onto the front of your path as so: https://mywebsite.com/folder/folder/file.html. It allows the browser to query one of many web domains and determine the most secure location or protocol to use: Either "http" or "https" as the most favorable and secure prefix. This is rarely used in most internal web paths but likely found in link href attribute paths in newer HTML5 elements and used when adding links to resources that may resolve to unknown dynamic secure socket layer connections at runtime that change.
PATH EQUIVALENTS
folder = /folder a relative path is the same as an absolute path in this case if the file accessing this child "folder" is located under the web root directory. Both paths would work the same for them.
../folder = /folder a relative path going up to a parent folder then down to "folder" is the same as the absolute path if the file accessing this path again is in the web root directory.
./folder = folder both relative paths start with the files current folder and point to the child "folder" under them no matter where these folders are located, so are the same. "./" is therefore redundant.
./file.html = file.html both relative paths point to the current folder and then to a "file.html" inside that folder. This means use of "./" is redundant.
./ = {no path} an empty path is the same as ./ in the web world so redundant again.
./ = / only true again if the file is under the web root folder. Again this means "./" is redundant.
MY WEB PATH RECOMMENDATIONS
ALWAYS use Absolute Paths ("/myfolder/myfile") whenever possible as they will always work from any file location in the web project, add no confusion to developers, moving files with absolute paths will not change paths, and they are easy to maintain and manage. The only drawback to absolute paths is if you move the files or folders being pathed to new locations (example: You move an image or CSS folder of files to a new location later in the project). That is why I recommend you manage paths via server-side virtual paths, application paths, or server-generated variables so you can change absolute paths dynamically as you move things around.
ALWAYS use Relative Web Paths ("../myfile") as a secondary option. These are a must for CSS file paths, CSS imported files, or font paths within CSS files. They should only be used if your web application is designed with many parallel applications running side-by-side under one domain, and have nested and heavily dependent resource files running inside them that must be separated. In that one case, you will often move these applications as one module deeper into the application making relative pathing more valuable. You will determine paths relative to the source files in that case and not relative to the web domain via absolute paths. As above, I would still manage paths via server-side or virtual application generated paths. This makes paths extremely simple, robust, and easy to dynamically update on the fly via server variables rather than inside scripts and dependencies which constantly evolve.
NEVER use the other paths listed unless forced to by atypical, 3rd party, proprietary software conventions that use substandard pathing solutions that add confusion and added maintenance. :(
./ = Current directory
This is correct but as i figured out from some templates that i worked on before, the purpose of this identification is to remind the developer that the file to be accessed is not actually in the same directory as the HTML file being worked. Yes, I know it sounds weird.
Developers who use such definitions usually put a <base href=""> tag at the beginning of the HEAD block of the HTML page. Double quotes also indicate the directory they want to reach, so they don't have to define phrases like "../images" to access all of the image files that are not in the same directory as the HTML.
For example,
/main
/ /assets
/ / /css
/ / /images
/ / / /logo.png
/ /html
/ / /demo
/ / / /index.html
/ /plugins
every time you want to access the files in the images folder from the index.html file on a website with a directory structure like above, you need to use the src="../../assets/images" path. If you specify <base href="../../assets"> instead, you can now just use "images/" or "./images". Of course, remember, in this case, you will need to specify the file locations accordingly, as other page links will also be based on that <base> tag. So it's up to you whether you need to use it or not.
I did not wrote this to find the correct answer. This is my experience about the "./" usage so i wanted to share it. I hope it could help anybody.
In reference to the quick reference list, specifically you can use the following :
\.\ Root Directory + Current directory (Drive Letter)
applications: http://localhost:8080
reusable components: http://localhost:8080/components/myapp/
These are the two paths that allow me to access my prooject after I run polymer serve
Using app-route element, I can change the myapp part. But I want to remove the components part.
So, what I want is http://localhost:8080/myapp/
How can I achieve this?
I think you are getting confused between urls represented by the server and the logical urls that "Normally" don't even get passed to the server. <app-route> (and its companion part <app-location>) rely on pushing state into the address bar of the browser but that doesn't normally mean a request to the server to fetch a file.
I say "Normally" because obviously the user could copy and paste the address bar into the browser (or just refresh the page when its displayed in the browser) and that causes that url to be sent to the server. Normally a server should automatically respond to those "Not real files" requests with "/index.html".
Polymer serve doesn't really try and address this sort of thing. Its mainly a quick server for your application testing. The first url it offers (http://localhost:8080) will be what you use if you have a full app. Your index.html file should sit at the root of the url (ie the directory you run polymer serve from) and it will then use html imports to load your components from which ever subdirectories they happen to be in. Your urls should reflect that. So if you main app is in the src/ subdirectory you should refer to it <link rel="import" href="/src/my-app.html"> NOTE IT IS IMPORTANT TO REFER TO IT VIA AN ABSOLUTE URL SO THAT WHEN A USER PASTES the url into the address bar and the server returns /index.html the elements it then requests are at the correct path and not somewhere like /application/logical/path/src/myapp.html
The second url it offers is basically you are building your own element that will ultimately go in someone elses bower_components but which for now your are developing in its own repository with its own bower_components directory at the same level as the element. Your element will want to import something like <link rel="import" href="../polymer/polymer.html" but in physical directory terms would be at bower_components/polymer/polymer.html. In this case polymer is mapping bower_components to http://localhost:8080/components and your root to http://localhost:8080/components/myapp. So when your refer to../as part of your relative its basically insidebower_components/` already and will therefore pickup the rest of the reference to your element OK.
I'm having problems setting URLs in a particular situation. I have a Dreamweaver template, that uses the usual relative to domain URLs (e.g. "/images/foo.png"). This works fine on the server, but in the local environment, it has issues, as it thinks the name of the network drive it is on is the domain, rather than the folder it is in on the drive.
So where as it should be "file://networkdrive/localsite/images/foo.png" it's "file://networkdrive/images/foo.png", this is obviously causing broken links, and if I use other relative URLs, such as "../images/foo.png" then I will have to amend the links every time I make a page that drills further down in the site structure.
I did have one solution, creating a mapped drive pointing at that folder, then "Z:/" was the first layer, and it all worked. That was until our communications team needed to see it on their Macs, Macs can't do drive letters as I've found from Googling, so I'm back to the same problem as before.
Any ideas on how I could force the URL to be correct when using "/images/foo.png"? This will save me a lot of headaches when creating pages if it could be done.
Run a local web server, like Nginx, lighttpd, Apache, or Python’s out of your project directory:
python -m http.server # Python 3
python -m SimpleHTTPServer # Python 2
This comes closest to a real environment for development, and it’ll allow you to test things like server-side code and Ajax.
Alternatively, you can use relative URLs everywhere, and one <base> tag per page.
<base href="../">
Don’t.
On my webpages, I typically have something like this:
<link rel='stylesheet' href='/global.css'/>
However, the problem with that is if I am testing my website on my computer, I will store it in a folder like C:/Websites/My Websites/ (for example). The problem is that when I test it locally, /global.css points to C:/global.css, because the root is the C drive.
Is there a way to manually override this root so I can test my webpages locally? If so, how? If not, is there any other way to enable me to test these pages locally?
Not sensibly.
Just install a web server on your development machine (and test via http://localhost). This will also be useful when you need to develop server side code.
try 'global.css' without the slash at the beginning. It will point to the directory you are in at the time.
EDIT: There seems to be some confusion:
you can traverse directories using something like 'cssFile/global.css.'
Also, you can use *../global.css' to traverse upwards.
That should help you find the file you need.
Still, i agree that using a local server is the right way to go.
You need to use relative paths. So if both the HTML and the referenced CSS file live in C:/Websites/My Websites/, you'd use global.css or ./global.css.
Alternatively, you can run a local web server and set its document root to C:/Websites/My Websites/. You can then reference any linked resources (inter-site links and paths to images, CSS and JS) with the absolute path notation, e.g. /global.css, /images/something.png, /scripts/foo/bar.js. The advantage of using absolute paths is that you don't have to change the paths to resources in an HTML file if you move the HTML file up or down in the folder hierarchy.
For quick and easy local testing of static sites (plain HTML/CSS/JavaScript), I'd recommend mongoose. It's a tiny exe that doesn't need installation, just drop it anywhere, tell it what your document root directory should be, and you can get going.
For more fully-featured development environments (Apache server, PHP, databases), look at WAMP, XAMPP or Uniform Server.