res.sendfile() doesn't serve javascripts well

Question

I want to use static file serve without any rendering engine. I've tried to use:

res.sendfile('public/index.html');

on the '/' GET route, and express middleware for static files on my route:

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

BUT it seems like all of the javascripts which the client asks for are downloaded with index.html file information.

How can I make a successful download of the CSS/JS static files ?

UPDATE:

Here is the route for the "res.sendfile ..." :

app.get('/*', index);

I want all of the requests to the server on any route will get index.html and all of its JS&CSS assosiciated with.

Answer 1

I guess this might help you...

in app.js file...

app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

app.use("/styles",  express.static(__dirname + '/public/stylesheets'));
app.use("/scripts", express.static(__dirname + '/public/javascripts'));
app.use("/images",  express.static(__dirname + '/public/images'));


// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

app.get('/', function (req, res) {
      res.sendfile(__dirname + '/public/home.html');
});

save the home.html inside the /public folder and JavaScript files in /public/javascripts, images in /public/images, css files in /public/stylesheets folder.

In the HTML file reference should be the words you define(eg: /scripts/home.js)... like this

    <link rel="stylesheet"   type="text/css" href="/styles/home.css" >
    <script src="/scripts/home.js" type="text/javascript"></script>   

Answer 2

var express=require("express");

var app=express();

app.use('/', express.static(__dirname + '/website/views/'));


app.set("views",__dirname+'/website/views');


app.get("/",function(req,res){
    res.sendfile('index.html');

});

the codes above is mine.i wish to help you.

Answer 3

Why not something like this?

if(req.url == '/') { // Root lookups appear to be mapped to index.html
    next();
} else {
    fname = [disk location of your website] + req.url;
    fs.open(fname, 'r', function(err, fd) {
        if(err) {
            next();
        } else {
            fs.close(fd);
            res.sendfile(fname);
        }
     });
}

Answer 4

Well, the simplest solution will be to move app.use(express.static(path.join(__dirname, 'public')))

up before you call app.use(app.router);

This way, the static middleware gets served before the app.get('/*', index);

Answer 5

I've made an assumption here that your routes are declared in this order:

app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

If this is indeed the case, then the following suggestion holds:

The problem here is the app.get('/*', …) will intercept all requests that match, which is basically everything. Your static middleware won't get a chance at serving files.

If you remove that route, things should work for you as index.html is already in the public directory and can be served by the static middleware.

For a good explanation of how this works, see the answer to this question: node.js / express.js - How does app.router work?

Update based on additions to the above question:

You've stated this as the current behavior of your server:

it seems like all of the javascripts which the client asks for are downloaded with index.html file information.

You have asked the question:

How can I make a successful download of the CSS/JS static files ?

with this requirement

I want all of the requests to the server on any route will get index.html and all of its JS&CSS assosiciated with.

Your question and requirement are opposed to each other. The server will send back to the client exactly what you tell/configure it to. It will either always send back index.html which is exactly what your requirement states, or it will successfully serve up both index.html and any CSS/Javascript it references which is what your original problem statement was.

In one of your comments below you've stated:

the reason I want to do it, is because I'm using templates, and index.html wraps each template. I'm using angular on the client, and I'm starting to realize that i'll have to use a render engine in order to achieve this. Again, my angular client defines the partial url, and when it sends the request to : '/partial/sample' I need the index.html to wrap the 'sample.html' for instance

My assumptions based on this statement (please correct if wrong)

• You are using client side templates
• The files you are retrieving from the server are static (i.e., they need to be served up as is from the server)
• Your routes are currently declared in this order
  1. app.use(app.router);
  2. app.use(express.static(path.join(__dirname, 'public')));
• You are not doing any server side templating (i.e. everything is located under public somewhere)

If these assumptions are correct, the fix is to do what I originally suggested and remove this route:

app.get('/*', index);

If you do this (assuming your resources are referenced correctly):

• your index.html will be retrieved as is from the server via the static middleware.
• Each css/js file you've referenced in index.html will be returned from the server via the static middleware
• Any requests to load template files (such as sample.html) will be serviced by your static middeware and returned to the client without modification