Serving static html files with nodejs with default prefix

Question

I am using Restify to serve my static webpage. The html file calls the server for scripts and css files.

The server that I am creating needs to have all endpoints prefixed with /safe/endpoint

I have been able to server the index.html file but when the browser tries to include the script and css files I get a 404 status code.

When I go to localhost:1337/safe/endpoint I get the index.html which renders correctly. But when the browser tries to download the other files it prefixes the path in the index.html with localhost:1337/safe instead of localhost:1337/safe/endpoint.

example:

the index.html is served with this path

localhost:1337/safe/endpoint

in the index.html file I have this include

<script src="app/js/thing.js"></script>

when the browser tries to get the thing.js in uses this path

localhost:1337/safe/app/js/thing.js

instead of

localhost:1337/safe/endpoint/app/js/thing.js

The server code looks like this

server.get("/safe/endpoint", function(req, res){
  fs.readFile("./frontend/index.html", "utf8", function(err, data){
    if(err){
      res.setHeader('content-type', 'text/plain');
      res.send(404, "No index.html found");
    } else {
      res.setHeader('Content-Type', 'text/html');
      res.writeHead(200);
      res.end(data);
    }
  });
});

server.get("/safe/endpoint/app/.*", function(req, res){
  var filePath = "./frontend" + req.url.split("/safe/endpoint")[1];

  fs.readFile(filePath, "utf8", function(err, data){
    if(err){
      res.setHeader('content-type', 'text/plain');
      res.send(404, req.url + " not found");
    } else {
      res.setHeader('Content-Type', 'text/html');
      res.writeHead(200);
      res.end(data);
    }
  });
});

FYI: you could do what everyone else does, use a `/public` folder that is accessible from the clientside, and a static route for all your static files, and no other files can be accessed anyway, no need for a "safe/endpoint". — adeneo, Feb 29 '16 at 19:04
@adeneo is rite. express.static on the folder and serve through `/public` is the best approach. — , Feb 29 '16 at 20:38
I am using restify. Because of a feature in restify.serveStatic you can define a base directory for the static server. then the path of the endpoint becomes a post fix on the base directory. To use that I would need to create a folder structure (i.e. frontent/safe/endpoint/app/js/thing.js instead of frontend/app/js/thing.js). That folder structure is something that I am trying to avoid. http://stackoverflow.com/questions/19281654/serving-static-files-with-restify — Thor, Feb 29 '16 at 23:04

score 2 · Accepted Answer · answered Apr 28 '16 at 10:04

I was able to get this working with the serveStatic included in the restify module

server.get("/safe/endpoint/.*", restify.serveStatic({
  directory: "./UI",
  default: "index.html"
}));

but I needed to prefix the folder path in the UI folder:

/UI/safe/endpoint/index.html

But there is one downside of this. When requesting to the server the path needs to be

example.com/safe/endpoint/

instead of

example.com/safe/endpoint

Serving static html files with nodejs with default prefix

1 Answers1