CODEWITHSUNDEEP
flutterflutter-web
Seiko Santana
Seiko Santana

Reputation: 333

Setting base-href on build Flutter Web

how do i set the base href on build? I tried

--base-href /path/
--base-href=/path/
--base-href="/path/"
--base-href='/path/'

and none works

it keeps telling me base-href should start and end with /

Upvotes: 16

Views: 17119

Answers (6)

kadir yapar
kadir yapar

Reputation: 67

I deleted <base href="/mypath/"> tag and it worked.

My index.html file looks like this:

<!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`.
  -->
  <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="Your App Name">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

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

  <title>Your App Name</title>
  <link rel="manifest" href="manifest.json">

  <script>
    // The value below is injected by flutter build, do not touch.
    const serviceWorkerVersion = "{{flutter_service_worker_version}}";
  </script>
  <!-- This script adds the flutter initialization JS code -->
  <script src="flutter.js" defer></script>
</head>

<body>
  <script src="flutter_bootstrap.js" async></script>
</body>

</html>

Upvotes: 0

Rohinton Collins
Rohinton Collins

Reputation: 76

Having looked at this for a while ... your project's web/index.html has the following entry:

  <base href="$FLUTTER_BASE_HREF">

I couldn't find where this is defined but is being replaced with "/" during the build.

You can inject the variable from the command line using:

  flutter build web --base-href /mypath/
or
  flutter build web --base-href "/mypath/"

But you cannot do this via launch.json with one of

  "--base-href /mypath/"
  "--base-href=/mypath/"
  "--dart-define=FLUTTER_BASE_HREF=/mypath/",

But it seems to me that you own web/index.html, so just edit it directly

  <base href="/mypath/">

or remove the line altogether and be done with it. If you require the base tag and are deploying to different paths, then you will need to parameterise and inject via the command line.

Upvotes: 1

Vladimir Koltunov
Vladimir Koltunov

Reputation: 668

If you use Windows MSYS (git bash, mingw, etc) you should use env MSYS_NO_PATHCONV=1:

$ MSYS_NO_PATHCONV=1 flutter build web --release \
    --base-href="/openapi_generator_flutter/"

Upvotes: 4

Yuriy N.
Yuriy N.

Reputation: 6127

Today I deployed a web build to my hosting.

Let's say https://example.com/myapp/web/ but unfortunately, nothing was working. When I opened DevTools in Chrome I saw that browser trying to reach https://example.com/flutter.js and some other files at site root. I did not understand what is going on until I saw

<base href="/">

After I removed the base tag everything worked fine.

Morality: just remove it.

Upvotes: 2

Firas Abd Alrahman
Firas Abd Alrahman

Reputation: 197

If you are using git bash shell, you can automate it:

Example:

flutter build web
path="/webtest/"
sed -i "s|<base href=\".*\">|<base href=\"$path\">|g" build/web/index.html

Upvotes: -1

Bj&#246;rn
Bj&#246;rn

Reputation: 441

This does the trick...

flutter build web --base-href "/path/"

Upvotes: 37

Related Questions