Hot Reload Not Working on Flutter 3.32.1 with Custom Web Launch Configuration

[j-ixcayau]

Description:

After upgrading to Flutter 3.32.1, hot reload stopped working in one of my web apps when launched using a custom configuration. I’ve tested with both Android Studio and the command line, and the issue persists.

Launch Configuration

This is the launch configuration I'm using:

{
  "name": "Web App",
  "request": "launch",
  "type": "dart",
  "program": "${workspaceFolder}/web_app/lib/main.dart",
  "flutterMode": "debug",
  "deviceId": "chrome",
  "args": [
    "--web-experimental-hot-reload",
    "--web-hostname",
    "0.0.0.0",
    "--web-port",
    "64664",
    "--web-tls-cert-path",
    "web_ssl_certs/cert.crt",
    "--web-tls-cert-key-path",
    "web_ssl_certs/cert.key",
    "--web-launch-url",
    "http://flutter.app.local"
  ]
}

Observations

• Hot reload doesn't work at all with the above setup.
• Removing the custom arguments or launching without the custom config does restore hot reload functionality.
• I tested another web app by upgrading it to Flutter 3.32.1 without custom arguments, and hot reload works perfectly there.
• This suggests that one (or more) of the custom arguments may be breaking hot reload in Flutter 3.32.1.

I think this is related https://github.com/dart-lang/sdk/issues/60776

When hot reload is called, I get this on console

Code sample

No response

Flutter version

3.32.1

[biggs0125]

Hi @j-ixcayau, thanks for filing a bug here.

I believe the issue you're seeing here may be related to the --web-launch-url flag. This may have been fixed by this PR from last week: https://github.com/flutter/flutter/pull/169267

Are you able to try your same workflow on the main channel to see if it works with that change present?

[j-ixcayau]

I tried with 3.32.2 but didn't work, was this fix included?

[MsYoda]

Same here

Previously, before upgrading Flutter to version 3.32.4, I launched my app in Chrome using the following command:

flutter run -d web-server --web-port=8080

At that time, the app would initially show a white screen and remain unresponsive until I manually enabled the Dart Debug Extension in Chrome. Once enabled, the app would resume running correctly, and I could see logs in the terminal.

However, after upgrading to Flutter 3.32.4, the behavior has changed. Now the app skips the step of waiting for the Dart Debug Extension to be enabled—it starts running right away, but no logs are shown in the terminal. Instead, I only see the following message in terminal:

Waiting for connection from Dart debug extension at http://localhost:8080
The web-server device requires the Dart Debug Chrome extension for debugging. Consider using the Chrome or Edge devices for an improved development workflow.

Also now I see following in browser console

registerExtension() from dart:developer is only supported in build/run/test environments where the developer event method hooks have been set by package:dwds v11.1.0 or higher.
_registerExtension @ developer_patch.dart:96

I suspect this behavior might be related to this issue

[biggs0125]

I tried with 3.32.2 but didn't work, was this fix included?

@j-ixcayau The PR mentioned above (https://github.com/flutter/flutter/pull/169267) has not been cherrypicked, it is only available on the Flutter beta and main channels. To try it out, here are instructions to switch your SDK to the beta channel: https://docs.flutter.dev/install/upgrade#switching-flutter-channels

before upgrading Flutter to version 3.32.4

@MsYoda Can you clarify which version of Flutter you were on before upgrading to 3.32.4? Also can you clarify if there are any additional flags you are passing when doing flutter run? Unless you are passing the --web-launch-url this seems like it's probably a different issue.

[MsYoda]

@biggs0125

I was using Flutter version 3.29.3 before upgrading to 3.32.4.

I'm not passing any additional flags — I run the project with the following command:

flutter run -d web-server --web-port=8080

The issue I described also occurs when running the default Counter app generated by flutter create ., so it doesn’t seem to be related to any specific project setup.

Should I fill different issue ?

[biggs0125]

Thanks for the extra context. Yes, this sounds like a different issue you are facing. Please file a new issue with all the info you've given here.

Also you mention:

it starts running right away, but no logs are shown in the terminal. Instead, I only see the following message in terminal

Does this mean the app is loading normally, you just aren't able to attach a debugger. Or is the app not loading at all? If you could clarify this in the new issue that would be great. Thanks!

[j-ixcayau]

I just tried in beta channel and doesn't work either, still getting this

This Is my flutter doctor logs

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 3.34.0-0.0.pre, on macOS 15.5 24F74 darwin-arm64, locale en-GT)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 16.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.3)
[✓] VS Code (version 1.101.2)
[✓] Connected device (5 available)
[✓] Network resources

