Not allowed to load local resources

Question

When I try to link my html page to my javascript files in my express app, I get the error above in my developer tools. I am running this in an express app with an hbs rendering engine on my local machine. The code snippet looks like this

html

<script type="text/javascript" src="file:///public/javascripts/jquery/jquery-2.2.4.min.js"></script>
<script type="/javascript" src="file:///public/javascripts/receiver.js"></script>
<script type="text/javascript" src="file:///public\javascripts\jquery-2.2.4.min.map"></script>

this is the part from app.js that sets the view engine

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

and when I check the developer tools, I get this console error

Not allowed to load local resource: file:///public/javascripts/jquery/jquery-2.2.4.js (index) :1 Not allowed to load local resource: file:///public/javascripts/receiver.js (index) :1 Not allowed to load local resource: file:///public/javascripts/jquery-2.2.4.min.map

Why does the program not access my javascripts?

Answer 1

First.

Do not load files with file://. Just enter the relative path. Do not load javascript source maps via the script tag. You can add this line at the and of the javascript file: //# sourceMappingURL=/path/to/script.js.map

Second.

You have this little line of code in you express app: app.use(express.static('public'));. If not, add it. The server knows the public path. So you don´t have to write public/

If this is your structure:

• server.js
• public/
  • index.html
  • javascripts/
  • receiver.js
  • jquery/
    • jquery-2.2.4.min.js

Write this into your html or handlebars file.

<script type="text/javascript" src="javascripts/jquery/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="javascripts/receiver.js"></script>