Skip to content
🌱

shelf を利用したDart frontend を試す

Published on May 15, 2021

backend はこちら．

Dart backendを試す

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/[email protected]/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 を使うべきだと思います．