Building a Static Website in a Folder: Relative Paths
I'm not sure how to ask the question properly as I'm not very fluent in english.
I know about absolute paths and relative paths. I also know that relative paths can either be relative to the domain or root folder, or relative to the file itself.
When I build a static site inside a folder I manually created without the help of builders (e.g. creating a new .html file, .css file, etc manually and structuring it properly inside my folder) I can move that folder wherever I want to, I would only have to make sure that whenever I call an asset inside an html file, the path should be relative to the html file itself, and the website will work almost 100% of the time. However, I noticed that whenever I build a website with the help of a builder (e.g. Astro.build with npm run build command), naturally it spawns a dist folder where the website will live, the website only works if you put it in the root folder of the domain want, or configure the builder to build the website so that it will work in a sub-folder of the domain you want (e.g localhost/subfolder).
When the builder builds the website like that, it almost always uses paths relative to the domain or the subfolder of the domain I configured it to, causing it to only work on either the root, or if i configured it to the subfolder, the specific subfolder. The website won't work if I move the folder wherever I want to, like for example if i want the folder in my downloads folder, the index.html file won't look like what i intended it to look because the paths to the assets like the css files and images, all points from the root to where the assets are supposed to be, instead of pointing from the index.html file to the assets.
I guess my question is, why does builders almost always use the paths relative to the root? Wouldn't it be very convenient for builders to spawn the dist folder and the website would work anywhere regardless of where the dist folder is?
2 Replies
why does builders almost always use the paths relative to the root?Paths starting with a
/ are absolute paths in web server terms because for them, the document root/web root is where the public world begins. You can't reach outside and access other directories for security reasons.
You could with relative paths.
So I suppose you need to ask the builder and bundler makers why they do this, and security might be one of the reasons.
My other guess is: absolute paths starting in the web root for everything is much easier to deal with. It can be very tricky to track relative URLs within relative URLs esp. if you move files and your code editor didn't track or understand these location changes.
Back in the days I sometimes launched DreamWeaver only to have it track and update the paths when I had to restructur a site.
I frankly haven't tested whether VSCode or WebStorm would still do this today.
But you're absolutely right: it would much more convenient to just move the "dist" or "www" folder anywhere and one could simply click index.html to open it with all assets present from the local disc.
I eventually installed a simply HTTP server on both my phone and tablet to showcase and test these static files via "127.0.0.1" on such devices.
On my desktop I still have PHP which comes with a built in web-server that can so the same with "localhost". It's also easy to copy PHP on a USB stick and run the site from there. No need to install anything; Node, NGinx, Apache, whatever.
That's my workaround and it bothers me that I have to run a web-server to see these static files.
I once tried search and replace, but that didn't end well for some assets.Hey there, thanks for taking the time to explain why builders use absolute paths starting from the web root. As someone who's still learning about web development, I'm always curious about the "why" behind things.
I guess someone old and experienced in the old web and the modern way of doing things would have answers for me. But your insights have definitely shed some light on the subject.
Thanks again for your help, I really appreciate it!