"$ flutter build web" is throwing the error "Missing index.html"?

Question

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?

Bromic

see this https://mcmap.net/q/392436/-finished-with-error-failed-to-establish-connection-with-the-application-instance-in-chrome – Marianmariana

Answer 1

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

Grape

This worked! Thanks Alex. I don't think I understood the difference between "beta" and "master." But now I see. – Bromic

I think this works now without switching to channel beta. Just run flutter config --enable-web and then flutter create . – Renaissance

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? – Elroyels

Answer 2

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.

Scriber

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? – Elroyels

Answer 3

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.

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

Melessa

Thanks! Yes, so "master" doesn't have the web build option is what you're saying? – Bromic

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 – Melessa

Answer 4

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

Lyudmila

Answer 5

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)

Usa

Answer 6

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.

Zola