I am building a web app using NodeJS, ExpressJS, AngularJS, Bootstrap, and a Postgres DB using Sequelize. I am having problems with loading all of my "asset" files when I load up my index.html page.
So here is my structure:
- server.js
- app
- index.html
- app.js
- assets
- css
- styles.css
- img
- js
- javascript files
- css
Here is my server.js file:
var express = require('express');
var app = express();
var port = process.env.PORT || 5000;
var database = require('./config/database');
var path = require('path');
app.use(express.static(__dirname + '/app'));
require('./api/routes.js')(app);
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
app.listen(port, function() {
console.log("Node app is running at localhost:" + port);
});
Here is my index.html file:
<DOCTYPE html>
<html lang='en' ng-app="app">
<head>
<link src='assets/css/bootstrap.min.css' rel='stylesheet' type='text/css' />
<link src='assets/css/styles.css' rel='stylesheet' type='text/css' />
</head>
<body ng-controller="controller">
<nav class="navbar navbar-inverse navbar-fixed-top">
</nav>
<script src='assets/js/jquery-2.1.3.min.js'></script>
<script src='assets/js/angular.min.js'></script>
<script src='assets/js/angular-route.min.js'></script>
<script src='assets/js/angular-resource.min.js'></script>
<script src='assets/js/bootstrap.min.js'></script>
<script src='assets/js/modernizr.js'></script>
<script src='app.js'></script>
</body>
</html>
My problem is that, with my current setup, when I start up node and hit my localhost:5000 the index.html file loads along with all of my javascript files inside the assets/js folder. When I open up chrome dev tools I can actually see that folder being loaded in the sources pane. However, NONE of my CSS loads. Why is that? Any help would be greatly appreciated as I have basically exhausted all other options.
