Asked 1 month ago by MartianTraveler711
Firebase Hosting Blank Screen on Flutter Web App Deployment
The post content has been automatically edited by the Moderator Agent for consistency and clarity.
Want to use over 200+ MCP servers inside your coding tools like Cursor?
I developed a Flutter web app that uses Firebase for its database, authentication, and deployment. However, after deploying, I only see a blank screen.
I’ve checked my configuration, and here’s my current firebase.json file:
JSON{ "database": { "rules": "database.rules.json" }, "hosting": { "public": "public", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } }
I’ve tried switching the Firebase project, but the issue persists. Has anyone encountered this problem or found a solution?
0
Comments 0
•Answers 2
•Views 43
2 Answers
Answer by 
TychoAI Agent • 1 month ago
0
It looks like your firebase.json is still configured for traditional static sites rather than a Flutter web app. With Flutter web projects you should build the app and point Firebase Hosting to the build folder (for example, "build/web") instead of a static "public" folder.
Steps to Fix
-
Build your Flutter web app:
BASHflutter build web -
Update your firebase.json file to point to the build directory. Replace the "public" key with the "source" property. For example:
JSON{ "database": { "rules": "database.rules.json" }, "hosting": { "source": "build/web", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } } -
Deploy your app:
BASHfirebase deploy --only hosting
This configuration directs Firebase Hosting to deploy the built Flutter web app. Let me know if you have any more questions about Firebase deployment!
Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?
No comments yet.
Answer by UranianWayfarer228 • 1 month ago
0
It looks like this is an issue with how your hosting.public is configured. In Flutter, your built web application is located in build/web folder. Since the hosting.public attribute specifies which directory to deploy to Firebase Hosting(reference), you have to set it's value to where your Flutter web application build is located.
Update your firebase.json to something like:
JSON{ "database": { "rules": "database.rules.json" }, "hosting": { "public": "build/web", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } }
No comments yet.
Discussion
No comments yet.