how make static files (.css, .js) in node.js (only node.js)

Question

Question, I'm working on a node.js app. simple no single application. I Have something done in the app.js file.. but the node.js not loading my .css files and .js files.

I have fixed it with the but the .css and .js files does

not loading i get this back. but i need the files in the output files not in the public/ folder.

would like to fix it. also my page looks and become this one but the source does not loading the css stylesheet or javascript files. i don't know why?

my structur :

-css
  --style.css
-js
  --javascript.js
-app.js  
-public
 --index.html
 --add.html

here is my code :

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


http.createServer(function(request, response) {
        console.log('request starting...');

    var url = request.url;
    switch(url) {
        case '/' :
            getStaticFileContent(response, 'public/index.html','text/html');
            break;
        case '/add':
            getStaticFileContent(response, 'public/add.html','text/html');
            break;
        case '/css':
            getStaticFileContent(response, 'css/style.css','text/css');
            break;
        case '/js':
            getStaticFileContent(response, 'js/javascript.js','text/javascript');
            break;
        default:

        response.writeHead(404, {'Content-Type':'text/plain'});
        response.end('404 - Page not Found');
}

}).listen(8000);
console.log('Hello World, this is the   Projekt Nr.1');
console.log('Server Running at localhost:80');


function getStaticFileContent(response, filepath, contentType) {
    fs.readFile(filepath, function(error, data){
        if(error) {
            response.writeHead(500,{'Content-Type':'text/plain'});
            response.end('500 - Internal Server Error');
    }
    if(data) {
            response.writeHead(500,{'Content-Type':'text/html'});
            response.end(data);
        }
    });
}

You're returning a HTTP `500` error with a `Content-Type` of `text/html` no matter what gets passed into `getStaticFileContent`. Shouldn't you have `response.writeHead(200, { 'Content-Type': contentType })`? — Joe Clay, May 26 '16 at 09:07
i dont know. it should loading the .css and .js files..`http://localhost:8000/css/style.css` Failed to load resource: the server responded with a status of 404 (Not Found) — spaceody, May 26 '16 at 09:21
What do you mean "you don't know"? It's your code, or have you just taken it from somewhere else? You probably need to read up a bit on HTTP in general, but @JoeClay is right about it not making sense to have ````if (data) { response.writeHead(500, .....```` when you're returning content. It should be ````200```` to indicate OK status. Using your browser dev tools/Network tab inspection should confirm that is your problem. — kb., May 26 '16 at 09:27
@spaceody Using ````/css/style.css```` will give a 404 because you are not mapping that URL, you are mapping ````/css```` only to return the file ````css/style.css````. The URL for your CSS file is in other words ````http://localhost:8000/css```` if you look at your switch statement. — kb., May 26 '16 at 09:29
@kb wahh... so cool. it works right now. :) ! i have done this on the `css/style.css` in the `app.js` file and in the static html file `index.html` wth the link of `` specific that point in the beginning.. tried without the point like ,,, `css/style.css` only then with `/css/style.css` and this one : finally have worked : `./css/style.css` .. !.. but why that? think because the static file in the `public/` folder.. and the css is outsite of the dist output files.. i have included it with grunt.js. but thanks so much.! - — spaceody, May 26 '16 at 09:43

spaceody · Answer 1 · 2016-05-26T09:54:22.030

here is the new one.. in the end if done it with a else:

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


http.createServer(function(request, response) {
        console.log('request starting...');
var url = request.url;
switch(url) {
    case '/' :
        getStaticFileContent(response, 'public/index.html','text/html');
        break;
    case '/add':
        getStaticFileContent(response, 'public/add.html','text/html');
        break;
    case '/css/style.css':
        getStaticFileContent(response, 'css/style.css','text/css');
        break;
    case '/js':
        getStaticFileContent(response, 'js/javascript.js','text/javascript');
        break;
    default:

    response.writeHead(404, {'Content-Type':'text/plain'});
    response.end('404 - Page not Found');
}
}).listen(8000);
console.log('Hello World, this is the Projekt Nr.1');
console.log('Server Running at localhost:80');

function getStaticFileContent(response, filepath, contentType) {
    fs.readFile(filepath, function(error, data){
        if(error) {
            response.writeHead(500,{'Content-Type':'text/plain'});
            response.end('500 - Internal Server Error');
    }
    if(data) {
            response.writeHead(200, { 'Content-Type': contentType });
            response.end(data);
        }
            else {
                    response.writeHead(200, { 'Content-Type': contentType });
                    response.end(content, 'utf-8');
                }
    });
}

score 0 · Answer 2 · answered May 26 '16 at 10:05

0

Use the framework like the express for the web applications. So In express express.static will take care for the serving the static file to the client.

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

app.use(express.static('public'));

place the all the static files in the public directory and express will serve.

answered May 26 '16 at 10:05

Vora Ankit

682
5
8

Thanks, but i know frameworks. like express... its a "framework"! we need learning node.js with out any frameworks for exams. it's forbidden ;) ! - Only Own Code. Without any Tools. That's why I'm learning to be a good developer. – spaceody May 26 '16 at 22:24
@spaceody : for express.static dig out the code https://github.com/expressjs/serve-static. As express is open source you can also find the code for each function in the express github repo. – Vora Ankit May 28 '16 at 07:57

how make static files (.css, .js) in node.js (only node.js)

2 Answers2