37

When I run: 

$ flutter build web

I'm getting the error 

Missing index.html.

The flutter app is displaying in the browser, but in VS Code it reads "No Device." How can I debug, or fix this problem?

Christopher Castiglione
  • 995
  • 1
  • 9
  • 12

6 Answers6

62

It would help to see the output of your flutter doctor, but I am guessing that your project is not configured for web.

If you haven't already, you need to switch to the flutter beta channel like so:

$ flutter channel beta
$ flutter upgrade
$ flutter config --enable-web

At this point, running flutter doctor should show that chrome is available.

Then, switch into your application root directory, and run

$ flutter create .

This will rebuild the project to support web.

Then, from the same directory, you can run flutter build web

Alex Collette
  • 1,664
  • 13
  • 26
  • This worked! Thanks Alex. I don't think I understood the difference between "beta" and "master." But now I see. – Christopher Castiglione Jun 11 '20 at 14:06
  • I think this works now without switching to channel beta. Just run flutter config --enable-web and then flutter create . – Hinton Sep 27 '22 at 09:13
  • Though flutter had built the web version, clicking index.html in the build/web didn't show anything like what it was run without debugging but a blank page. Why is that? – xemexpress Nov 26 '22 at 14:59
24

I had this problem. I could run web app in debug mode but I couldn't create web app.

Run this line in terminal to solve problem:

 flutter create .

This will add web app to your project.

Reza Mojed
  • 657
  • 1
  • 7
  • 16
  • Though flutter had built the web version, clicking index.html in the `build/web` didn't show anything like what it was run without debugging but a blank page. Why is that? – xemexpress Nov 26 '22 at 14:58
10

It happens if you have already created flutter project before you switched to flutter channel beta.

By using flutter channel beta to create a new flutter project, you will have a web folder.

enter image description here

You can see on the above image, the Left one, Flutter_Web, was created using stable channel.

On the other side, Web2 was just created by using the beta channel.

So for your case, I suggest following steps :

  • switch to Flutter Beta Channel here for details

  • create new Flutter project using :

flutter create
  • try to run
flutter run -d chrome
  • replace your previous project lib folder to this new web project
ejabu
  • 2,998
  • 23
  • 31
  • Thanks! Yes, so "master" doesn't have the web build option is what you're saying? – Christopher Castiglione Jun 11 '20 at 14:07
  • sure it has, but google itself suggests us to have more stable version, which in case of Web, it will be beta channel. I read somewhere, master is for development, alpha is for close-third-party review / internal-customer review, whereas beta for public review. Lastly, it will be integrated to stable, after all parties satisfied – ejabu Jun 13 '20 at 10:00
3

I had to create a web/index.html directory at the root of my application. After running flutter build web the build folder was populated with the compiled web files.

Below is my Flutter config. I'm using a flutter version manager btw

mobile_web_sample % fvm flutter --version
Flutter 2.1.0-13.0.pre.439 • channel master • https://github.com/flutter/flutter.git
Framework • revision d226d43912 (7 hours ago) • 2021-04-03 02:54:02 -0400
Engine • revision a0b52ae6bf
Tools • Dart 2.13.0 (build 2.13.0-194.0.dev)
Kobby Fletcher
  • 384
  • 5
  • 8
1

To add web support to an existing project created using a previous version of Flutter, run the following commands from your project’s top-level directory:

flutter create --platforms web .

flutter clean

flutter pub get 

flutter build web

good luck

Mouhcine MIMYA
  • 627
  • 6
  • 8
0

On the new project creation screen with android studio, you need to tick the web box with ios android in the devices option.

If you do not check this box, the web folder will not appear under the lib folder.

Halim Kaya
  • 21
  • 2