Flutter Web Page Routing Issue

Issue

I need web app with base url as

https://example.com/mojjo-test/index.html#/ 

I updated my base url as documented in flutter website:
https://flutter.dev/docs/development/ui/navigation/url-strategies

 <base href="/mojjo-test/">

in index.html

As per flutter documentation Hashing is already enabled

Observations:

1.Flutter web app loads, shows url while loading,

    http://example.com/mojjo-test/index.html

2.And after some seconds it redirects to

    http://example.com/mojjo-test/#/
  1. Now if we do a refresh, browser will try to load http://example.com/mojjo-test/#/ and shows an access denied

I am assuming that instead of redirecting to http://example.com/mojjo-test/#/, it should redirect to http://example.com/mojjo-test/index.html#/

Please provide suggestions on how to achieve it. I would like to keep the initial path to be https://example.com/mojjo-test/index.html#/ (with index.html)

Solution

I’d advice you commenting out href in ‘web/index.html’ (platform project automatically generated when adding Web). That’s how I did it:
https://github.com/maxim-saplin/flutter_web_spa_sample/blob/main/web/index.html

And here’s the example of this app working under virtual directory:
https://maxim-saplin.github.io/flutter_web_spa_sample/html/#/

Flutter Web somehow has these silly issues in scaffolding for the web project (href in index.html, wrong paths for service worker etc.) – discovered this while playing with GitHub pages.

Answered By – Maxim Saplin

Answer Checked By – Marie Seifert (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.