loading separate css stylesheet (heroku nodejs)

Question

loading separate css stylesheet (heroku nodejs)

I am unable to load a separate css stylesheet for a heroku web app, both locally and on heroku server. I recently migrated over from google app engine and the way I loaded stylesheets there worked perfectly fine. What am I doing wrong here?? Any help would be greatly appreciated!! Here is my code:

/app/server.js

var express = require("express");
var app = express();
app.use(express.logger());

var fs = require("fs");
var buf = fs.readFileSync("html/index.html");
var index = buf.toString();

app.get('/', function(request, response) {
    response.send(index);
});

var port = process.env.PORT || 5000;
app.listen(port, function() {
    console.log("Listening on " + port);
});

/app/html/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Starters Singapore | Social Group Dating</title>
    <link rel="stylesheet" type="text/css" href="../css/index.css">
  </head>

  <body>
    <div id="testdiv">This is a test</div>
  </body>

</html>

/app/css/index.css

body{
    margin:0;
    text-align: left;
    background-color: #666666;
}

#testdiv{
    width: 50%;
    height: 50%;
    background-color: #00a1ec;
}

css
node.js
heroku

Answer 1

You are using a relative path to the css file. This path is relative to the server root and not to the html file. I have no experience with Heroku NodeJS but I think the path should be

/css/index.css

Answer 2

I deploy apps on Heroku as well. I would suggest using ejs or jade to render your html. I prefer ejs. Since you're using Express, I would also create a "public" directory using this reference. enter image description here

Then in your layout.ejs (for Express 2.x.x or Express 3.x.x using ejs-locals npm)

<!DOCTYPE html>
<html>
  <head>
    <title>The Title</title>
    <% stylesheet('/css/index.css') %>
    <%- stylesheets%>
  </head>
  <body>
  </body>
</html>

You would also have an index.ejs where you call this layout.ejs

<%- layout('layout') %>

I would also suggest referring to this when using layouts with ejs. Learning ejs or jade might be slightly slightly annoying at first, but it works great once you understand it better. Hopefully this isn't too much of a loaded answer.