I am working on a node.js app, which is serving index.ejs page through route. index.js (which is a route)
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res) {
res.render('index', { title: 'Express', clicks: req.app.get('clicks')});
});
module.exports = router;
index.ejs file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<div class="container">
<h1>
<%=title%>
</h1>
<div class="page">
</div>
</div>
<!-- <template id="click-list-template">
<table class="table striped">
<thead>
<th>
<td>day</td>
<td>hour</td>
<td>minute</td>
<td>count</td>
</th>
</thead>
<tbody>
<% _.each(clicks, function(click){%>
<tr>
<td><%=click.get('day')%></td>
<td><%=click.get('hour')%></td>
<td><%=click.get('minute')%></td>
<td><%=click.get('count')%></td>
</tr>
<%});%>
</tbody>
</table>
</template> -->
<script>
var dash = {};
dash.clicks = <%=clicks%>
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<!-- <script src="/javascripts/index.js"></script> -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
It was working perfectly fine until recently. Now it just keeps complaining about styles.css not loading, and also '_' is undefined. However, I am loading style.css from different directory than its complaining, which was working earlier. Now regardless of what changes I make to the ejs file, including commenting the whole file out. It keep showing the exact same errors. Also, I have tried restarting the server numerous times, without any luck.
Will appreciate any help. Seems like a server side caching issue to me, but not sure how to fix it. I googled, but couldn't find anything, hence posting it here.
Thanks in advance!
After thoroughly researching this issue, I figured out the problem. I am sharing it here, so others who run into a similar issue can resolve it in less time.
My app.js has the following code, which on error redirects to the error.ejs, and hence the html was not updating regardless of what I did. The error.ejs page had the link to the old style.
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error.ejs', {
message: 'Error:oops something went wrong',
error: err.message
});
});
}
Also, the error was caused because I was trying to use ejs templating and underscore templating at the same time, and they both use '<%' and '%>' as the opening and closing brackets for the template code. This was fixed by applying the fix mentioned in the following post:
How can I use Underscore.js templates in conjunction with EJS?