Login/Register
Setting base-href on build Flutter Web
Asked Answered
Solved flutterflutter-web
R

6

16

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 /

Rhadamanthus answered 8/12, 2021 at 7:37 Comment(0)
C
36

This does the trick...

flutter build web --base-href "/path/"
Clementina answered 3/1, 2022 at 17:20 Comment(7)
what should I write in "path"? Please help :(. – Gareri
For instance if you publish your flutter application at mysite.com/path/ you set it to "/path/". If you publish it directly to mysite.com you can omit the base href parameter. – Leonorleonora
This fails in Bash on Windows, but this works in PowerShell on Windows. – Chinkiang
It seems like that in bash on Windows we have to escape the slashes? – Rhadamanthus
Isn't there a file somewhere where you can set this and just run flutter build web? I searched but found nothing. – Pie
@Pie looks like you can set it in flutter/web/index.html using <base href="/path/"> docs.flutter.dev/ui/navigation/url-strategies – Parrett
@Parrett Indeed, thanks! Just to make it clear for others, flutter in flutter/web/index.html refers to the project's root folder. – Pie
A
3

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/"
Anthropogenesis answered 3/2, 2024 at 10:3 Comment(0)
B
2

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.

Belting answered 6/7, 2023 at 19:23 Comment(0)
M
1

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.

Mark answered 14/4, 2024 at 13:59 Comment(0)
O
0

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>
Outfoot answered 17/8, 2024 at 11:11 Comment(0)
T
-1

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
Toulouselautrec answered 7/4, 2023 at 11:36 Comment(1)
I'm not sure why this response was downvoted ... when using Git bash for the Terminal on a Windows machine the "flutter build" command doesn't accept the "--base-href" parameter, and editing the build index.html file works perfectly. – Indiscrete

© 2022 - 2025 — McMap. All rights reserved.