How to open compiled Flutter web index.html in browser locally?


Solution 1

you need to install node.js server from npm to run the website on.

npm install -g http-server

Change directory to /build/web and run the server on localhost with:

npx http-server

Solution 2

Adding to the topic, you can also use python to server it: Set up a local testing server

\[flutter_project]\build\web> python -m http.server


\[flutter_project]\build\web> python -m SimpleHTTPServer

Then go to localhost:8000

Saw Thinkar Nay Htoo
Author by

Saw Thinkar Nay Htoo

Previously worked at two startups. Currently just traveling and learning new things.

Updated on December 26, 2022


  • Saw Thinkar Nay Htoo
    Saw Thinkar Nay Htoo over 1 year

    Running flutter build web creates index.html file in /build/web/ along with

    assets                    icons                     manifest.json
    favicon.png               index.html                version.json
    flutter_service_worker.js main.dart.js

    The current flutter channel is beta.

    $ flutter channel

    Flutter channels:  
    * beta  

    flutter --version

    Flutter 1.25.0-8.1.pre • channel beta •
    Framework • revision 8f89f6505b (2 weeks ago) • 2020-12-15 15:07:52 -0800
    Engine • revision 92ae191c17
    Tools • Dart 2.12.0 (build 2.12.0-133.2.beta)

    When I try to open /build/web/index.html in the Chrome browser, it shows blank. Is it usual or do I need to install any node packages to make it run?

    Note: I followed this doc

    Does it have anything to do with this code in index.html which does not seem to be included in the earlier flutter versions?

        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.
        Fore more details:
      <base href="/">