Skip to content

Update docs for hot reload on the web #12216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 39 additions & 26 deletions src/content/platform-integration/web/building.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ to an existing project.
To create a new app that includes web support, run the following command:

```console
$ flutter create my_app
$ flutter create my_app
```

### Add web support to an existing project
Expand All @@ -38,7 +38,7 @@ $ flutter create . --platforms web
```

This creates a `web/` directory containing the web assets used to bootstrap
and run your Flutter app.
and run your Flutter app.

## Run your app

Expand All @@ -58,41 +58,54 @@ navigate to a local URL in the browser of your choice.
<a id="hot-reload-web" aria-hidden="true" ></a>

:::note Hot reload on the web
As of the Flutter 3.32 release, you can experiment
with hot reload on the web behind a flag.
[Hot restart][], which restarts your app
without refreshing the web page,
doesn't require a flag.
As of the Flutter 3.35 release,
hot reload is enabled by default on the web.
[Hot restart][] is still available as well.

If you discover any issues we ask that you file a bug
using our new [Web Hot Reload issue template][].
using our [Web Hot Reload issue template][].
Note this is in the Dart SDK repository where it's easier
for us to track issues. Known issues can be seen in the
associated [GitHub project][].

To try hot reload for the web, pass the `--web-experimental-hot-reload` flag
wherever you invoke `flutter run -d chrome`.

### Running from VS Code

If you use debug configurations in VS code,
you can add this extra configuration to your
[`launch.json` file][].
associated [GitHub project][].

Hot reload can be temporarily disabled with the
`--no-web-experimental-hot-reload` flag
wherever you invoke `flutter run`. This flag will be removed
in a future release.

### Disabling in VS Code

To temporarily disable hot reload support from VS Code,
update your [`launch.json` file][] file with
the flag `--no-web-experimental-hot-reload`.

```plaintext
"configurations": [
...
{
"name": "Flutter for web (hot reload disabled)",
"type": "dart",
"request": "launch",
"program": "lib/main.dart",
"args": [
"-d",
"chrome",
"--no-web-experimental-hot-reload",
]
}
]
```

### Running from the command line
### Disabling from the command line

If you use `flutter run` from the command line,
you can now run hot reload on the web with the
you can temporarily disable hot reload on the web with the
following command:

```console
flutter run -d chrome --web-experimental-hot-reload
flutter run -d chrome --no-web-experimental-hot-reload
```

When hot reload is enabled,
you can reload your application by pressing "r"
in the running terminal, or "R" to hot restart.

### Reloading in DartPad

Hot reload is also enabled in DartPad with a new "Reload" button.
Expand All @@ -105,7 +118,7 @@ session by selecting a sample app provided by DartPad.
[Hot restart]: /tools/hot-reload
[How to switch channels]: /install/upgrade#switching-flutter-channels
[`launch.json` file]: https://code.visualstudio.com/docs/debugtest/debugging-configuration
[Web Hot Reload issue template]: {{site.github}}/dart-lang/sdk/issues/new?template=6_web_hot_reload.yml
[Web Hot Reload issue template]: {{site.github}}/dart-lang/sdk/issues/new?template=5_web_hot_reload.yml
[GitHub project]: {{site.github}}/orgs/dart-lang/projects/107/views/1

### Run your app using WebAssembly
Expand Down
16 changes: 8 additions & 8 deletions src/content/tools/hot-reload.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,25 +76,25 @@ The code updates and execution continues.
**What is the difference between hot reload, hot restart,
and full restart?**

* **Hot reload** loads code changes into the VM and re-builds
the widget tree, preserving the app state;
* **Hot reload** loads code changes into the VM or the browser,
and re-builds the widget tree, preserving the app state;
it doesn't rerun `main()` or `initState()`.
(`⌘\` in Intellij and Android Studio, `⌃F5` in VSCode)
* **Hot restart** loads code changes into the VM,
* **Hot restart** loads code changes into the VM or the browser,
and restarts the Flutter app, losing the app state.
On the web, this can restart the app without a full page refresh.
(`⇧⌘\` in IntelliJ and Android Studio, `⇧⌘F5` in VSCode)
* **Full restart** restarts the iOS, Android, or web app.
This takes longer because it also recompiles the
Java / Kotlin / Objective-C / Swift code. On the web,
it also restarts the Dart Development Compiler.
Java / Kotlin / Objective-C / Swift / JavaScript code.
On the web, it also restarts the Dart Development Compiler.
There is no specific keyboard shortcut for this;
you need to stop and start the run configuration.

Flutter web currently supports hot restart and
[hot reload behind an experimental flag][].
Flutter web now supports hot restart and [hot reload][].
:::

[hot reload behind an experimental flag]: /platform-integration/web/building#hot-reload-web
[hot reload]: /platform-integration/web/building#hot-reload-web

![Android Studio UI](/assets/images/docs/development/tools/android-studio-run-controls.png){:width="100%"}<br>
Controls for run, run debug, hot reload, and hot restart in Android Studio
Expand Down
Loading