CODEWITHSUNDEEP
htmlgithub-pagesflutter-web
Tarik Hacialiogullari
Tarik Hacialiogullari

Reputation: 191

Flutter App to Web through Github pages blank screen

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

Upvotes: 4

Views: 2568

Answers (3)

Ziyauddin Shaik
Ziyauddin Shaik

Reputation: 1

After completing your Flutter project, follow these steps to deploy it on GitHub Pages:

1. Check for the Web Folder: Ensure that your project contains a web folder. If it's not there, create one using the command:

flutter create .

This command initializes a Flutter web project in the current directory, creating the necessary files and folders.

2. Update the Base URL: Inside the web folder, locate the index.html file. In this file, locate the tag within the section. Replace the href attribute with the URL of your GitHub repository. This is the URL where your Flutter project will be hosted.

    <base href="https://username.github.io/" />

3. Build the Project: Run the following command to build the Flutter web project:

flutter build web

This command generates the necessary files for the web deployment.

4. Upload to GitHub: Upload the generated build files to your GitHub repository. You can do this by committing and pushing the contents of the build/web folder to your repository.

Upvotes: -1

Ajay
Ajay

Reputation: 16300

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/

Upvotes: 3

Tarik Hacialiogullari
Tarik Hacialiogullari

Reputation: 191

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.

Upvotes: 3

Related Questions