Search code examples
flutterweb-applicationsnavigationfermyon-spin

how to enable url navigation on a flutter web app served on fermyon spin

step to reproduce

  1. install flutter and fermyon spin
  2. create a flutter app (fermyon_routing_issue) configured as below
  • main.dart
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:flutter_web_plugins/url_strategy.dart';

final _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomeScreen(),
      routes: [
        GoRoute(
          path: 'details',
          builder: (context, state) => const DetailsScreen(),
        ),
      ],
    ),
  ],
);

abstract class NamedScreen extends StatelessWidget {
  final String name;
  const NamedScreen({super.key, required this.name});

  @override
  Widget build(context) => Scaffold(body: Center(child: Text(name)));
}

final class HomeScreen extends NamedScreen {
  const HomeScreen({super.key, super.name = 'home'});
}

final class DetailsScreen extends NamedScreen {
  const DetailsScreen({super.key, super.name = 'details'});
}

void main() {
  usePathUrlStrategy();
  runApp(MaterialApp.router(routerConfig: _router));
}
  • pubspec.yaml
name: fermyon_routing_issue
description: "A new Flutter project."

version: 1.0.0+1

environment:
  sdk: '>=3.3.3 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  flutter_web_plugins:
    sdk: flutter
  go_router: ^13.2.3

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^3.0.0

flutter:
  uses-material-design: true

  1. run the app flutter run -d chrome

    • when the app is running append to the url /details
    • observe the app shows the DetailsScreen

  2. add to the app folder the spin.toml with the content below

spin_manifest_version = 2

[application]
name = "server"
version = "0.1.0"
authors = ["you <[email protected]>"]
description = "static server for flutter web app"

[[trigger.http]]
route = "/..."
component = "server"

[component.server]
source = { url = "https://github.com/fermyon/spin-fileserver/releases/download/v0.2.1/spin_static_fs.wasm", digest = "sha256:5f05b15f0f7cd353d390bc5ebffec7fe25c6a6d7a05b9366c86dcb1a346e9f0f" }
files = [{ source = "build/web", destination = "/" }]
  1. run spin up and open the served url
    • when the app is running append to the url /details
    • observe the app shows Not Found

what is the correct configuration for fermyon spin to have the served static web app behaving as intended?

Solution

  • adding FALLBACK_PATH to spin.toml fix the issue

    [component.server]
//...
environment = { FALLBACK_PATH = "index.html" }