include css and JavaScript file on node express

Question

I want to include my css file and javascript file in node-express, but I always got 404 not found: here my code: 1. in server.js

var http = require('http');
var app = require('./app');
var express = require('express');
var apps = express();
var path = require('path');

apps.use(express.static(path.join(__dirname, 'public')));
http.createServer(app.handleRequest).listen(8000);

then on app.js

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

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

        }
        response.end();
    });
}

and My route still on app.js:

module.exports = {
    handleRequest: function(request, response) {
        var path = url.parse(request.url).pathname;
        switch (path) {
            case '/':
                renderHTML('./index.html', response);
                break;
            case '/login':
                renderHTML('./login.html', response);
                break;
            default:
                response.writeHead(404);
                response.write('Route not defined');
                response.end();
        }
    }
};

And this is my html:

  <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test Doc</title>
        <link rel="stylesheet" type="text/css" href="/css/style.css" />
    </head>    
    <body>
        <p>Coba ku </p>
        <div id="container" style="height: 500px"></div>
    </body>  
    </html>

I use vs-code to built this.

What is the req url for css and js files? also make sure your css and js files are in a root folder of your project named public — Suresh Prajapati
– Suresh Prajapati, Commented Jul 21, 2018 at 13:35

lry · Accepted Answer · 2018-07-21 14:42:57Z

2

I got confused. You use express to process static files, but why are you create a native node server without express，express does not work.

answered Jul 21, 2018 at 14:42

lry

7583 silver badges7 bronze badges

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

Comments

Max Martynov · Accepted Answer · 2018-07-21 14:43:42Z

Change you server.js

var app = require('./app');
var express = require('express');
var apps = express();
var path = require('path');

apps.use(express.static(path.join(__dirname, 'public')));
apps.use(app.handleRequest);
apps.listen(8000);

Learn the official doc app.listen() to understand how it should look.

There is no need to create a function like renderHTML to serve out HTML.

// Instead of this:
renderHTML('./index.html', response);

// Just use that:
response.sendFile(path.join(__dirname, '../public', 'index.html'));
// or (the same):
response.sendFile('index.html', { root: path.join(__dirname, '../public') });

You can find more information here res.sendFile().

And I have to say, that there is a better way to implement the routing which you've implemented via switch in the app.handleRequest() function. Routing

Collectives™ on Stack Overflow

include css and JavaScript file on node express

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related