Flutter web base href subfolder

user_4818970 0
Viewed 8122

I am trying to deploy to IIS. Not in root but in a sub-folder. This is working:

  • edit web/index.html, change <base href="/"> to <base href="/ChangeTag/">
  • run flutter build web command
  • the build/web/index.html is ok, with the new changes.

Perfect!

BUT, when I try to debug using localhost: web pages does not found - error 404

What I want is to deploy (automatically), inside a sub-folder of wwwroot and execute local test too, without modifying index.html a lot of times

Is it possible to do something like in Angular, use proxies, use different build configs, etc?

Thanks

flutter base href iis
3 Answers

I've got a similar problem after upgrading flutter and dart to current version (beta channel), I mean it was good on debugging mode and It did not working on build release. What I did? I just commented this <base href="/"> line at index.html file (located inside the <your_app_folder_name>/web folder) and both (debugging and release builds) went back to working like charm.

I did comment by changing the line

<base href="/">

to

<!-- <base href="/"> -->

Do the change and: try to run a flutter build web command, copy the generated web folder located at <your_app_folder_name>/build/ path to any subfolder (such as <your_websrv_root>/webtestfolder) of the your webserver, and it will work at the address http://webtestfolder of your browser.

user_33529100

The answer is in the index.html file on the web folder (not /build/web)

<!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="/sub-folder/">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
user_121091620

Stop manually updating base-href

It is annoying to update build/web/index.html every time after build. This can be done by command flag shown below:

Instead of using

flutter build web

Try

flutter build web --base-href /sub_folder_name/

This will change the base URL of your build/web/index.html

Bounus

Or if you are using github actions to deploy on github-pages. This will create a subfolder name, same as your repository name (username.github.io/{repo-name})

- run: flutter build web --base-href /${{ github.event.repository.name }}/

Note Just make sure that your web/index.html contains

<base href="$FLUTTER_BASE_HREF">
user_120781090
Related