What is the best way to integrate Aqueduct server with an existing client based Dart webapp?

Question

I am trying to link an aqueduct server with my existing dart project. I am aware of aqueducts HTTPFileController and how you can serve static files, but I was looking for insight on the best way to integrate a full client side web app written in dart with the aqueduct framework. I.e. making API method calls from the component which say return a list of users or something like that. The RPC package offers something like this, but I would like to use aqueduct as it is more robust and offers more features.

Currently my overall project structure looks like: Any suggestions are appreciated!

• my_proj
  • build
  • lib
    • components
      • (dart components serving html)
    • controller
      • (aqueduct controllers)
    • model
      • (aqueduct models)
    • my_proj.dart
    • my_proj_sink.dart
  • migrations
  • test
  • web
    • main.dart
    • index.html

Answer 1

It's a good idea to keep the projects separate. This way you can have separate dependency constraints for both platforms, which will end up being meaningful as your application grows. It will give you the most flexibility in deployment, too.

Here's an example repository; these are works in progress, so the Flutter application is hooked up to the Aqueduct API, while the Angular2 app hasn't been touched. Flutter has a similar component-like approach.

The shared directory will be most interesting to you - it has the model and services for making calls to the API. Both the Flutter and Angular2 apps use it as a dependency.

In this example, the server is run with aqueduct serve --port 8082 from server/ and the web application is run with pub serve from angular2/. As the Dart ecosystem evolves with things like the DDC, you'll likely be best served by adopting a development/deploy pattern like this that works within that toolchain.

If you are planning on serving the generated HTML/CSS/JS files from Aqueduct, a good idea is to have an HTTPFileController reference the build/web folder in your Angular2 project. So, you might have a folder structure like:

  project/
    server/
      pubspec.yaml
      lib/
        sink.dart
        controllers/
        model/
    client/
      pubspec.yaml
      lib/
      web/

And your route hookup looks like this:

router
  .route("/*")
  .pipe(new HTTPFileController("../client/build/web"));

Another approach is to have a build script that writes the files into a directory inside the server directory; this might be useful for deploying.

The Aqueduct team is currently looking at different options and building tools for this purpose. With the recent release of DDC, we are focused more on providing a toolchain that works with it. (I'll also see if one of our team members focused on this part of the puzzle can drop in here with some additional thoughts.)

Please feel free to file an issue for this as well so you can track its progress. Likewise, we have folks in Gitter dart-lang/server that answer quickly. Hope this helps.