Flutter App to Web through Github pages blank screen

Question

I have a page generated by Flutter-Web shops and it is a blank page. And I have an error in the console. This happened after uploading the build web of Flutter into GitHub Pages.

Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('https://adamtechnologynl.github.io/') with script ('https://adamtechnologynl.github.io
/flutter_service_worker.js?v=2470069411'): A bad HTTP response code (404) was received when fetching the script.
manifest.json:1 Failed to load resource: the server responded with a status of 404 ()
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
manifest.json:1 Failed to load resource: the server responded with a status of 404 ()
(index):88 Failed to load app from service worker. Falling back to plain <script> tag.
(anonymous) @ (index):88
(index):47 GET https://adamtechnologynl.github.io/main.dart.js net::ERR_ABORTED 404
loadMainDartJs @ (index):47
(anonymous) @ (index):91

Answer 1

I found the solution. This happens when you have put it another directory instead of the root of the GitHub.

So my code is in "https://username.github.io/demo/book-king/belasting-web-v1/" so that last part we should append everything after "https://username.github.io/" also in the index.html. You can solve it by modifying the line (number 17 by me):

Change:

<base href="/">

into:

<base href="/demo/book-king/belasting-web-v1/">

And then you are done.

Answer 2

This solution works. But for me, line no 17 was not <base href="/">.

It was like this <base href="$FLUTTER_BASE_HREF">. Given that FLUTTER_BASE_HREF is a variable, it can be modified.

How?: Provide --base-href argument to flutter build like below

HostingURL : https://<github_user_name>.github.io/project_aj/demo/gh-pages/

Apart from the https://<github_user_name>.github.io should go as the value for --base-href

flutter build web --base-href=/project_aj/demo/gh-pages/