Building Application Polymers in Dart

I tend to doubt that I will include a deployment chapter in Patterns in Polymer. It would be difficult at best to find commonalities between the Dart and JavaScript version. I would also imagine that best practices on the matter would change and likely be better in web form than in book form. Still, I am curious enough to play with it one more night.

Last night, I found that, instead of organizing a Dart application with application-specific polymers in the usual lib structure:

lib
├── hello_you.dart
└── hello-you.html
web
└── index.html

I had to include my application specific Polymers in a subdirectory of the web application directory:

web
├── elements
│   ├── hello_you.dart
│   └── hello-you.html
└── index.html

I can live with that, especially since I found that the ToDo MVC does the same. But then James Hurford reported that he was able to get it working with the lib approach. So let's see if I can get this going.

This is not the first time that James has reported being able to do something that I could not get working. The most obvious difference between our setups is that James is coding in the DartEditor while I rely on the one true editor, Emacs. To eliminate this as a possible cause, I fire up the application in the DartEditor and right-click build a Polymer app:



When I run my app in Dartium, I am still not seeing my Polymer, just the text wrapped by the Polymer:



In addition to not seeing Polymer in action, I also see that my assets, like:

<link type="text/css" rel="stylesheet" href="/assets/ie/bootstrap.min.css">

Are not being loaded. At this point, I realize that I am specifying my URLs absolutely, including the URLs that point to my application Polymers:

<link rel="import" href="/packages/ie/hello-you.html">

If I change both to relative URLs:

<link type="text/css" rel="stylesheet" href="assets/ie/bootstrap.min.css">
<!-- ... -->
<link rel="import" href="packages/ie/hello-you.html">

Then re-build, then my application Polymer works!



That turns out to be the solution to my application specific Polymers. Switching back to Emacs and the command line, I change the Polymer URL back to an absolute URL and run pub build (part of Dart Pub). Serving the application up in pub serve, my Polymer fails again. It should not matter with pub serve because the relative and absolute URLs are the same in this case (DartEditor adds another URL path, which is why I noticed the assets not loading).

Switching that single Polymer import from an absolute to relative URL fixes the problem:

<link rel="import" href="packages/ie/hello-you.html">

After a quick pub build, my Polymer is again working just fine (in all browsers).

It seems that the pub build process really, really wants that to be a relative URL. I suppose that makes some sense since it is converting a web URL into a file system path. Still, I would think that the build process ought to be able to make that conversion on its own. For now, I am happy to have a solution, but I may file that as a bug after sleeping on it.


Day #971

‹prev | My Chain | next›