Dart redstone web application

Issue

Let’s say I configure redstone as follows

    @app.Route("/raw/user/:id", methods: const [app.GET])
    getRawUser(int id) => json_about_user_id;

When I run the server and go to /raw/user/10 I get raw json data in a form of a string.

Now I would like to be able to go to, say, /user/10 and get a nice representation of this json I get from /raw/user/10.

Solutions that come to my mind are as follows:

  1. First
    • create web/user/user.html and web/user/user.dart, configure the latter to run when index.html is accessed
    • in user.dart monitor query parameters (user.dart?id=10), make appropriate requests and present everything in user.html, i.e.
         var uri = Uri.parse( window.location.href );
         String id = uri.queryParameters['id'];
         new HttpRequest().getString(new Uri.http(SERVER,'/raw/user/${id}').toString() ).then( presentation )

A downside of this solution is that I do not achieve /user/10-like urls at all.

  1. Another way is to additionally configure redstone as follows:

    @app.Route("/user/:id", methods: const [app.GET])
    getUser(int id) => app.redirect('/person/index.html?id=${id}');
    

in this case at least urls like “/user/10” are allowed, but this simply does not work.

How would I do that correctly? Example of a web app on redstone’s git is, to my mind, cryptic and involved.

I am not sure whether this have to be explained with connection to redstone or dart only, but I cannot find anything related.

Solution

I guess you are trying to generate html files in the server with a template engine. Redstone was designed to mainly build services, so it doesn’t have a built-in template engine, but you can use any engine available on pub, such as mustache. Although, if you use Polymer, AngularDart or other frameowrk which implements a client-side template system, you don’t need to generate html files in the server.

Moreover, if you want to reuse other services, you can just call them directly, for example:

@app.Route("/raw/user/:id")
getRawUser(int id) => json_about_user_id;

@app.Route("/user/:id")
getUser(int id) {
  var json = getRawUser();
  ...
}

Redstone v0.6 (still in alpha) also includes a new foward() function, which you can use to dispatch a request internally, although, the response is received as a shelf.Response object, so you have to read it:

@app.Route("/user/:id")
getUser(int id) async {
  var resp = await chain.forward("/raw/user/$id");
  var json = await resp.readAsString();
  ...
}

Edit:

To serve static files, like html files and dart scripts which are executed in the browser, you can use the shelf_static middleware. See here for a complete Redstone + Polymer example (shelf_static is configured in the bin/server.dart file).

Answered By – luizmineo

Answer Checked By – Katrina (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *