CODEWITHSUNDEEP
javascripthtml
Shalomi90
Shalomi90

Reputation: 744

ERR_FILE_NOT_FOUND with JS and CSS files served locally without a webserver

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.

screenshot of the errors

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>

Upvotes: 2

Views: 13006

Answers (3)

Quentin
Quentin

Reputation: 943598

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.

Upvotes: 1

Mark
Mark

Reputation: 3272

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.

Upvotes: 3

TrampolineTales
TrampolineTales

Reputation: 826

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>

Upvotes: 7

Related Questions