Loading local file in browser referenced css or js

Question

This could be a basic problem but some how is not working for me.

Here is my html:

<!doctype html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <base href="/">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="app/app.css"/>
  </head>
  <body ng-app="App">
    <div> Hi There</div>

    <script src="app/vendor.js"></script>
    <script src="app/app.js"></script>
</body>
</html>

This file is located at: file:///Users/kiran/Documents/app/dist/public/index.html Referenced files are located at:

app.css: file:///Users/kiran/Documents/app/dist/public/app/app.css
vendor.js: file:///Users/kiran/Documents/app/dist/public/app/vendor.js
app.js: file:///Users/kiran/Documents/app/dist/public/app/app.js

However, when I tried to open the file using browser->open, it says it cannot load the files with error:

Failed to load resource: net::ERR_FILE_NOT_FOUND file:///app/app.css
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///app/vendor.js
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///app/app.js

Behavior is same in firefox though error message is different. What do I have to do to make it work? Appreciate the help.

Note: It works fine when I run a webserver, but I need to make this work with local references and also on webserver.

msapkal · Accepted Answer · 2014-10-09 13:31:26Z

7

That's happening becuause you have <base> tag.

The base URL to be used throughout the document for relative URL addresses.

Since the base URL href is '/', it always start from root. So on local machine it doesn't find any css/js files, as it would check the files from root i.e. C/D/E drive. And it totally works fine for webserver, since the root would be your public folder.

Get rid of base tag.

answered Oct 9, 2014 at 13:31

msapkal

8,3462 gold badges34 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Martijn de Langh · Accepted Answer · 2014-10-09 13:32:25Z

1

remove

<base href="/">

edit links with ./ prefix

src="./app/vendor.js"

answered Oct 9, 2014 at 13:32

Martijn de Langh

4253 silver badges16 bronze badges

Collectives™ on Stack Overflow

Loading local file in browser referenced css or js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related