Question 43799 in Html Question posted in
Some basic documentation can be found here.

How exactly do you configure the base href for flutter web +github pages? [blank page issue] – Html

Ok, so my first web app, heres the step to do it,
created a flutter project,
it already contained a web folder, first ran the project in chrome debug, worked fine,
next uploaded to github just the project folder web and not the whole project. did the necessary steps to get the flutter page. now when i run it, it gives me blank page on github where as its fine in local machine.

my questions are

  1. do i need to upload the whole project or uploading just the web folder is fine?
  2. i am told to edit base href but unsure where exactly and how do i edit it ?

this is the 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.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="$FLUTTER_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="air_duty_roster">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>air_duty_roster</title>
  <link rel="manifest" href="manifest.json">

  <script>
    // The value below is injected by flutter build, do not touch.
    var serviceWorkerVersion = null;
  </script>
  <!-- This script adds the flutter initialization JS code -->
  <script src="flutter.js" defer></script>
</head>
<body>
  <script>
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
        onEntrypointLoaded: function(engineInitializer) {
          engineInitializer.initializeEngine().then(function(appRunner) {
            appRunner.runApp();
          });
        }
      });
    });
  </script>
</body>
</html>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    The working solution so far

    1. create a repo with this extension username/project_name.github.io
    2. run the command flutter build web
    3. upload the files under build/web to github project
    4. go to the file index.html and completely remove <base href="$FLUTTER_BASE_HREF">
    5. wait for a few minutes
    6. Done

  2. 0

    Build the application before deploying.

    flutter build web

    See Building the app for release

    Login or Signup to reply.
  3. 0

    Try to build using comand:

    flutter build web --base-href='/roster/'

    Sometimes github pages are not lightning fast. You need to wait some time for the changes to take effect after your deploy.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search