Search code examples
expressbowerhandsontable

/dist/handsontable.full.js 404 Not Found with bower

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.

Solution

  • 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">