Currently, I am working on a sample web application using HTML5, Bootstrap, Express.js, Angular, and jQuery. I have been struggling with linking the js and css files in my project, as they only seem to work when hosted online. Below is an example of what my header code looks like:
index.html
<script type="text/javascript" src="/bower_components/jquery/dist/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="/bower_components/bootstrap/dist/css/bootstrap.css"/>
<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
------------------------------------------------------------------------------------
app.js
var express = require('express');
var path = require('path');
var app = express();
//config
app.set('views', __dirname + '');
app.engine('html', require('ejs').renderFile);
//routes
app.get('/',function(req,res){
res.render('index.html')
});
//server
app.listen(1337,function(){
console.log('ready on port 1337');
})
Shown below is a screenshot of the folder structure for my files.
I am running my server in the app.js file located in the root directory. Despite trying various methods like ../, no slash, and ~, I have not been able to get it to function correctly. Thank you for taking the time to read this in advance.
EDIT While experimenting, I discovered that opening the index.html file outside of the express server environment works fine. I have updated the code snippet above to include my app.js.
SOLVED I want to extend a heartfelt thank you to suchit, dfsq, and Anubhav for their assistance. Since I'm utilizing express, I needed to instruct express on how to properly locate my static source files (js and css) within my app.js file. The solution I found is relevant only if you are operating your application on an express server. Here is the additional code added to both my app.js and index.html files:
app.js
app.use(express.static(__dirname + '/bower_components'));
--------------------------------------------------
index.html
<script type="text/javascript" src="/bower_components/jquery/dist/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="/bootstrap/dist/css/bootstrap.css"/>
<script type="text/javascript" src="/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
Best regards,
Fred K