Flutter web: Opening direct URL navigation working on local but not after deployment

Question

I am trying to implement Flutter web url navigation in my application. When I am trying to open http://localhost:7357/privacy-policy directly it is opening fine on my local machine but when I am trying to open the same URL directly after deploying it on server it is not loading and throwing me errors. I am using Firebase to deploy my application.

Everything works fine after deploying when I am trying to access through the home page without any specific navigation for ex: www.example.com, the error comes when I am trying to directly access the page www.example.com/privacy-policy instead of going through home page.

Any help is much appreciate. Thanks.

Wallaby

problem is your accessing private IP on deployment you have to make this ip public . – Mote

@Ashutoshsingh I didn't understand your comment, what IP are you talking about? My application is working fine after deployment, if I am trying to open a particular page directly through URL navigation that is throwing up this error. – Wallaby

Answer 1

try adding "rewrites" in your firebase.json

"hosting": {
  "rewrites": [ {
    "source": "**",
    "destination": "/index.html"
   } ]
}

and refer to this: When I refresh my website I get a 404. This is with Angular2 and firebase

Venusian

Answer 2

Adding the vercel way (though not asked), as this has bugged me for a while:

Add vercel.json in the root of your project.

{
  "rewrites":  [
    {"source": "/(.*)", "destination": "/"}
  ]
}

Hemicrania

Answer 3

Me too, i am facing same issue, flutter works when debugging but when hosting to web server apache, can't access direct url. so this is my solution.

in main function get pathname. and for routing system, i'am using fluro

import 'package:url_strategy/url_strategy.dart'; // for remove '#' on url
import 'dart:html' as html; 
void main() {
      RouteService.setupRouter();
      setPathUrlStrategy();
      final String pathName = html.window.location.pathname ?? '/';
      runApp(MyApp(pathName: pathName));
}

class MyApp extends StatelessWidget {
      String pathName;

      MyApp({Key? key, required this.pathName}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
      return MaterialApp(
               title: 'Flutter Demo',
               theme: ThemeData(
               primarySwatch: Colors.blue,
               textTheme: Theme.of(context).textTheme.apply(fontFamily: 
               'Open Sans'),
               ) ,
         initialRoute: pathName,
         onGenerateRoute: RouteService.router.generator,
      );
  }
}

create .htaccess to load application through index.html

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html?path=$1 [NC,L,QSA]

after that i can access application via direct url. example: /detail, /products or /product/2

Fructify