Links to static resources in an HTML page served by nodejs not working

Question

I have got my directory structure like this in a nodejs project

And here's my login_nimda.html snippet with the CSS links:

I am serving login_nimda.html from nimda.js but the associated CSS file isn't loading up.

As you can see I have used root-relative path but I am still not getting any results. The same reason why I had to use the CDN for Bootstrap and couldn't use the downloaded file.

How is it supposed to be? Where am I going wrong with the href attribute of the link?

EDIT: Here's my nimda.js snippet that is serving the HTML file login_nidma.html

router.get('/', function( req, res){
    let html = fs.readFileSync(path.join(__dirname,'../static/login_nimda.html'));
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(html);
});

Answer 1

You need to serve your static files (eg .css files) as well.

You can use Express's built-in middleware for serving static files, express.static() .

Here is basic example:

// serve static files in "app/static" with your node.js server
app.use('/static', express.static('app/static'))

Now you can access them in browser (and inside your HTML files) from /static :

<link href="/static/css/login_nimda.css" rel="stylesheet"> 

Please read more about express.static() and its usage here: http://expressjs.com/en/starter/static-files.html

Answer 2

1. Use the express.static middleware to serve static files instead of:

    router.get('/', function( req, res){ let html = fs.readFileSync(path.join(__dirname,'../static/login_nimda.html')); res.writeHead(200, {'Content-Type': 'text/html'}); res.end(html); }); 

   https://expressjs.com/en/starter/static-files.html
   
   Don't forget that you can use the path module and __dirname variable (see this SO question ) to help tell express.static(...) exactly where your static files are.

2. If you want to app.use(express.static(...)) multiplie times in different files, you need to make sure you're applying the middleware to the same app instance. I've created a code sample to illustrate. In server.js#L10 , I pass in var app into the routes.js module (which is the equivalent of your nimda.js ). In routes.js#L4 , I am calling .use() on the same var app as the one created in server.js . In your refactored version where you're using app.use(express.static(...)) in both your server.js and nimda.js , I'm going to guess that you're creating a new var app = express() in each file (which is something we want to avoid).

3. I don't recommend having your static assets split into 2 different locations like you have pictured unless you have a very good reason to do so. Keeping them in one central location will help you reduce the amount of complexity in your app by ensuring that we don't even need a separate routes.js (aka nimda.js ) file for the functionality you need at the moment.

Answer 3

If you are using Express, you dont have to handle requests to static content at all. Express will automatically return your statics. Just use path to router and folder structure. Such as

app.use('/my_statics',express.static(__dirname + "/public"));

if you have a.css at /public/assets/css/a.css below works

http://example.com/my_statics/assets/css/a.css

if you have b.html at /public/assets/b.html below works

http://example.com/my_statics/assets/b.html

EDIT: I built a similar setup in for my sideproject DataEndpoints . Check app.js for static and router setup. Also check routers folder to see how to handle, you may wanna look under views folder to how to set static file links