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.
1 answers
solution1
1 ACCPTED 2015-03-20 10:35:34
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 :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.