Flutter web app is missing firebase.json and shows "Welcome Firebase Hosting Setup Complete" when deployed to firebase hosting

firebase flutter flutter-web firebase-hosting

2,622

Solution 1

I used this article to help me solve the issue, and I've outlined the steps below:

There is a build/web folder, and also a web folder in the flutter project root directory. Run firebase init and choose build/web when it asks for the home directory. (Not the web folder in the project's root directory)

Then run flutter build web, and the web-page files in build/web will be modified.

Then run firebase deploy --only hosting, and the webpage should show after a few minutes.

For me, it took a few hours to show for the first time, but from the 2nd time onwards, the changes I made to the website showed up in less than a minute.

Solution 2

I had the same problem, I decided to wait, after 15 minutes my website appeared. try again and wait a little longer.

2,622

Author by

Benoît Cerise

Updated on December 29, 2022

Comments

Benoît Cerise over 1 year

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:

Steps Followed

In Android Studio, create a new Flutter app.
I use the package name au.com.mydomain (where mydomain is 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 web and flutter run".
I execute the commands cd web and flutter 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 demo as 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 web folder is now visible within the file structure in Android Studio.
I open this web folder. It does not contain an index.html file but does contain a subfolder also called web.
I open the web subfolder 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-tools to 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 login which I do. This results in the statement: "Already logged in as emailAddress" (where emailAddress is 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.json file has been created as expected. However, it has not.
I attempt to resolve this by manually creating a firebase.json file. To do so, I create a new file in the root directory called firebase.json and 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"
      }
    ]
  }
}