• No issues found!

[nshahan]

@MsYoda A new dot release (3.34.0-0.1.pre) was published on the beta channel yesterday that includes a temporary fix. I can no longer reproduce the app failing to start in the browser when launching with flutter run -d web-server --web-port=8080 on that version.

[nshahan]

@j-ixcayau Could you clarify the flags you're using to launch the app? Are you still using the launch config you posted in the original post?

Does the issue still reproduce on the latest beta published yesterday (3.34.0-0.1.pre)?

[j-ixcayau]

Yup still getting the same error, with the same args, do you need me to provide additional information? and if so, what do you need?

[nshahan]

@j-ixcayau

I'd like to get a simple reproduction that uses all the flags you have in combination but I don't fully understand what they are all intending to do. Could you explain the intent of all the flags and the values you are passing so I can understand how they are working together in your environment? It seems like you must have some custom configuration outside of the flags passed to your flutter run command that are gluing this all together. At least a hosts file entry or something?

[github-actions[bot]]

Without additional information we're not able to resolve this issue. Feel free to add more info or respond to any questions above and we can reopen the case. Thanks for your contribution!

[j-ixcayau]

I just updated to flutter 3.35.2 and still getting the same error, check this and let me know if helps to get more context of what I'm doing If I create a new project from scratch the host reload works as expected, or if I update other projects that works "normally", I mean without additional args, only using flutter run

Flutter Web Local Development Domain Setup

I'll help you understand how "flutter.myapp.local" is being used throughout the project. Let me search for references to this domain across the codebase.

Based on my analysis of the codebase, here's how "flutter.myapp.local" is being used throughout the Flutter web project:

Overview

flutter.myapp.local is a local development domain used to serve the Flutter web application in the project's local development environment. It's part of a comprehensive local development setup that includes multiple services and domains.

Key Components and Usage

1. Local Development Setup

• Domain Registration: The domain needs to be added to your /etc/hosts file to map both 127.0.0.1 and ::1 to flutter.myapp.local. This allows your local machine to resolve the domain to localhost.

2. Docker Infrastructure

The domain is configured in the Docker Compose setup (local-server/docker-compose.yml):

flutter-web-app-proxy:
  image: nginx
  environment:
    VIRTUAL_HOST: flutter.myapp.local,~^flutter-myapp-local-.*\.(nip\.io|traefik\.me)
    CERT_NAME: _wildcard.myapp.local
    HTTPS_METHOD: redirect

3. Nginx Proxy Configuration

The domain uses a two-tier proxy setup:

1. Main nginx-proxy: Handles SSL termination and routing to flutter.myapp.local
2. flutter-web-app-proxy: An intermediate nginx proxy that forwards requests to the Flutter development server running on host.docker.internal:64664

4. Flutter Development Server

The Flutter web application runs with specific configuration:

• Port: 64664 (HTTPS)
• Host: 0.0.0.0 (accessible from containers)
• SSL Certificates: Uses self-signed certificates (cert.crt and cert.key)
• Launch URL: http://flutter.myapp.local (redirected to HTTPS)

Configuration from .vscode/launch.json:

{
  "name": "Web App",
  "args": [
    "--web-hostname", "0.0.0.0",
    "--web-port", "64664",
    "--web-tls-cert-path", "web_ssl_certs/cert.crt",
    "--web-tls-cert-key-path", "web_ssl_certs/cert.key",
    "--web-launch-url", "http://flutter.myapp.local"
  ]
}

5. SSL Certificate Handling

• Flutter Server: Uses self-signed certificates (not trusted by browsers)
• Nginx Proxy: Serves with a trusted wildcard certificate (_wildcard.myapp.local)
• The nginx proxy doesn't validate the Flutter server's self-signed certificates but presents a trusted certificate to browsers

6. API Configuration

The Flutter web application is configured to use local API endpoints:

• Uses https://api.myapp.local and https://search.myapp.local

Architecture Flow

Browser (https://flutter.myapp.local)
    ↓
nginx-proxy (SSL termination, trusted certificate)
    ↓
flutter-web-app-proxy (nginx container)
    ↓
Flutter Development Server (port 64664, self-signed SSL)

Purpose

This setup allows developers to:

1. Run the Flutter web application locally with HTTPS
2. Test the web application with proper SSL/domain setup
3. Develop with hot reload while maintaining secure connections
4. Integrate with other local services (APIs, databases) seamlessly
5. Mirror production-like environment locally

The flutter.myapp.local domain serves the development version of the Flutter web application with hot reload capabilities, while webapp.myapp.local serves the built/compiled version for testing production builds.