webdev

This page explains how to use webdev and a tool it depends on — build_runner — to build, serve, and test your web apps. The webdev package provides webdev, which wraps around the more general-purpose build_runner tool.

Usually you can use webdev instead of directly using build_runner. The only time most web app developers run build_runner is for tests.

Dart 2 note: The webdev tool replaces the Dart 1.x pub build and pub serve commands.

Setup

The easiest way to get webdev is to globally install it, so that it can be in your PATH. Before you can use webdev, your web app must depend on the build_runner and build_web_compilers packages.

Installing and updating webdev

Globally install webdev using pub:

  1. $ pub global activate webdev

Use the same command to update webdev. We recommend updating webdev whenever you update your Dart SDK or when webdev commands unexpectedly fail.

Depending on build_* packages

To use webdev or (in a web app context) build_runner, you must be in the root directory of a package that depends on the build_runner and build_web_compilers packages. If you’re testing the app, it must also depend on build_test.

To depend on these packages, add the following dev dependencies to your app’s pubspec.yaml file:

  1.   dev_dependencies:
  2.     # ···
  3.     build_runner: ^1.0.0
  4.     build_test: ^0.10.2
  5.     build_web_compilers: ^0.4.0

As usual after pubspec.yaml changes, run pub get or pub upgrade:

  1. $ pub get

Using webdev and build_runner commands

This section describes how to use the following commands:

webdev serve

Runs a development server that continuously builds a web app.

webdev build

Builds a deployable version of a web app.

build_runner test

Runs tests.

You can customize your build using build config files. For details, see the build_web_compilers package.

webdev serve

To launch a development server, which serves your app and watches for source code changes, use the following command:

  1. webdev serve [--release] [ [<directory>[:<port>]] ... ]

By default, webdev serve compiles your app using dartdevc and serves the app at localhost:8080:

  1. $ webdev serve  # uses dartdevc

The first dartdevc build is the slowest. After that, assets are cached on disk, and incremental builds are much faster.

Note: The development compiler (dartdevc) supports only Chrome. To view your app in another browser, use the production compiler (dart2js). For a list of supported browsers, see the FAQ.

To use dart2js instead of dartdevc, add the --release flag:

  1. $ webdev serve --release  # uses dart2js

You can specify different directory-port configurations. For example, the following command changes the test port from the default (8081) to 8083:

  1. $ webdev serve web test:8083 # App: 8080; tests: 8083

webdev build

Use the following command to build your app:

  1. webdev build [--no-release] --output [<dirname>:]<dirname>

By default, the build command uses the dart2js web compiler to create a production version of your app. Add --no-release to compile with dartdevc. Using the --output option, you can control which top-level project folders are compiled and where output is written.

For example, the following command uses dart2js to compile the project’s top-level web folder into the build directory:

  1. $ webdev build --output web:build

build_runner test

Use the build_runner test command to run your app’s component tests:

  1. $ pub run build_runner test [build_runner options] -- -p <platform> [test options]

Tip: If the command fails to load the test file, make sure that your app’s pubspec has a dev dependency on build_test.

For example, here’s how to run all Chrome platform tests:

  1. $ pub run build_runner test -- -p chrome

To see all available build_runner options, use the --help or -h option:

  1. $ pub run build_runner test -h

Arguments after the empty -- argument are passed directly to the test package runner. To see all command-line options for the test package runner, use this command:

  1. $ pub run test -h

More information

For a complete list of webdev options, run webdev --help or see the webdev package.

Also see the following pages: