express.js (static server) isn't loading my javascript

Question

My I'm using express.js as a static server and the code is looking like this:

var express = require('express'),
  app = express();

app
  .use(express.static('./public'))
  .get('*', function (req, res) {
    res.sendfile('public/main.html');
  })
  .listen(3000);

My file structure:

.
├── bower_components
│   ├── angular
│   ├── bootstrap
│   └── jquery
├── node_modules
│   └── express
├── public
│   ├── main.html
│   ├── src
│   └── views
└── server.js

My HTML is looking like this:

<!DOCTYPE html>
<html ng-app="ContactsApp">
<head lang="en">
  <meta charset="UTF-8">
  <title> Contacts </title>
  <base href="/" />
  <link rel="stylesheet" href="src/bootstrap.min.css"/>

</head>
 <body>    
  <script src="../bower_components/jquery/dist/jquery.min.js"></script>
  <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="../bower_components/angular/angular.min.js"></script>
  <script src="src/app.js"></script>
 </body>
</html>

The Browser is not loading the angular library und I'm getting a error Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:3000/bower_components/angular/angular.min.js"..

What I'm doing wrong? I couldn't find any answers from the previous questions.

Pierrickouw · Accepted Answer · 2015-03-20 10:42:08Z

1

This line says that you are serving your static files from ./public

use(express.static('./public'))

So only this tree will be exposed to the public:

   ├── main.html
   ├── src
   └── views

Your bower_components diretory is not in public, thus it is not exposed.

To fix this, you can create a .bowerrc file in the root of your application with the following:

{
  "directory": "public/bower_components/"
}

It will tell to bower to install the bower components in public instead of the default bower_components directory. Just run bower install after creating this file, and don't forget to update your index.html with the updated paths.

EDIT: Dont be tempted to change use(express.static('./public')) by use(express.static('./')) cause it will easily resolve your issue. It will expose your whole directory structure (and all your files) and is not good for obvious security reasons :)

edited Mar 20, 2015 at 10:42

answered Mar 20, 2015 at 10:35

Pierrickouw

4,7341 gold badge34 silver badges29 bronze badges

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

1 Comment

imalik8088 Over a year ago

You are right! The directory was not exposed to the static server.

Collectives™ on Stack Overflow

express.js (static server) isn't loading my javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related