I would like to host multiple versions of a SPA on the same site. I would like to use initial load paths like this:
http://host/myapp/1.0.1
http://host/myapp/1.0.2
However, if my html uses relative paths like "css/myapp.css", then these resolve to:
http://host/myapp/css/myapp.css
I know why this is, and I know if I use trailing "/" on the initial page loads it will work correctly, but obviously it would nice to not have to tell people to use the "/" on the end.
I suppose I could have the app adjust the base path on load, but that complicates the app somewhat. I am using vue and the solution would need to work at runtime, not compile time since i don't know all the subfolders the immutable app will be loaded from.
Is there a cleaner way to support multiple version-folders this way and have relative paths work properly?
Related
I originally transferred this project from windows to linux, and it was working completely fine on windows, but now images are not loading.
I have an image:
<img src="/assets/s1.png" alt="dinosaur">
And it is only loading on the webpage if I change the filepath to /home/user/Desktop/Project/assets/s1.png
The image file is in the folder assets and the assets folder and html file are both within the Project folder.
The weird thing is that when I change /home/user/Desktop/Project/assets/s1.png to /Desktop/Project/assets/s1.png it stops working. I would like to be able to only include the necessary path /assets/s1.png because I will need the path to stay the same if this project gets moved around between environments.
Based on a comment on the question:
the address of the page is file:///home/user/Desktop/Project/file.tpl
That's the problem then. The "root" of the "web server" (from the browser's perspective) is the root of the file system. So this absolute path won't work:
<img src="/assets/s1.png" alt="dinosaur">
But this one will:
<img src="/home/user/Desktop/Project/assets/s1.png" alt="dinosaur">
However, that latter one clearly won't be helpful in a web-hosted environment.
You can instead use a relative path, for example:
<img src="./assets/s1.png" alt="dinosaur">
This should work in the example given, but we can't know if this will have further implications in a larger and more complex web application. For example, if you're dynamically loading sections or templates from different folders, their "relative paths" may be different. (That's one advantage of absolute paths, they're the same regardless of what page you're on.)
But more to the root cause of the problem... You really shouldn't be testing a web page from the file system. The intent is to host it on a web server, so the testing should be hosted on a web server.
It makes little sense to make changes to the code in order to get it to work in an environment that will never be used, only to probably have to make more changes to get it to work in the actual target environment. Keep the test environment and the target environment as similar as possible.
I'm developing a website which will live on https://www.example.com/. While developing, and later as a test site, it's at http://127.0.0.1/temp-dir-for-my-project/.
This means that I currently have a bunch of hrefs in the HTML, as well as CSS files, starting with /temp-dir-for-my-project/, which obviously break once I'm done and upload it to the live site. Over there, it should be / instead.
Sadly, the BASE element, which I thought would solve this, only applies to relative paths. For example, ./meow.html with /temp-dir-for-my-project/ as the BASE would refer to /temp-dir-for-my-project/meow.html, but /meow.html in the same situation would be... /meow.html, because it's an "absolute" path.
Before you say "just use relative paths, then!", well... If I do that, I have to keep track of in which "dir" I am. For example, for the webpage at https://www.example.com/test.html, I could do: ./other.html and it would work both on the live site and in my test site (assuming the BASE is set). But the webpage at https://www.example.com/subdir/test.html would have to link to './../other.html' or else it wouldn't link to the correct page.
This gets messy. I wish I could use "absolute" paths and still have the BASE be the... base. Is there a way, or am I forced to use ./../../blabla... for any page located in subdirs (whether those be real subdirs or just how the URL is rewritten to look)?
The element is selected properly because other properties apply. There are no console errors.
I have tried:
img/hero.jpg - works when I click on link in VS Code
/img/hero.jpg - works when I click
../../hero.jpg - work when I click
../img/hero.jpg - doesn't work
the full path - works when I click
The problem is seen here. You can see that images called by the src attribute work.
Here is the file structure.
I honestly don't understand your setup / question, but I think if you understand how relative URLs work a little better you can figure it out yourself.
On your server you have your files in somewhere like,
/var/www/html/index.html
/var/www/html/css/styles.css
/var/www/html/img/background.png
On your computer you have your files somewhere like,
C:\Users\Nani\Desktop\Website\index.html
C:\Users\Nani\Desktop\Website\css\styles.css
C:\Users\Nani\Desktop\Website\img\background.png
And in your styles.css you have something like this,
body {
background-image: url('/img/background.png');
}
Starting the URL with / tells the browser to interpret it as the root directory. On a Windows PC it will be C:\ and on a Linux PC it'll be /.
However, when you access the page once it is online from a url like https://example.com, the root directory becomes https://example.com/.
Therefore, using /img/background.png will make it look for the image at https://example.com/img/background.png once it is online, but on your local machine it'll be looking for the image at C:\img\background.png
Starting the url without the slash like this, img/background.png looks for the image relative to the folder that the css file is in. So in that case online it'll look for the background here at https://example.com/css/img/background.png and on your local machine it'll look in C:\Users\Nani\Desktop\Website\css\img\background.png
In my example, the best solution would be to use ../img/background.png, that'll look up one directory relative to the css folder, and then in the img folder. That'll work consistently on both your own computer and once it is uploaded.
That should be enough to figure out what you need to do assuming that the problem is the way the url path is declared. Otherwise, the problem might be with something else. For example, it seems like you're using SCSS. Perhaps the SCSS isn't compiled on your local machine (or hasn't been in a while), but it is compiled on the live server?
It works on live server because its settings make location of index.html a root of your document (/). When you open index.html directly your root is different and images aren't loaded from correct location if you start the path with /.
Best Practice
It is best practice to use relative file paths (if possible).
When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.
I had the same problem and it turns out that I wrote the path wrongly. You have to write the url based on where the css file is, not where the index file is. Because the one that reads the url is the css file. So it should look like this:
body {background-image: url('../img/background.png');}
Because your CSS and your IMG are in different folders.
Ok, so the title tells very little of my issue.
Basically, I have a project written in node that does something. It's a website that uses express, jade and stylus. I have set up the routing for static content like this:
app.use(express.static('public'));
The website works fine and all the CSS loads properly if, in the HTML, I reference it like this (for example):
link(rel="stylesheet", href="global.css")
As expected, when I hover over the link in Chrome's element viewer, the URL is localhost/global.css
So now I've got a couple of these little project and I want to put them all together. They aren't related but I'd like to put them all on my website. For this I have made a new project that server like a hub for the other ones.
In it, I've setup routing like this:
var proj = require("../proj/server.js");
app.use("/proj ", proj);
and in each of the projects I have set the modules exports like this module.exports = app where app is their respective express app object.
This also worked like a charm. I didn't have to run a separate server instance on a separate port for each project. Instead, you can access them like localhost/proj/
Now here's where the issue starts. The CSS that is referenced in the generated HTML of each project doesn't point to localhost/proj/global.css. Instead it still points to localhost/global.css. And since there's no global.css in the public folder of my hub application, it doesn't find it.
I could, of course, just change the relative URLs to proj/global.css instead of just global.css and this does work, but it means that I need to modify all of my projects. It also means that I have one more string to change should I decide to change their names.
Besides, the URL already shows localhost/proj, so why can't it just be automatically implied that when I reference global.css it should be looked for in localhost/proj/global.css?
I'm sure there's some easy trick I'm missing. Maybe my relative URLs should have some extra stuff that says it refers to the current URL?
Edit:
It actually seems that the relative URLs work, but only if the address in the address bar is localhost/proj/. If it's localhost/proj it doesn't. What can I do to force that last slash?
I don't know if it can help you, but in express, you can define several "public" directories
router.use(express.static(path.resolve(__dirname, 'client')));
router.use(express.static(path.resolve(__dirname, 'public')));
router.use(express.static(path.resolve(__dirname, 'foo')));
If I find a webpage I want to tinker with and I save the source to the desktop, change a couple of bits, and then re-open - then often all the src and hrefattributes don't work as they are relative to the original hosting folder eg /Images/picture1.jpg or /Scripts/script1.js.
Is there a way to 'trick' the browser into persisting these relative references? Preferably without going through every one of them and appending a path to the front - which I have also tried but without success. What is the format of the fully qualified path name for these resources?
Let me know if I'm not being clear.
<base>