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

Question

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="/">

Calvin Gonsalves · Accepted Answer · 2021-01-12 01:59:07Z

16

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

answered Jan 12, 2021 at 1:59

Calvin Gonsalves

2,08013 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

s15o Over a year ago

Awesome! Thanks.

Calvin Gonsalves Over a year ago

@SawThinkarNayHtoo np :)

user14089096 Over a year ago

Hey I hav a issue actually I started server on local host and then I am unable to exit my project from there know i am panicking I am afraid because of hackers and stealers I hav no idea in this area I unfortunately closed the terminal so I am unable to control + c and I don't know how many host are running and how please help me. Asap

Calvin Gonsalves Over a year ago

@Lucian closing the terminal stops the http server i guess. You can try solutions suggested in stackoverflow.com/questions/14790910/…

Jonas Cerqueira · Accepted Answer · 2021-07-05 20:35:48Z

6

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

answered Jul 5, 2021 at 20:35

Jonas Cerqueira

3803 silver badges9 bronze badges

1 Comment

Suat Özkaya Over a year ago

I had to use python3. \[flutter_project]\build\web> python3 -m http.server

LW001 · Accepted Answer · 2023-08-04 19:40:54Z

2

For me this worked:

Download Python from python.org and install it.
Open command prompt and type your build/web path like this: cd C:\Users\YourUSER\Documents\build\web
Type python -m http.server 8080 -> This is another port exclusively for your app.
Open Edge Browser and type: http://localhost:8080
Click on the icon button on top right (install yourApp to run on your own page) And thats it! You can create a shortcut on your desktop to run automatically!

edited Aug 4, 2023 at 19:40

LW001

3,0117 gold badges35 silver badges44 bronze badges

answered Jul 29, 2023 at 3:00

V. Rodrigues

211 bronze badge

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related