Flutter web app is returning blank page after being deployed to firebase hosting
1,200
I found the problem It was in index.html This part of code
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js?v=2330050811');
});
}
</script>
<script src="main.dart.js" type="application/javascript"></script>
should come at the end of body tag
Author by
Behruz Pulatov
Updated on December 22, 2022Comments
-
Behruz Pulatov over 1 year
I have successfully deployed my flutter web app to Firebase hosting. However when I visit link blank page Is returned Here is my firebase.json
{ "database": { "rules": "database.rules.json" }, "firestore": { "rules": "firestore.rules", "indexes": "firestore.indexes.json" }, "hosting": { "public": "build/web", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ] }, "storage": { "rules": "storage.rules" }, "emulators": { "auth": { "port": 9099 }, "functions": { "port": 5001 }, "firestore": { "port": 8080 }, "database": { "port": 9000 }, "hosting": { "port": 5000 }, "pubsub": { "port": 8085 }, "ui": { "enabled": true } }, "remoteconfig": { "template": "remoteconfig.template.json" } }
Here is my index.html
<!DOCTYPE html> <html> <head> <!-- If you are serving your web app in a path other than the root, change the href value below to reflect the base path you are serving from. The path provided below has to start and end with a slash "/" in order for it to work correctly. Fore more details: * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base --> <base href="/"> <meta charset="UTF-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="description" content="A new soicial network."> <!-- iOS meta tags & icons --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="lycread"> <link rel="apple-touch-icon" href="icons/Icon-192.png"> <!-- Favicon --> <link rel="icon" type="image/png" href="favicon.png" /> <title>LycRead Web</title> <link rel="manifest" href="manifest.json"> </head> <body> <!-- This script installs service_worker.js to provide PWA functionality to application. For more information, see: https://developers.google.com/web/fundamentals/primers/service-workers --> <script> if ('serviceWorker' in navigator) { window.addEventListener('flutter-first-frame', function () { navigator.serviceWorker.register('flutter_service_worker.js?v=2330050811'); }); } </script> <script src="main.dart.js" type="application/javascript"></script> <!-- The core Firebase JS SDK is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script> <!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#available-libraries --> <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-analytics.js"></script> <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-auth.js"></script> <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-firestore.js"></script> <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js"></script> <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-storage.js"></script> <script> // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional var firebaseConfig = { apiKey: "my config", authDomain: "my config", projectId: "my config", storageBucket: "my config", messagingSenderId: "my config", appId: "my config", measurementId: "my config" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); firebase.analytics(); </script> </body> </html>
Also when I open index.html with Chrome it also returns blank page. However when i run project with console everything is ok.
Here is my terminal output after deployment