How to serve both dynamic and static pages with Dart and shelf?

Question

Using shelf_static to serve static web pages through Dart is no problem:

var staticHandler = createStaticHandler(staticPath, defaultDocument:'home.html');
io.serve(staticHandler, 'localhost', port).then((server) {
  print('Serving at http://${server.address.host}:${server.port}');
});

and I can use shelf_route fine for dynamic web pages:

Router routes = new Router()
  ..get('/item/{itemid}', handler.doItem);
var handler = const shelf.Pipeline()
  .addHandler(routes.handler);

io.serve(handler, 'localhost', port).then((server) {
  print('Serving at http://${server.address.host}:${server.port}');
});

But I'm struggling with adding a static handler to the dynamic version. Things I've tried include:

Router routes = new Router()
  ..get('/item/{itemid}', handler.doItem)
  ..get('/', staticHandler);

or ...

  ..get('/.*', staticHandler);

or ...

  ..get('/{any}', staticHandler);

All of which give me the specified default home.html page if I request http://localhost:8080/ but explicitly asking for an existing page http://localhost:8080/home.html gives me Not Found.

Should I not even be trying to do this with shelf_static? If not, what would be the correct approach? Thanks!

Answer 1

You can use Cascade. It creates a chain of handlers, moving to the next one if the previous one gives a 404 or 405 response.

var staticHandler = createStaticHandler(staticPath, defaultDocument:'home.html');
var routes = new Router()
    ..get('/item/{itemid}', handleItem);

var handler = new Cascade()
    .add(staticHandler)
    .add(routes.hander)
    .handler;
io.serve(handler, 'localhost', port).then((server) {
  print('Serving at http://${server.address.host}:${server.port}');
});

Answer 2

A fallbackHandler can be specified for the Router. It appears that using the static handler here solves the problem.

Router routes = new Router(fallbackHandler: staticHandler)
  ..get('/item/{itemid}', handler.doItem);

Answer 3

The reason is that the shelf_route methods like get must fully match the path. With static files you don't want exact matches as the remainder of the path tells you the path to the file.

For this you need to use the add method and set exactMatch: false as currently the methods like get, post etc don't expose exactMatch.

The following works

void main(List<String> args) {

  Logger.root.onRecord.listen(print);

  var staticHandler = createStaticHandler('../static', defaultDocument:'home.html');

  final root = router()
    ..get('/item/{itemid}', (Request request) => 'handling the item')
    ..add('/', ['GET'], staticHandler, exactMatch: false);

  printRoutes(root);

  io.serve(root.handler, InternetAddress.ANY_IP_V6, 9999);

}

FYI I've added a higher level framework called mojito that is a thin glue layer on many of the shelf components that makes this a little easier.

It's still kinda newish and poorly documented but in case you're interested you can do the following

void main(List<String> args) {

  Logger.root.onRecord.listen(print);

  final app = mojito.init();

  app.router
    ..get('/item/{itemid}', (String itemid) => 'handling the item $itemid')
    ..addStaticAssetHandler('/', fileSystemPath: '../static', 
        defaultDocument:'home.html');

  app.start();
}

addStaticAssetHandler calls createStaticHandler behind the scenes but also supports invoking pub serve in development mode which is very handy for stuff like polymer