ERR_FILE_NOT_FOUND with JS and CSS files served locally without a webserver

Question

I can't link my CSS or other files to my HTML. I always get the error:

Failed to load resource: net::ERR_FILE_NOT_FOUND

And the strange thing is it works on the computer of my project partner. How is that possible? We have the same code.

This is the part of my code:

<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/custom.css" rel="stylesheet">
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/register.js"></script>
<script src="/js/login.js"></script>

What is the path of the html file? Is it the same of css and js subfolders? — Absalon Castañon, Jan 05 '17 at 15:43
if you have css and js folders in same directory where you have the html, try using for example href="css/bootstrap.min.css" , remove the first slash. — Qammar Feroz, Jan 05 '17 at 15:44
You're trying to run off your local filesystem alone, meaning a root-relative link (IE starts with `/`) will go to the root of your whole file system! A webserver such as Apache or IIS will designate a *web-root* so that your root-relative links work as expected. Alternatively, you can use relative links exclusively. — sytech, Jan 05 '17 at 15:45
http://stackoverflow.com/questions/10659459/starting-with-a-forward-slash-in-html-for-href check this link....have a look — Pravin Durugkar, Jan 05 '17 at 15:50

score 7 · Accepted Answer · answered Jan 05 '17 at 15:44

It's very difficult to know without seeing your directory structure. But it seems likely that removing the leading / from your file path will solve the issue. I'm willing to bet that you're unintentionally referencing an absolute path instead of a relative one.

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/register.js"></script>
<script src="js/login.js"></script>

@Addy2311 the files path should be relative to the HTML file. The problem is either the absolute paths, or that you're accessing the HTML file without a webserver. — Emile Bergeron, Jan 05 '17 at 20:38

score 3 · Answer 2 · answered Jan 05 '17 at 15:47

The leading slash tells that you want to link the files from a root. If you were viewing this page on e.g. http://www.example.com the files will be linked from http://www.example.com/css/bootstrap.min.css, even if your current page is http://www.example.com/folder/folder/page.html.

Since you're only using Windows without webserver, the root is C://. A solution would be to use relative paths instead of absolute paths.

For example:

<link href="css/bootstrap.min.css" rel="stylesheet">

In the previous example the file you link (with relative paths) will be in http://www.example.com/folder/folder/css/bootstrap.min.css if your current page is http://www.example.com/folder/folder/page.html.

score 1 · Answer 3 · answered Jan 05 '17 at 15:49

Your URLs use absolute paths (i.e. they start with /) which makes them relative to the root of the website.

This is excellent when you want to write links that:

Work anywhere on the website, even if the HTML is shared between pages with different numbers of / in the path segments as your main navigation is likely to be
Work in both a development environment and a production environment

In this case it is failing because your development environment doesn't involve a web server.

You are loading the files into the browser directly from your local hard disk without going through an HTTP server. This makes the root of your website be the root of your hard disk (instead of the folder you are keeping the files in).

The solution: Install an HTTP server and tell your browser to fetch the files from http://localhost.

This will provide other benefits, such as being able to test Ajax code in your development environment.

ERR_FILE_NOT_FOUND with JS and CSS files served locally without a webserver

3 Answers3