CSS/JS with Node.JS in localhost

Question

i'm discovering Node.js and i get a little problem with my .css and .js files in localhost. I tried a lot of things but didn't work in my case (http://ericsowell.com/blog/2011/5/6/serving-static-files-from-node-js by exemple)

My files are like this:

mysite/app.js

mysite/index.html

mysite/package.json

mysite/css/ my .css files

mysite/js/ my .js files

mysite/node_modules/ all node.js modules

I tried this in app.js:

var app = require('express')(),
http = require('http');
fs = require('fs');
path = require('path');
imtesting = function (req, res) {

    var filePath = '.' + request.url;
    if (filePath == './')
        filePath = './index.htm';

    var extname = path.extname(filePath);
    var contentType = 'text/html';
    switch (extname) {
        case '.js':
            contentType = 'text/javascript';
            break;
        case '.css':
            contentType = 'text/css';
            break;
    }

    path.exists(filePath, function(exists) {

        if (exists) {
            fs.readFile(filePath, function(error, content) {
                if (error) {
                    response.writeHead(500);
                    response.end();
                }
                else {
                    response.writeHead(200, { 'Content-Type': contentType });
                    response.end(content, 'utf-8');
                }
            });
        }
        else {
            response.writeHead(404);
            response.end();
        }
    });

}

server = http.createServer(app, imtesting),
io = require('socket.io').listen(server),
ent = require('ent'), // Permet de bloquer les caractères HTML (sécurité équivalente à htmlentities en PHP)


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



io.sockets.on('connection', function (socket, pseudo) {
    // Dès qu'on nous donne un pseudo, on le stocke en variable de session et on informe les autres personnes
    socket.on('nouveau_client', function(pseudo) {
        pseudo = ent.encode(pseudo);
        socket.set('pseudo', pseudo);
        socket.broadcast.emit('nouveau_client', pseudo);
    });

    // Dès qu'on reçoit un message, on récupère le pseudo de son auteur et on le transmet aux autres personnes
    socket.on('message', function (message) {
        socket.get('pseudo', function (error, pseudo) {
            message = ent.encode(message);
            socket.broadcast.emit('message', {pseudo: pseudo, message: message});
        });
    }); 
});

server.listen(8080);

But the result is still

GET http://localhost:8080/css/bootstrap.min.css 404 (Not Found) localhost/:14
GET http://localhost:8080/css/site-style.css 404 (Not Found) localhost/:17
GET http://localhost:8080/css/spray-style.css 404 (Not Found) localhost/:21
GET http://localhost:8080/js/bootstrap.min.js 404 (Not Found) localhost/:98
GET http://localhost:8080/js/spray-reader.js 404 (Not Found) localhost/:99

and i tried a lot of solutions...

Thanks all and sorry if my english made your eyes bleeding.

OK and are your assets actually sitting in the location specified? Is the log file giving any errors? — TriniBoy, Commented Apr 18, 2014 at 16:04
The problem is from the localhost and node.js but i didn't know how to solve it and there isn't other errors. Did you ever use node.js? — Nickel Michel, Commented Apr 18, 2014 at 16:14

scurker · Accepted Answer · 2014-04-18 16:38:56Z

2

You're doing way more than necessary. Using express, you can set static routes via middleware that will serve content from a set path:

app.use('/js', express.static(__dirname, + '/js')));
app.use('/css', express.static(__dirname, + '/css')));

You can read more about that here: http://expressjs.com/faq.html#multiple-statics

edited Apr 18, 2014 at 16:38

answered Apr 18, 2014 at 16:30

scurker

4,7931 gold badge28 silver badges25 bronze badges

Ok thanks, but i'm totally inexperienced. Where should i put it? I'm trying but ReferenceError: express is not defined
– Nickel Michel
Commented Apr 18, 2014 at 16:52
I really don't get it. So, i must delete all the imtesting var and put these two lines where?
– Nickel Michel
Commented Apr 18, 2014 at 17:59
If you're using imtesting to serve static files, you don't need that function at all. Read up more on how to set middleware: expressjs.com/4x/api.html#app.use. A few paragraphs down it goes into more details about the built in static middleware.
– scurker
Commented Apr 18, 2014 at 18:32
Still doesn't work with these two lines, don't know why
– Nickel Michel
Commented Apr 18, 2014 at 20:27
app.use(express.static(path.join(__dirname, 'public'))); work well! Thanks for the help guys
– Nickel Michel
Commented Apr 18, 2014 at 20:44

| Show 1 more comment

Nickel Michel · Accepted Answer · 2014-04-21 15:03:55Z

0

app.use(express.static(path.join(__dirname, 'public')));

answered Apr 21, 2014 at 15:03

Nickel Michel

13 bronze badges

Add a comment |

Imtiaz Chowdhury · Accepted Answer · 2017-08-21 11:53:13Z

why using other frameworks when it is too easy using raw node.js

take a look :

<!DOCTYPE HTML>
<html>

<head>
    <link rel="stylesheet" href="css/style.css" />
</head>

</html>

**in node.js file : **

var url = require('url');
var pathnaame = url.parse(req.url,true)
var filepath = "./"

if(fs.existsSync(filepath+pathname)){
        res.end(fs.readFileSync(filepath+pathname));
    }

browsers send get requests to fetch css/js files; **in this case : ** it will result like

pathname="css/style.css"
filepath = "./"
filepath + pathname = "./css/style/css"

fs.readFileSync will return true and serve the data to response.

you can also do this in asynchronous way using asynchronous functions.

Collectives™ on Stack Overflow

CSS/JS with Node.JS in localhost

3 Answers 3

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Related