Issue

I’m trying to deploy a Flutter app to a GitHub page. The app works fine with flutter run -d chrome and builds fine using flutter build web --release

Push the code to your repository.
https://github.com/learyjk/superpacecalcweb

The deployment activity log shows that the deployment was successful. But when I click the View Deployment button, I get a blank page. Show Javascript Console:

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

I’ve tried adding /index.html to the end of the URL, but that doesn’t work.

Any ideas? I don’t know where to start because the error output is not very detailed…

Link to GitHub page:
https://learyjk.github.io/superpacecalcweb/

Thank you!

Solution

index.html has a tag. Change this to the base path of your github repository. In this case this is />. If you don't have it, you can add it inside the tag.

Basically the problem is that flutter isn't configuring the base tag correctly, so it doesn't take into account the base path of the deployment and the main.dart.js file is to try to find the way. This is a common problem when deploying flutter web apps or any of her web apps in case your hosting provider adds additional paths to your main domain.

You can find main.dart.js available from the following link.
https://learyjk.github.io/superpacecalcweb/main.dart.js

Note that while testing locally, you need to revert to href="/". Otherwise local deployment will not work. There is an open issue to make this configurable.

Answered By - Abhilash Chandran

Answer Checked By - Cary Denson (Easybugfix Admin)

Tags: flutter-web, github-pages, web-deployment