Search

#### Docs

- Guide
  - Overview
  - Setup
  - Learning Angular
  - Architecture
  - Displaying Data
  - User Input
  - Forms
  - Dependency Injection
  - Template Syntax
- Tutorial
  - Introduction
  - 0. The Starter App
  - 1. The Hero Editor
  - 2. Master/Detail
  - 3. Multiple Components
  - 4. Services
  - 5. Routing
  - 6. HTTP
- Advanced
  - Attribute Directives
  - Component Styles
  - Deployment
  - Hierarchical Injectors
  - HTTP Client
  - Lifecycle Hooks
  - Pipes
  - Router
  - Security
  - Structural Directives
  - Testing

#### Components

- Components Gallery

#### Resources

- Cheat Sheet
- Glossary
- FAQ
- Tools
- Community and Support

#### Reference

- Videos
- API Documentation

new_releases We're currently in the progress of migrating this site from Angular version 5.3.1 to 7.0.0. Package versions might be out-of-date or inconsistent! Visit the repo for more info.

# Deployment 6.0

Deploying an AngularDart web app is similar to deploying any other web app: you first need to compile the app to JavaScript. This page describes how to compile your app—with tips for making it smaller and faster—and points you to resources for serving the app.

## Building your app

Use the webdev tool to build your app, compiling it to JavaScript and generating all the assets you need for deployment. When you build using dart2js, you get a JavaScript file that’s reasonably small, thanks to the dart2js compiler’s support for tree shaking.

With a little extra work, you can make your deployable app smaller, faster, and more reliable.

### Compile using webdev

Use the webdev build command to create a deployable version of your app. Here’s what happens when you use webdev with dart2js and the `--output build` option:

- Deployable files appear under your app’s `build` directory.
- dart2js compiles your app to JavaScript, saving the result in the file `build/main.dart.js`.

For more information, see the documentation for webdev.

### Use dart2js flags to produce better JavaScript

Google’s apps often use the following dart2js options:

- `--fast-startup`
- `--minify`
- `--trust-primitives`
- `--omit-implicit-checks`

Test your apps before deploying with these options!

- Build your app both with and without `--fast-startup`, so you can judge whether the speedup is worth the increase in JavaScript size.
- The `--trust-primitives` option can have unexpected results (even in well-typed code) if your data isn’t always valid.

For more information, see the documentation for dart2js.

Important: Make sure your app has good test coverage before you use either of the `--trust-*` or `--omit-*` options. If some code paths aren’t tested, your app might run in dartdevc but misbehave when compiled using dart2js.

You can specify dart2js options in a build config file, as described in the build_web_compilers README.

### Make your app smaller, faster, and more reliable

The following steps are optional, but they can help make your app more reliable and responsive.

- Building your app {#compiling-to-javascript}
  - Compile using webdev
  - Use dart2js flags to produce better JavaScript
  - Make your app smaller, faster, and more reliable
    - Use the pwa package to make your app work offline
    - Use deferred loading to reduce your app’s initial size
    - Follow best practices for web apps
    - Remove unneeded build files
- Serving your app
  - Angular-specific tips
  - GitHub Pages
  - Firebase

#### Use the pwa package to make your app work offline

The pwa package simplifies the task of making your app work with limited or no connectivity. For information on using this package, see Making a Dart web app offline-capable: 3 lines of code.

#### Use deferred loading to reduce your app’s initial size

You can use Dart’s support for deferred loading to reduce your app’s initial download size. For details, see the language tour’s coverage of deferred loading and the dart-lang/angular page Imperative Component Loading.

#### Follow best practices for web apps

The usual advice for web apps applies to AngularDart web apps. Here are a few resources:

- Web Fundamentals (especially Optimizing Content Efficiency)
- Progressive Web Apps
- Lighthouse

#### Remove unneeded build files

Web compilers can produce files that are useful during development, such as Dart-to-JavaScript map files, but unnecessary in production.

To remove these files, you can run a command like the following:

    # From the root directory of your app:
    find build -type f -name "*.js.map" -exec rm {} +

## Serving your app

You can serve your AngularDart app just like you’d serve any other web app. This section points to tips for serving Angular apps, as well as Dart-specific resources to help you use GitHub Pages or Firebase to serve your app.

### Angular-specific tips

For information on changes you might have to make to the server, see the Server configuration section of the Angular TypeScript deployment documentation.

### GitHub Pages

If your app doesn’t use routing or require server-side support, you can serve the app using GitHub Pages. The peanut package is an easy way to automatically produce a gh-pages branch for any Dart web app.

The startup_namer example is hosted using GitHub Pages. Its files are in the gh-pages branch of the filiph/startup_namer repo and were built using peanut.

### Firebase

AngularDart and Firebase resources:

- The Google I/O 2017 codelab Build an AngularDart & Firebase Web App walks through using Firebase for server-side communication, but doesn’t include instructions for serving the app.
- The Firebase Hosting documentation describes how to deploy web apps with Firebase.
- In the Firebase Hosting documentation, Customize Hosting Behavior covers redirects, rewrites, and more.