How to use Dart Polymer with different file structure?

Question

I try to understand how to use polymer with file structure which differs from default Pub/Dart structure (so tutorials doesn't help me here). I've read the following pages:

https://www.dartlang.org/polymer/app-directories.html (if to be honest too overwhelmed to me)
https://www.dartlang.org/docs/tutorials/polymer-intro
https://www.dartlang.org/docs/tutorials/forms/#binding-data

Here is my structure:

src/
 controllers/, models/, views/ #Go related files
 main.go #Go web server
 static/ #CSS, Images, Dart
   ...
   styles/
   scripts/
     packages/ #links to actual packages
     web/
       packages/ #link to ../packages
       ui-elements.html
       main.dart
     pubspec.yaml
   ...

src/views/index.html - site's index page

...
<head>
  <link rel="import" href="scripts/web/ui-elements.html"/>
</head>
<body>
  <ui-watch></ui-watch>
  <!-- Does it should come first or after polymer/init.dart? -->
  <script type="application/dart" src="scripts/web/main.dart"></script>
  <!-- path doesn't resolve correctly so I commented it and place initialization into the main.dart file itself -->
  <!--<script type="application/dart">export 'package:polymer/init.dart';</script>-->
  <script src="scripts/packages/browser/dart.js"></script>
</body>

src/static/scripts/web/main.dart

import 'dart:html';
import 'dart:async';
import 'package:polymer/polymer.dart';
export 'package:polymer/init.dart';

@CustomTag('ui-watch')
class UIWatch extends PolymerElement {
  @observable String counter = '00:00';

  UIWatch.created() : super.created();

  ButtonElement startWatch;

  @override
  void detached() {
    super.detached();

  }
}
main() {
  initPolymer();
}

src/static/scripts/web/ui-elements.html

<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="ui-watch">
  <template>
    <div>{{counter}}</div>
    <div>
      <button id="startWatch">Start</button>
    </div>
  </template>

  <!--<script type="application/dart" src="main.dart"></script>-->
</polymer-element>

After run, I get the following:

GET http://localhost:8080/packages/polymer/polymer.html 404 (Not Found)
Error loading html import from path `polymer.html`
Found bad packages uri in html import. All packages uris should point to the
packages symlink in the same folder as the entry point.

Entry point: http://localhost:8080/
Owner document: http://localhost:8080/scripts/web/ui-elements.html
Current import: <link rel="import" href="packages/polymer/polymer.html">
#I've already try this path, but I got the same error
Corrected import: <link rel="import" href="../../packages/polymer/polymer.html">

For more information, please see:
https://www.dartlang.org/polymer/app-directories.html#into-a-non-dart-non-entry-point

warning: http://localhost:8080/packages/polymer/polymer.html not found.

What's wrong here? I'm little bit confused how to organize these files.. Whatever I try paths doesn't resolve correctly. I think, one of the problem here that I don't understand what polymer/polymer.html and polymer/init.dart actually do as well as in what sequence the should be included.

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2015-04-12T12:21:10

That won't work. If you deviate from the pub package structure pub build or pub serve will not be able to create a runnable Dart or JavaScript application.

If you want your go web server to serve the Dart client only the build output needs to be in the Directory go serves static content from, but not the Dart source files. They shouldn't be deployed anyway.

For development you should use a proxy or modify your go server to act as a proxy to forward all Dart related requests to pub serve.

How to use Dart Polymer with different file structure?

2 Answers