How do I reference resources in Dart web page

Question

I am creating a web app in Dart and I am using the Bootstrap CSS library. Since it is an external library, created a folder lib/third_party and placed the library there. The problem is that I am now unable to include the css files from the library in my html pages.

What path should I put in the src="" attribute so the file would load?

Answer 1

The resource files used by your app are called assets in Dart terminology.

The development servers in Dart editor and the one started by executing pub serve --no-dart2js are currently different programs with different behaviours. There are plans to unite those two, but as it is now, the former is more tightly integrated with Dart Editor and the latter has more features, especially regarding assets. For example, the built in development server does not yet support asset transformers.

pub serve

(conventions described here apply also for pub build)

There are conventions regarding to how to structure the package directory. As to where to place assets, Assets that are to be private for the current package are placed in the web/ directory and assets that are not specific to the current package or are to be shared with other packages belong to the folder asset/.

Resources placed in web/ can be referenced from html pages by specifying either relative path or absolute path. The root is taken to be the web directory itself.

Resources placed in the asset directory are available to the application under /assets/<package_name>/. Notice the word asset appears first in singular but then in plural. Using relative paths does not make much sense in this case. The Bootstrap library would be best placed here.

Dev server independent

For completeness, Dart code that is exported from the package is placed in the directory lib and is included by prefixing the path with package:package_name/ as in

include 'package:package_name/ … .dart';

If a package is referencing a file it is itself exporting, the <package_name> is the name of the current package, which may seem strange at first.

Sources:

All the information above except the difference between the development servers is from http://pub.dartlang.org/doc/assets-and-transformers.html