css is not rendering in nodejs web app [duplicate]

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? 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
– Honza Hejzl, Commented Apr 10, 2018 at 8: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
– Andreas Rau, Commented Apr 10, 2018 at 8: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
– Frax, Commented Apr 10, 2018 at 8:36

Tobias Fuchs · Accepted Answer · 2018-04-10 08:32:59Z

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, 2018 at 8:32

Tobias Fuchs

9385 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andreas Rau Over a year ago

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.

Petrashka Siarhei · Accepted Answer · 2018-04-10 08:59:23Z

1

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:

edited Apr 10, 2018 at 8:59

answered Apr 10, 2018 at 8:38

Petrashka Siarhei

73210 silver badges12 bronze badges

4 Comments

AltBrian Over a year ago

Would the module be in the server.js file?

AltBrian Over a year ago

I put my index.html, js and css in the public folder?

Petrashka Siarhei Over a year ago

I rewrite answer. You can look this code in github.com/piotrazsko/tableContoller

AltBrian Over a year ago

Thanks will have a look at this later.

Collectives™ on Stack Overflow

css is not rendering in nodejs web app [duplicate]

2 Answers 2

1 Comment

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Linked

Related