404 Failed to load resource Deploying Flutter Web App to GitHub Pages

Asked 12/1, 2021 at 17:54 Answered 27/2, 2023 at 18:8

Solved web-deployment github-pages flutter-web

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

I push the code to my repository: https://github.com/learyjk/superpacecalcweb

Deployment Activity Log shows successful deployment. But when I click the "View Deployment" button I just get a blank page. Javascript console says:

Failed to load resource: server responded with status of 404 () https://learyjk.github.io/main.dart.js

I have tried to append /index.html to the end of the URL as well but no luck.

Any ideas? The error output is not very verbose, so I don't quite know where to start...

GitHub pages link: https://learyjk.github.io/superpacecalcweb/

Thank you!

Nitrous answered 12/1, 2021 at 17:54 Comment(0)

There is <base href=''/> tag in your index.html. Change it to the base path of your github repo. In this case this would be <base href="/superpacecalcweb/"/>. If you don't have it you can add it inside the <head> tag.

Basically the problem is flutter tries to locate main.dart.js file without considering the base path of your deployment as you haven't configured the base tag with correct path. This is common issue while deploying flutter web app or any web app for the sake if the hosting provider adds an additional path to main domain.

You can see that the main.dart.js is available through the following link. https://learyjk.github.io/superpacecalcweb/main.dart.js

Please do note that while testing locally you will still have to set it back to href="/". Otherwise the local deployment won't work. There is an open issue to make this configurable.

Diversify answered 12/1, 2021 at 20:51 Comment(6)

You, Sir, deserve a raise. Thanks! Worked like a charm. – Nitrous 12/1, 2021 at 21:27

Note that you can change the base path in the source, i.e. in web/index.html, or in the build output, i.e. in build/web/index.html. If you change it in the source, it will be in the build output too. Both flutter build web and flutter run respect the source base path. – Eidson 15/4, 2021 at 14:20

This is the so far the best answer... Kudos. 😉 – Koblenz 6/5, 2021 at 14:20

this worked for me. for deployment to wamp server, I simply changed the path to <base href="./">. Initially the value was <base href="/">and the server was looking for resources in the root folder. Using chrome dev tools helped troubleshoot this. – Azoic 17/6, 2021 at 7:17

Hi, I am facing the same issue I am using firebase hosting But I have more then one page routing how I can resolve this. I am using velocity_x: ^3.3.0 for routing because this plugin using flutter 2.0 navigation – Northrup 8/12, 2021 at 11:50

That save my day – Devinna 10/12, 2021 at 18:20

How to automate the proposed solution

When building the project use:
flutter build web --release --base-href="/yourGithubRepoName/"
It will do all the required subsitutions for you.

In this case the command would be:
flutter build web --release --base-href="/superpacecalcweb/"

Exact answered 30/9, 2021 at 10:12 Comment(1)

This is how I have my GitHub Actions configured. Works great. Worth calling attention to what you noted that it needs to be the repository name, not the Flutter module name. Though sometimes those are the same, In my case that meant changing from the snake case /my_base_href/ to the kebab case /my-base-href/ – Satirical 23/2, 2023 at 3:43

I tried the base file path and it failed, mine seems to have been a bug case by the .js file. Not sure how it happened but my index file had flutter.js instead of main.dart.js in the html file. When i changed this my sited.

Selfreliant answered 27/2, 2023 at 18:8 Comment(0)

How to automate the proposed solution

Recommended topics

Hot tags