external Javascript and CSS are not effected to HTML when the HTML is invoked by Node.js

Question

I created a simple Node JS program. I have index.html in the same folder that app.jsis located and external css and js files within public/stylesheets/style.css and /public/javascripts/script.js directories. When i open the index.html directly form the browser, css file is syccessfully linked to the html file. But when i run node app.js and navigate to http://localhost:3000, the index.html is displayed but any style didn't have effected to it. How can i solve it?

app.js file is this

var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);

server.listen(3000);

app.get('/', function(req, res){
    res.sendfile(__dirname + '/index.html');
});

index.html file is this

<html>
<head>
    <title>Sanitizor</title>

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="public/javascripts/script.js"></script>

    <link rel="stylesheet" type="text/css" href="public/stylesheets/style.css">

</head>
<body>
<h3>hello</h3>
    <div id="chat"></div>
    <form id="sent-message">
        <input size="35" id="message"></input>
        <input type="submit"></input>
    </form>
</body>
</html>

If you write, in address bar, the full server path `http://localhost:3000/public/stylesheets/style.css` you should get your CSS, if not, path is incorrect. — Asons, Apr 17 '16 at 09:03
Possible duplicate of [Express-js can't GET my static files, why?](http://stackoverflow.com/questions/5924072/express-js-cant-get-my-static-files-why) — XCS, Apr 17 '16 at 09:55
"static serving" I'm not sure what that is.Tried both Answers in that question. non of them works — s1n7ax, Apr 17 '16 at 11:23

score 0 · Accepted Answer · answered Apr 17 '16 at 12:03

You need to enable static serving :

app.use(express.static(path.join(__dirname, 'public'))); //this line enables the static serving in the public directory

your public directory could be the following :

public 
|_css
|_js
|_images
  |_logo.png

Then, if you want to get an image :

http://localhost:3000/images/logo.png

And if you want to show it in your html page :

<img id="logo" src="/images/logo.png"/>

In your case, replace the following line

<script src="public/javascripts/script.js"></script>

by

<script src="/javascripts/script.js"></script>

Same goes with the css

Thank you very much. It's working. Saved me from a lot of mess! — s1n7ax, Apr 17 '16 at 14:42

Urknecht · Answer 2 · 2016-04-17T12:17:37.123

Like Cristy already stated in her comment, you need to enable static serving of your resource files. In order to do so you use express.static. Express has good documentation and guides about routing or middleware etc, so check it out.

Consider a file structure like:

/app
   /public/index.html
      /stylesheets/style.css          
      /javascripts/script.js

Your app folder contains the app.js and the rest is ordered like discribed.

Your app.js:

var express = require('express');
var app = express();
var server = require('http').createServer(app);

app.use(express.static(__dirname + '/public'));

var io = require('socket.io').listen(server);

server.listen(3000);

app.get('/', function(req, res){
    res.sendfile(__dirname + '/public/index.html');
});

Most of the time the order is important so you need to be carefull. In order to configure express you can use app.configure(function() {...}); and put all you app.use(...) commands in there.

Your index.html now should look like:

<html>
<head>
    <title>Sanitizor</title>

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="/javascripts/script.js"></script>

    <link rel="stylesheet" type="text/css" href="/stylesheets/style.css">

</head>
<body>
<h3>hello</h3>
    <div id="chat"></div>
    <form id="sent-message">
        <input size="35" id="message"></input>
        <input type="submit"></input>
    </form>
</body>
</html>

external Javascript and CSS are not effected to HTML when the HTML is invoked by Node.js

2 Answers2