Web: some config values ignored when supplying onEntryPointLoaded to _flutter.loader.load()
- Dominant language
- Dart
- Stars
- 179k
- Forks
- 31.1k
- PR merge metrics
- PR metrics pending
Description
### Steps to reproduce
1. Create a Flutter web project
2. Follow the [instructions for embedding in a web page](https://docs.flutter.dev/platform-integration/web/embedding-flutter-web#enable-multi-view-mode)
* This involves a custom `onEntryPointLoaded` function
3. Follow the [customization instructions](https://docs.flutter.dev/platform-integration/web/initialization#the-_flutter-loader-load-api) to set a custom `assetBase` and `entryPointBaseUrl`
### Expected results
The app is successfully hosted at my custom path.
### Actual results
The following is logged in the browser console.
```
GET http://localhost:4321/assets/FontManifest.json 404 (Not Found)
```
Assets aren't respecting the `assetBase` path I supplied.
This is because certain values in the `config` have to be manually passed to the `initializeEngine` call when using `onEntryPointLoaded`. If you don't use `onEntryPointLoaded` then all of the `config` values get passed automatically.
This is a hard API to use right - I initially thought it was a documentation bug ([#11341](https://github.com/flutter/website/issues/11341)).
`entryPointBaseUrl` ***does*** have to be passed in the `config` to `_flutter.loader.load()`. But `assetBase` has to be passed directly to `initializeEngine`.
I'm not sure how to make it right in a backward compatible way right now though.
### Code sample
Code sample
This bug involves hosting a Flutter app at an arbitrary path in a web site. I don't know how to simplify that for a quick and easy repro here.
If you follow the steps above, you'll wind up with something like this in your `flutter_bootstrap.js`.
```js
{{flutter_js}}
{{flutter_build_config}}
_flutter.loader.load({
config: {
entryPointBaseUrl: '/subpath/',
assetBase: '/subpath/',
},
onEntrypointLoaded: async function onEntrypointLoaded(engineInitializer) {
let engine = await engineInitializer.initializeEngine({
multiViewEnabled: true, // Enables embedded mode.
});
let app = await engine.runApp();
// Make this `app` object available to your JS app.
app.addView({
hostElement: document.querySelector('#flutter-element'),
});
}
});
```
Your `main.dart` should look like this:
```dart
import 'package:flutter/material.dart';
void main() {
runWidget(
const WebGateway(child: MainApp()
));
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: Center(
child: Text('Hello Astro!'),
),
),
);
}
}
class WebGateway extends StatefulWidget {
final Widget child;
const WebGateway({super.key, required this.child});
@override
State createState() {
return _WebGatewayState();
}
}
class _WebGatewayState extends State with WidgetsBindingObserver {
late Widget child;
@override
void initState() {
super.initState();
WidgetsBinding.instance.addObserver(this);
_updateView();
}
@override
void didUpdateWidget(WebGateway oldWidget) {
super.didUpdateWidget(oldWidget);
_updateView();
}
@override
void didChangeMetrics() {
_updateView();
}
void _updateView() {
final flutterView = WidgetsBinding.instance.platformDispatcher.views.single;
setState(() {
child = View(view: flutterView, child: widget.child);
});
}
@override
void dispose() {
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}
@override
Widget build(BuildContext context) {
return child;
}
}
```
### Screenshots or Video
_No response_
### Logs
_No response_
### Flutter Doctor output
Doctor output
```console
[✓] Flutter (Channel stable, 3.24.4, on macOS 14.6.1 23G93 darwin-arm64, locale en-US)
• Flutter version 3.24.4 on channel stable at /Users/christian/Development/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 603104015d (8 days ago), 2024-10-24 08:01:25 -0700
• Engine revision db49896cf2
• Dart version 3.5.4
• DevTools version 2.37.3
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /Users/christian/Library/Android/sdk
• Platform android-34, build-tools 34.0.0
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 16.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 16B40
• CocoaPods version 1.15.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2024.1)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)
[✓] IntelliJ IDEA Community Edition (version 2024.2.1)
• IntelliJ at /Applications/IntelliJ IDEA CE.app
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
[✓] VS Code (version 1.95.0)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.98.0
[✓] Connected device (3 available)
• macOS (desktop) • macos • darwin-arm64 • macOS 14.6.1 23G93
darwin-arm64
• Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 14.6.1 23G93
darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome
130.0.6723.92
[✓] Network resources
• All expected network resources are available.
• No issues found!
```
Contributor guide
Assessment
This issue has not been assessed yet.