0

I have installed Handsontable as it's shown on its documentation using bower:

bower install handsontable --save

and i added these links to the view.ejs

<script src="/dist/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="/dist/handsontable.full.css">

but i got the follwoing 404 errors in the browser

"NetworkError: 404 Not Found - http://localhost:3000/dist/handsontable.full.js"
handson...full.js

"NetworkError: 404 Not Found - http://localhost:3000/dist/handsontable.full.css"
handson...ull.css
ReferenceError: Handsontable is not defined in  

var hot = new Handsontable(container, {

even when i tried to change links to the absolute file location (project's root as reference):

<script src="./bower_components/handsontable/dist/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="./bower_components/handsontable/dist/handsontable.full.css">

i still hav the same problem :

"NetworkError: 404 Not Found - http://localhost:3000/bower_components/handsontable/dist/handsontable.full.js"
handson...full.js
2
"NetworkError: 404 Not Found - http://localhost:3000/bower_components/handsontable/dist/handsontable.full.css"
handson...ull.css
ReferenceError: Handsontable is not defined


var hot = new Handsontable(container, {

--- EDIT ----

Here is my project structure , i also have the same problem with loading jquery.js

enter image description here

i was trying all solutions for this question but none of them work.

Community
  • 1
  • 1
Bardelman
  • 2,176
  • 7
  • 43
  • 70
  • can you show us your file structure? – ZekeDroid Oct 29 '15 at 13:44
  • it's the very standard structure when you create a project with express and install a module with bower.. i will update the question to show my project's structure – Bardelman Oct 29 '15 at 15:52
  • it looks like that express blocks access to all project's folders and only serves all static ressources from the /public folder – Bardelman Oct 29 '15 at 16:03
  • well your index file seems to be in a subfolder so you can try going up a folder in your path: `./../bower_components/handsontable/dist/handsontable.full.js` – ZekeDroid Oct 29 '15 at 16:22
  • all solutions i've tried about changing the url have the same right result : http://localhost:3000/bower_components/handsontable/dist/handsontable.full.js 404 not found, bower_components is exactly under the root , it's not a wrong url which is generated so the problem doesn't come from the urls but perhaps express is making the restriction to only access the /public folder for static ressources i guess – Bardelman Oct 29 '15 at 16:59
  • 1
    I'm running a node app with express and don't quite have that problem but i can't help beyond this – ZekeDroid Oct 29 '15 at 17:13

1 Answers1

0

This worked for me : 

app.use("/bower_components", express.static(path.join(__dirname, 'bower_components')));

my mistake was to write it like this :

app.use("bower_components", express.static(__dirname + '/bower_components')); // this is wrong

and in the view it doesn't matter what i wrote

(./bower_components or ../bower_components).

All these worked for me :

<script src="../bower_components/handsontable/dist/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="bower_components/handsontable/dist/handsontable.full.css">
Bardelman
  • 2,176
  • 7
  • 43
  • 70