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

2,424

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

or

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

Then go to localhost:8000

Share:
2,424
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

Comments

  • 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:  
      master  
      dev  
    * beta  
      stable
    

    flutter --version

    Flutter 1.25.0-8.1.pre • channel beta • https://github.com/flutter/flutter.git
    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 https://flutter.dev/docs/get-started/web.

    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:
        * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
      -->
      <base href="/">