I am running a simple HTTP server using python. I have an HTML file with the following script tag:
<script src="../../build/react.js"></script>
The file is present in the right place if the relative URL is followed, but both Chrome and Firefox, look for base/build/react.js instead of base/../../build/react.js.
I remove the relative path, and it works fine as expected. Why are the relative paths not working?
Perhaps could you define "base"?
My answer assumes that "base" is the "base URL/domain" of your website:
e.g. base == http://www.google.com/
The base directory is essentially acting as the root of your directory... accessing the parent of the root directory is a logical fallacy (a root has no parent). When you seek the parent of a root directory, most programs will simply return the root.
For example, I'm assuming your site has the following layout:
www.google.com/
├── css/
│ └── theme.css
├── js/
│ └── jquery.js
└── html/
└── home.html
Suppose home.html uses the following code:
<link href="../css/theme.css" rel="stylesheet">
<script src="../../js/jquery.js"></script>
Because the parent directory of html/ is the root directory, both will translate to:
www.google.com/css/theme.css
www.google.com/js/jquery.js
Related
I am combining many small semi-static, single-page webapps into one larger web site. The backend is a lot of proxies, but the forward facing server basically just make it look like the app was moved from the root filepath to a more specifics one. IE:
/
├── css
│ └── app1.css
├── index.html
└── js
└── app1.js
would be moved to
/apps/app1/
├── css
│ └── app1.css
├── index.html
└── js
└── app1.js
This migration has been relatively painless mainly due to the use of ./ in the apps' html files, such that most apps just load their resources relative to their new location. The problem I am having is that some apps are resolving ./ differently. For these trouble cases, the primary html file gets loaded; however, the ./ in the script and style elements are resolving to a higher file-path (IE: I would expect ./ to resolve to /apps/app1 but am getting /apps). It may be a coincidence, but the troubled apps often have additional, non-index HTML files.
What are the rules for how ./ is resolved?
Determine the base URL
This is usually the URL of the HTML document
It might be overridden by the base element
For CSS it is the URL of the stylesheet
JS is always with respect to the HTML document
Remove everything after the last / in the path section of the URL
e.g. the base URL for https://example.com/example/foo?bar=baz#fragment is https://example.com/example/
Keep in mind that an HTML document might be visible at the path /example and /example/ and you should avoid this by making one path canonical (I prefer the one that ends in a /) and redirecting to it from the other
Strip the ./ from the front of the relative path
Append the result of step 3 to the result of step 2
A common gotcha is to confuse URLs with file paths. While a simple static site will usually have a direct 1:1 mapping between them, many modern sites will use routing code (e.g. for Express for HTML documents and a separate static route for static files like images, js and css.
I am trying to deploy some ui components on Netlify. However, it is not recognizing my index.html files inside the subfolders. Hence nothing is showing up on my deployed site. Also, all 3 index files have links to each other. This is my file structure
├── ui-components
├── blog-cards
│ └── index.html
├── login
│ └── index.html
├── ads-manager
│ └── index.html
Do I have to delete my subfolders and bring out my index files for it to deploy on Netlify or is there any way around it?
Edit:
I made some progress by doing this instead by putting a _redirects file in the root of my app as suggested
/ /blog-cards/index.html 200
/login /login/index.html 200
/ads-manager /ads-manager/index.html 200
It's finding my index.html inside the blog-cards folder however it's not loading my css file now. Full folder structure
├── ui-components
├── blog-cards
│ └── index.html
│ └── style.css
│ └── images
Here's a link to the netlify site
You don't have a main index.html file, which is why nothing is showing up on your deployed site. You should add something there, even just a blank page or a placeholder with links to the other projects.
You probably don't have to though, just browse to <siteurl>/ui-components/blog-cards and that should work.
Update after further comments.
If there is a subfolder you want the site to automatically go to upon landing, then you can use Redirects.
For example, putting the below in a file called _redirects in the root of your app will do what I think you need:
/ /ui-components/blog-cards 200
/login /ui-components/login 200
/ads /ui-components/ads-manager 200
(the 200 status code means that it will be a redirect under-the-hood, which makes the URL stay clean as you have said.)
Update
Yeah, so the forwarding is making the .css files to fail to load.
<link rel="stylesheet" href="style.css"> will look at the current URL and add style.css to it, which is obviously not what you want.
You could change to forwarding it with a 302, which would mean the new (not nice) URL would show up, but then the css path would resolve correctly.
Alternatively, you could add a second stylesheet link that looks for ./blog-cards/style.css.
Or if the css is small enough you could inline it, making it all simpler.
Background image is not showing because of image path problem.
css code
background-image: url("images/menu_home_icon.png");
My actual image path is EZ_MOVERS/images/menu_home_icon.png.
But it shows EZ_MOVERS/css/images/menu_home_icon.png while I checking through Inspect Element.
I can't find from where /css comes.
Anybody help please ?
Probably because the stylesheet is located in the /css folder. Remember that the paths in the file are relative to the stylesheet's path. Based on my understanding, your directory structure looks a little like this:
EZ_MOVERS
│
├── css
│ └── <stylesheet>.css
└── images
└── menu_home_icon.png
So if you want to traverse a directory up and then select the /images sibling folder, use ../images/menu_home_icon.png.
Is there a way to change the "current working directory" of the contents of a
<script> tag? The directory structure on my server looks like:
├── css
│ ├── flexigrid.css
│ └── images
│ ├── bg.gif
│ ├── ...
│ └── wbg.gif
└── js
└── flexigrid.js
3 directories, 21 files
So if I just had the following tag in my <head> I would be okay:
<link rel='stylesheet' type='text/css' href='/css/flexigrid.css' />
But I am loading the contents of the file as text and inserting them into the
head w/ javascript:
// 'css' is a string containing the text of flexigrid.css
var css_el = document.createElement('style');
css_el.type = 'text/css';
css_el.innerHTML = css;
document.getElementsByTagName('head')[0].appendChild(css_el);
As a result, lines like this in the stylesheet:
background: #eee url(images/line.gif) repeat-y -1px top;
load URLs like /images/line.gif instead of /css/images/line.gif. Is there
a way to create the <style> tag such that the url() calls start in the
/css directory instead of the base directory without having to
search-and-replace in javascript?
This ability and caching of the CSS are two major things you lose when you include CSS inline.
One thing you can do for tiny images, like a bullet or line, is convert them to a data: URL, and not worry about relative URLs.
Eventually you could create a .htaccess file with mod_rewrite directives.
But I think a way with JavaScript or CSS is not possible.
Is there a way to have all links on a page be relative to the root directory?
For example, on www.example.com/fruits/apples/apple.html I could have a link saying:
Back to Fruits List
Would this link be pointing to www.example.com/fruits/apples/fruits/index.html or www.example.com/fruits/index.html? If the first, is there a way to have it point to the 2nd instead?
A root-relative URL starts with a / character, to look something like link text.
The link you posted: Back to Fruits List is linking to an html file located in a directory named fruits, the directory being in the same directory as the html page in which this link appears.
To make it a root-relative URL, change it to:
Back to Fruits List
Edited in response to question, in comments, from OP:
So doing / will make it relative to www.example.com, is there a way to specify what the root is, e.g what if i want the root to be www.example.com/fruits in www.example.com/fruits/apples/apple.html?
Yes, prefacing the URL, in the href or src attributes, with a / will make the path relative to the root directory. For example, given the html page at www.example.com/fruits/apples.html, the a of href="/vegetables/carrots.html" will link to the page www.example.com/vegetables/carrots.html.
The base tag element allows you to specify the base-uri for that page (though the base tag would have to be added to every page in which it was necessary for to use a specific base, for this I'll simply cite the W3's example:
For example, given the following BASE declaration and A declaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Our Products</TITLE>
<BASE href="http://www.aviary.com/products/intro.html">
</HEAD>
<BODY>
<P>Have you seen our Bird Cages?
</BODY>
</HTML>
the relative URI "../cages/birds.gif" would resolve to:
http://www.aviary.com/cages/birds.gif
Example quoted from: http://www.w3.org/TR/html401/struct/links.html#h-12.4.
Suggested reading:
http://www.motive.co.nz/glossary/linking.php
http://www.communitymx.com/content/article.cfm?cid=AEDCC52C4AD230AD
Use
Back to Fruits List
or
Back to Fruits List
If you are creating the URL from the server side of an ASP.NET application, and deploying your website to a virtual directory (e.g. app2) in your website i.e.
http://www.yourwebsite.com/app2/
then just insert
<base href="~/" />
just after the title tag.
so whenever you use root relative e.g.
<a href="/Accounts/Login"/>
would resolve to "http://www.yourwebsite.com/app2/Accounts/Login"
This way you can always point to your files relatively-absolutely ;)
To me this is the most flexible solution.
Back to Fruits List
Relative Path Summary (applicable to href, src etc.,):
/file_Or_FolderName Root directory
./file_Or_FolderName Current directory
../file_Or_FolderName Previous directory (One level up)
../../file_Or_FolderName Previous of previous directory (Two levels up)
../../../file_Or_FolderName Just like above - Three levels up
Example:
www.example.com
├── apple.html
└── FolderA
├── fileA.html
└── FolderB
├── fileB.html
└── FolderC
├── fileC.html
└── FolderD <------ Suppose you're here (current directory)
├── fileD.html
└── FolderE
└── fileE.html
Following shows how to access the file at different levels using the relative path (applicable to href, src etc.,)
fileD.html - same level access(or)
./fileD.html - same level
./FolderE/fileE.html - 1 level Down
../fileC.html - 1 level Up
../../fileB.html - 2 levels Up
../../../fileA.html - 3 levels Up
../../../../apple.html - 4 levels Up (or)
/apple.html - 4 levels Up but direcly using root /
To give a URL to an image tag which locates images/ directory in the root like
`logo.png`
you should give src URL starting with / as follows:
<img src="/images/logo.png"/>
This code works in any directories without any troubles even if you are in branches/europe/about.php still the logo can be seen right there.
Use this code "./" as root on the server as it works for me
Back to Fruits List
but when you are on a local machine use the following code "../" as the root relative path
Back to Fruits List