projectName
| - client/
| - css
| - js
| - index.html
| - bower_components/
| - package.json
| - server.js
I would like to start my app and serve index.html with node. The client is a single page AngularJs app so in server.js I checked this question and this one this is what they suggested:
var router = express();
var server = http.createServer(router);
function runServer() {
server.listen(PORT, () =>{
console.log(`Our app is running on port ${ PORT }`);
});
router.use(express.static(path.join(__dirname, 'client')));
router.use('/bower_components', express.static( path.join(__dirname, 'client/bower_components')))
router.get('*', function (req, res) {
res.sendfile('client/index.html');
});
}
At the head of index.html I have:
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css"/>
<script src="/js/jquery.min.js"></script>
<script src="/js/highstock.js"></script>
<script src="/js/exporting.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-animate/angular-animate.js"></script>
When I start the server on my localhost, the app works properly. But I run the app on my host, I get the following error in the browser console.
> Uncaught SyntaxError: Unexpected token < angular-animate.js:1 Uncaught
> SyntaxError: Unexpected token < angular-route.js:1 Uncaught
> SyntaxError: Unexpected token < moment.js:1 Uncaught SyntaxError:
> Unexpected token < angular-sanitize.js:1 Uncaught SyntaxError:
> Unexpected token < frontend.js:6 Uncaught ReferenceError: angular is
> not defined
When I open the source file inside the bower_components folder in a new tab such as angular.js , I see that the serve is serving the index.html file instead of js files. But when I open the resources file in the folder css or js, such as highstock.js , I get the correct resource file.
How can I serve the files from bower_components?
