404 Failed to load resource Deploying Flutter Web App to Firebase Hosting

Question

I am trying to deploy my Flutter app to Firebase Hosting. App runs fine with flutter run -d chrome and builds successfully using flutter build web --web-renderer html --release

In my flutter web application I have more then one page. I am using

velocity_x: ^3.3.0

for page routing because this plugin using flutter 2.0 navigation.

The issue that I'm facing when I open my web home is working fine when I go to another page by clicking the next page open but when I refresh that second page that shows 404 not found I do not Understand what I am doing wrong. That same thing is working fine in debug mode but after deploying my flutter web that 404 issue comes. please help me I tried a lot but did understand what should I do.

my main.dart file

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Hive.initFlutter();
  Vx.setPathUrlStrategy();
  Hive.registerAdapter(MultiAccountAdapter());
  await Hive.openBox<MultiAccount>('accounts');
  await Firebase.initializeApp();
  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
  runApp(MyApp());
}

Locale locale;
void getPref() async {
  var res = await SharedPref().getStringVariable("lan");

  if (res != null) {
    if (res != null && res == "ENGLISH") {
      locale = Locale('en', 'US');
    } else if (res != null && res == "DUTCH") {
      locale = Locale('nl', 'NL');
    } else {
      locale = Locale('en', 'US');
    }
  } else {
    locale = ui.window.locale;
    // Get.updateLocale(locale);
  }
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return OverlaySupport(
      child: GetMaterialApp.router(
        debugShowCheckedModeBanner: false,
        translations: LocaleString(),
        locale: locale,
        theme: ThemeData(
          primaryColor: green,
          primaryColorDark: greenDark,
          fontFamily: 'Montserrat-Medium',
          accentColor: Colors.grey,
          cursorColor: greenDark,
          textTheme: TextTheme(
            bodyText1: TextStyle(fontSize: 14.0),
          ),
        ),
        routeInformationParser: VxInformationParser(),
        routerDelegate: VxNavigator(
          routes: VxRoutes.instance.newMethod,
        ),
      ),
    );
  }
}

my routing file

class VxRoutes {
  static VxRoutes instance = VxRoutes();
  Map<Pattern, VxPageBuilder> get newMethod {
    return {
      "/": (_, param) => VxRoutePage(
            child: HomeScreen(
              showSnackbar: param ?? false,
            ),
            transition: (animation, child) => FadeTransition(
              opacity: animation,
              child: child,
            ),
          ),
  SteplerDetailScreenRoute: (uri, params) {
        var steplerId = uri.queryParameters["steplerId"];
        if (steplerId == null || steplerId == "") {
          return VxRoutePage(
            child: CrashScreen(),
            transition: (animation, child) => FadeTransition(
              opacity: animation,
              child: child,
            ),
          );
        }
        return VxRoutePage(
          child: SteplerDetailScreen(
            steplerId: int.tryParse(steplerId.toString()),
          ),
          transition: (animation, child) => FadeTransition(
            opacity: animation,
            child: child,
          ),
        );
      },

   FullPhotoRoute: (uri, params) {
        var url = uri.queryParameters["url"];
        if (url == null || url == "") {
          return VxRoutePage(
            child: CrashScreen(),
            transition: (animation, child) => FadeTransition(
              opacity: animation,
              child: child,
            ),
          );
        }
        return VxRoutePage(
          child: FullPhoto(
            url: url,
          ),
          transition: (animation, child) => FadeTransition(
            opacity: animation,
            child: child,
          ),
        );
      },
     
    };
  }
}

my index.html

<!DOCTYPE html>
<html>

<head>

  <base href="/">
  <meta name="google-signin-client_id"abc">
  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="stepler_web">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png" />

  <title>Stepler</title>
  <link rel="manifest" href="manifest.json">
</head>

<body>
  <script
  async
  defer
  crossorigin="anonymous"
  src="https://connect.facebook.net/en_US/sdk.js"
></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-messaging.js"></script>
  <script>
    // Your web app's Firebase configuration
    var firebaseConfig = {
      apiKey: "abc",
      authDomain: "abc",
      projectId: "abc",
      storageBucket: "abc",
      messagingSenderId: "abc",
      appId: "abc",
      measurementId: "abc"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
  </script>
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('flutter-first-frame', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
  </script>
  <script src="main.dart.js" type="application/javascript"></script>
</body>

</html>

Answer 1

Here is another way to rewrite In your firebase.json file, add these lines

      // Serves index.html for requests to files or directories that do not exist
      "rewrites": [ {
        "source": "**",
        "destination": "/index.html"
      } ]

Or full code

{
  "hosting": {
    "public": "...",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [ {
      "source": "**",
      "destination": "/index.html"
    } ]

  }
}

Reference https://firebase.google.com/docs/hosting/full-config?authuser=2

Answer 2

Follow these steps

Go to your firebase console (where your code is hosted)

Edit .htaccess (it doesn't exist please create, sometimes it doesn't show, so enable show hidden files)

Edit/Add given code.

RewriteEngine on
RewriteCond %{REQUEST_FILENAME}% !-d
RewriteCond %{REQUEST_FILENAME}% !-f
RewriteRule . /index.html [L]

What do these 4 lines of code?

Ans: It redirects to the index.html page.

Because the flutter web is a single file code-based web application, your URL doesn't exist, like your URL is https://yourdomain.com/my-page but flutter web has only index.html. So we force to redirect that URL to the index.html

Answer 3

I resolved that issue by removing this Vx.setPathUrlStrategy();