shelf を利用した Dart frontend を試す

backend はこちら．

Dart backendを試す

memo.yuzumone.net

Flutter Web とか AngularDart などあるんですけどちょっと雑にやりたいという場合です．コードは下記の通り．

const index = '''<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body>
    <main role="role">
      <div class="container">
        <h1 class="mt-5">{{ title }}</h1>
      </div>
    </main>
  </body>
</html>''';

void main(List<String> args) async {
  var handler = const shelf.Pipeline()
      .addMiddleware(shelf.logRequests())
      .addHandler(_echoRequest);
  var server = await io.serve(handler, _hostname, port);
  print('Serving at http://${server.address.host}:${server.port}');
}

Future<shelf.Response> _echoRequest(shelf.Request request) async {
  var template = Template(index);
  var output = template.renderString({'title': 'hoge'});
  var headers = {'content-type': 'text/html'}
  return shelf.Response.ok(output, headers: headers);
}

index.html を静的ファイルで用意するのが普通だと思うんですが，dart compile して動かしてみたかったので dart ファイルに収めました． go-bindata などのように executable に静的ファイルを include するような仕組みが Dart にもあるといいですね．気が向いたら作りたい．

html の中身は mustache template を使ってみました．というか Dart におけるテンプレートエンジンでこれだ！みたいなのは今のところないです．まぁこれより複雑な GUI が欲しいならそれこそ Flutter web を使うべきだと思います．