Background
- I am using Android Studio to create a Flutter web app.
- The app runs successfully on localhost in Google Chrome.
- When I deploy it to Firebase hosting, a "Firebase Hosting Setup Complete" page is displayed instead of the app.
What I've Tried There are several Stack Overflow posts which have not resolved this issue. These include:
- Creating a firebase.json file in the root directory of the project.
- Waiting a while for the hosting to go live
- Ensuring that we use
build/webwhen running the firebase init command - Open the hosting URL in InCognito mode
- Ensuring we do not overwrite index.html when running firebase init
- Ensuring the correct scripts are pasted into the index.html file
Steps Followed
- In Android Studio, create a new Flutter app.
- I use the package name
au.com.mydomain(wheremydomainis a domain name I own). - I note that there is no Web folder in the project file structure.
- I open a Terminal window and navigate to the root folder of the app.
- I run the command
flutter create web. - The command results in "All done!" and "In order to run your application, type
cd webandflutter run". - I execute the commands
cd webandflutter run. The app runs successfully on localhost in Google Chrome. - I return to Android Studio and note that there is still no Web folder in the project file structure.
- I use my web browser to navigate to Firebase and create a new project which I call
demo159752. - I disable Google Analytics for this project.
- The project is created successfully.
- Within the demo159752 project in Firebase I add a Web app.
- I use
demoas the app nickname. - I do not check the box to 'Also set up Firebase Hosting...'.
- I click the Register App button.
- I read the instruction which states that I should "Copy and paste these scripts into the bottom of your tag, but before you use any Firebase services"
- I return to Android Studio to do so and note that a
webfolder is now visible within the file structure in Android Studio. - I open this
webfolder. It does not contain an index.html file but does contain a subfolder also calledweb. - I open the
websubfolder and find it contains an index.html file. - I open the index.html file and navigate to
</body>. I paste the code from firebase just above</body>. - I return to Firebase in my web browser and click Continue to Console.
- From the Firebase console I click Hosting.
- I click Get Started and am promoted to run
npm install -g firebase-toolsto install the Firebase CLI. It is already installed on my machine but I run this command from the Terminal anyway. This results in the statement "updated 1 package". - I return to Firebase in my web browser. I do not click the option called "Also show me the steps to add the Firebase JavaScript SDK to my web app" and continue to step 2.
- I am instructed to run the command
firebase loginwhich I do. This results in the statement: "Already logged in asemailAddress" (whereemailAddressis my email address). - I return to the browser and am instructed to run the command
firebase init, which I do. I then navigate to the Hosting option, select it by pressing space on my keyboard, and then hit enter. - I am asked which firebase project to use and I select
demo159752. - I use the following options:
- What do you want to use as your public directory?
build/web. - Configure as a single-page app?
Y. - Set up automatic builds and deploys with GitHub?
N. - I note the statement:
✔ Wrote build/web/index.html - I note the statement:
i Writing configuration info to firebase.json... - I note the statement:
i Writing project information to .firebaserc... - I note the statement:
✔ Firebase initialization complete! - I return to Firebase in my web browser and click Next to continue to Step 3.
- I am instructed to run the command
firebase deploy. - I return to the Terminal window and run this command.
- I note the statement:
✔ Deploy complete! and am gien a hosting URL. - I navigate to the hosting URL and expect to see my app. However, I only see a page that says "Firebase Hosting Setup Complete".
- I return to Android Studio and check to see if the
firebase.jsonfile has been created as expected. However, it has not. - I attempt to resolve this by manually creating a
firebase.jsonfile. To do so, I create a new file in the root directory calledfirebase.jsonand use the following code:
{ "hosting": { "public": "build/web", "ignore": [ "firebase.json", "/.*", "/node_modules/**" ] } }
- I return to Terminal and navigate to the root directory for the project, then into the web subfolder, and then run
flutter build web --release. - I then run
firebase deploy. - The app is still not deployed and the Firebase Hosting Setup Complete page remains.
Question Why is my app not deploying successfully? What am I doing wrong and what do I need to do to deploy it successfully?
Other details Flutter version:
Flutter 2.1.0-12.1.pre • channel dev • https://github.com/flutter/flutter.git
Framework • revision 8264cb3e8a (5 weeks ago) • 2021-03-10 12:37:57 -0800
Engine • revision 711ab3fda0
Tools • Dart 2.13.0 (build 2.13.0-116.0.dev)
Flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel dev, 2.1.0-12.1.pre, on Mac OS X 10.15.7 19H524 darwin-x64,
locale en-AU)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/macos#android-setup for
more details.
[!] Xcode - develop for iOS and macOS
✗ Xcode 11.4.1 out of date (12.0.1 is recommended).
Download the latest version or update via the Mac App Store.
! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
CocoaPods is used to retrieve the iOS and macOS platform side's plugin
code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To upgrade see
https://guides.cocoapods.org/using/getting-started.html#installation for
instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] Connected device (1 available)
! Doctor found issues in 2 categories.
index.html file
<!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.
For 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 Flutter project.">
<!-- 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="web">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<title>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>
var serviceWorkerVersion = null;
var scriptLoaded = false;
function loadMainDartJs() {
if (scriptLoaded) {
return;
}
scriptLoaded = true;
var scriptTag = document.createElement('script');
scriptTag.src = 'main.dart.js';
scriptTag.type = 'application/javascript';
document.body.append(scriptTag);
}
if ('serviceWorker' in navigator) {
// Service workers are supported. Use them.
window.addEventListener('load', function () {
// Wait for registration to finish before dropping the <script> tag.
// Otherwise, the browser will load the script multiple times,
// potentially different versions.
var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
navigator.serviceWorker.register(serviceWorkerUrl)
.then((reg) => {
function waitForActivation(serviceWorker) {
serviceWorker.addEventListener('statechange', () => {
if (serviceWorker.state == 'activated') {
console.log('Installed new service worker.');
loadMainDartJs();
}
});
}
if (!reg.active && (reg.installing || reg.waiting)) {
// No active web worker and we have installed or are installing
// one for the first time. Simply wait for it to activate.
waitForActivation(reg.installing ?? reg.waiting);
} else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
// When the app updates the serviceWorkerVersion changes, so we
// need to ask the service worker to update.
console.log('New service worker available.');
reg.update();
waitForActivation(reg.installing);
} else {
// Existing service worker is still good.
console.log('Loading app from service worker.');
loadMainDartJs();
}
});
// If service worker doesn't succeed in a reasonable amount of time,
// fallback to plaint <script> tag.
setTimeout(() => {
if (!scriptLoaded) {
console.warn(
'Failed to load app from service worker. Falling back to plain <script> tag.',
);
loadMainDartJs();
}
}, 4000);
});
} else {
// Service workers not supported. Just drop the <script> tag.
loadMainDartJs();
}
</script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.3.3/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>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyCsPqvAN2gvlyCv3J7H1lTscXxB0T5itDE",
authDomain: "demo159752.firebaseapp.com",
projectId: "demo159752",
storageBucket: "demo159752.appspot.com",
messagingSenderId: "222592650517",
appId: "1:222592650517:web:ff8984d70b66dfc1fa2d1c"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</body>
</html>
firebase.json file
{
"hosting": {
"public": "build/web",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}