Getting 404 while hosting flutter web project on GitHub pages
When you’re using the default github.io domain to host your Flutter application project on GitHub Pages you might get a 404 error if you’ve not configured the base tag in index.html of the Flutter application project.
Here is an example to demonstrate this issue:
- My project lives in this repo: https://github.com/piedcipher/flutter-cng.
- It’s hosted on this URL: piedcipher.github.io/flutter-cng/.
- As you can see flutter-cng is added at the end of the URL. If you’ve not edited the base tag in index.html, it would look like this:
To solve this issue you can edit it by adding the name of the repo: (If you’re not a fan of adding trailing backslash then write /flutter-cng 😛)
You can either edit the base tag in lib/web/index.html or lib/build/web/index.html. But it’s better to do it in lib/web/index.html so that you don’t have to edit the base after every flutter build web.
In lib/web/index.html, there is an HTML comment that mentions the usage of base tag:
When I faced this same issue, I luckily found an answer on StackOverflow after searching for so long 😌, which suggests the same solution:
That’s it for this one. Thank you for reading this 💙
If you find this byte-sized post useful, press the clap’s👏 button as many times as you can and share this post with others. You can leave your feedback/suggestions in the comments 💬 below.
For any other issues feel free to reach out to me via Twitter: https://twitter.com/piedcipher
