css is not rendering in nodejs web app

Question

I have put together a small app and using html, css and javaScript. Now I want to run this on a nodejs server. I have created a separate file for the server to start running with the following code.

var http = require('http');
var fs = require('fs');

function onRequest(request, response) {
response.writeHead(200, {'Content-Type': 'text/html'});
fs.readFile('./index.html', null, function(error, data) {
    if (error) {
        response.writeHead(404);
        response.write('File not found');
    } else {
        response.write(data);
    }
    response.end();
  });

}

http.createServer(onRequest).listen(3000, function(){
console.log("The server has started");
});

Now the html is rendering but the CSS is not rendering. Plus, the JavaScript that is linked to the html is not working. I did see this Nodejs static file. But this did not seem to make sense. Any help would be appreciated.

Have you tried [Harp.js](http://harpjs.com/)? A think the problem could be in `'Content-Type': 'text/html'` because with that you treat just html files (not css, not js). I think the app should also include separate logic for other file types. — Honza Hejzl, Apr 10 '18 at 08:30
In my eyes you get index.html for the css and js files as the only response to requests is the index file. — Andreas Rau, Apr 10 '18 at 08:30
Any help as requested: open the browser console to see 404 errors for your css and js files. Opening the console (aka DevTools) is the first thing to do when things like this don't work. — Frax, Apr 10 '18 at 08:36

score 3 · Answer 1 · answered Apr 10 '18 at 08:32

3

You (kinda) have to use static files. Because in your example you always send the index.html file even if the CSS or JS file is requested.

heres a example with express (almost equal to http)

var express = require('express');
var path = require('path');

var app = express();

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

app.listen(PORT);

answered Apr 10 '18 at 08:32

Tobias Fuchs

910
5
8

It is also possible to check which file is requested from the browser in the onRequest Handler and then send the requested file as reponse data. – Andreas Rau Apr 10 '18 at 08:35

Petrashka Siarhei · Accepted Answer · 2018-04-10T08:59:23.463

without express , i writed small module:

 var fs = require('fs');
module.exports = {
    getFile: function(url) {
        var text = '404';
        try {
            url = url.split('?')[0];
            if (url === '/') {
                url = '/index.html';
            }
            text = fs.readFileSync('./public' + url);
            if (url === '/index.html') {
                text = text.toString().replace(/version=/g, "version=" + Date.now());
            }
            return text;
        } catch (e) {
            return text + ' ' + e;

        }
    }
};

-- is route.js, and in this file I get containts of folder 'public' with css, js and other. index.js:

var http = require("http");
var route = require('./route');

var html; 

     function onRequest(request, response) {
          if (request.method === 'GET') {
                response.writeHead(200);
                response.write(route.getFile(request.url));
                response.end('');
            } 
        }
        http.createServer(onRequest).listen(8888);
        console.log("Server has started.");

example of 'index.html':

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css?version=">
    <title>test table</title>
</head>

<body>

    <div contenteditable="true">
        Example
    </div>
    <script src="js/table_creator.js?version="></script>
    <script src="js/table_controller.js?version="></script>
    <script src="js/table_size.js?version="></script>
    <script src="js/table_core.js?version="></script>
    <script src="js/index.js?version="></script>
</body>

</html>

publick folder:

server file system:

I rewrite answer. You can look this code in https://github.com/piotrazsko/tableContoller — Petrashka Siarhei, Apr 10 '18 at 09:05

css is not rendering in nodejs web app

2 Answers2