Why would a developer place a forward slash at the start of each relative path?

Question

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?

Flatfoot

Answer 1

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"

Owner

Answer 2

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.

Retroaction

Answer 3

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

Scintillate

Answer 4

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.

Needful

Answer 5

Yes user1869743, but you can use:

async rewrites() {
    return [{ source: "/" + name + "/_next/:path", destination: "/_next/:path" }]
}

in the next.config.js to avoid reverse proxies conflict

Beavers