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

Issue

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!

Solution

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}');
});

Answered By – Danny Kirchmeier

Answer Checked By – Pedro (FlutterFixes Volunteer)