CODEWITHSUNDEEP
dartwebserverangular-dart
cjmarques
cjmarques

Reputation: 672

Unable to serve angular components with simple Dart web server

I'm just getting started writing web apps and want to do the whole stack in Dart. I've followed some tutorials for the client side and running them in webstorm works.

Next I built my web app by right clicking on the pubspec.yaml file and choosing build (directing it to a build folder). From that build folder I run my simple dart server from the command line "dart dartserver.dart" (code below)

The server will serve index.html but won't run any angular code. It will show the page with just the line "Loading..." because it hasn't translated the my-app tags.

<my-app>Loading...</my-app>

Here's the server code. 

import 'dart:io';
import 'dart:async';

Future<void> runServer(String basePath) async {
  final server = await HttpServer.bind(InternetAddress.loopbackIPv4, 4040);

  print('Listening on localhost:${server.port}');

  await for (HttpRequest request in server) {
    handleRequest(basePath, request);
  }
}

Future<void> handleRequest(String basePath, HttpRequest request) async {
  final String path = request.uri.toFilePath();

  final String resultPath = path == '\\' ? '\\index.html' : path;
  final File file = File('$basePath$resultPath');

  if (await file.exists()) {
    print("Serving ${file.path}");
    request.response.headers.contentType = ContentType.html;
    try {
      await file.openRead().pipe(request.response);
    } catch (e) {
      print("Couldn't read file: $e");
      exit(-1);
    }
  } else {
    print("Can't open ${file.path}.");
    request.response
      ..statusCode = HttpStatus.notFound
      ..close();
  }
}

Future<void> sendInternalError(HttpResponse response) async {
  response.statusCode = HttpStatus.internalServerError;
  await response.close();
}

Future<void> sendNotFound(HttpResponse response) async {
  response.statusCode = HttpStatus.notFound;
  await response.close();
}

Future<void> main() async {
  // Compute base path for the request based on the location of the
  // script, and then start the server.
  final script = File(Platform.script.toFilePath());

  await runServer(script.parent.path);
}

Here's the build output

packages <dir>
.build.manifest
.packages
dartserver.dart
favicon.png
index.html
main.dart.js
styles.css

And here's the Index.HTML

<!DOCTYPE html>
<html>

<head>
  <script>
    (function () {
      var m = document.location.pathname.match(/^(\/[-\w]+)+\/web($|\/)/);
      document.write('<base href="' + (m ? m[0] : '/') + '" />');
    }());
  </script>

  <title>Test App</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" type="image/png" href="favicon.png">

  <script defer src="main.dart.js"></script>
</head>

<body>
  <my-app>Loading...</my-app>
</body>

</html>

In the browser I get two errors

Refused to apply style from 'http://localhost:4040/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Refused to execute script from 'http://localhost:4040/main.dart.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Upvotes: 2

Views: 93

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657028

request.response.headers.contentType = ContentType.html;

Instead of ContentType.html return the correct mime type.

You can use https://pub.dartlang.org/packages/mime 

lookupMimeType(file.path)

Upvotes: 2

Related Questions