Provide default index.html when webDir is not found

[imhoffd]

Most apps using Capacitor are using webpack (via Angular CLI, react-scripts, etc) or similar build system, which means the webDir directory is a generated asset, not typically committed to source control. Fresh checkouts that run sync end up with this error:

❯ npx cap sync
[error] Could not find the web assets directory: /Users/dan/git/capacitor-testapp/build.
        Please create it and make sure it has an index.html file. You can change the path of this directory in
        capacitor.config.ts (webDir option). You may need to compile the web assets for your app (typically npm run
        build).
        More info: https://capacitorjs.com/docs/v3/basics/workflow#sync-your-project

Additionally, the Angular CLI (and possibly others) remove the webDir folder by default when using ng serve. This is possible because webpack-dev-server serves assets from memory, not the filesystem.

We can improve the developer experience by providing a default index.html for Capacitor to use during sync, which would get copied into the native platform resources and shown in the device with instructions for building their app and re-running sync. When using livereload, the default index.html wouldn't be seen--it would load their app from the dev server.

[jcesarmobile]

I, as user, would find more annoying that sync works but when I run I get a default index.html rather than my app.

Since your use case is live reload, maybe would be better to not try to copy files if the server url is set?

[imhoffd]

Yeah, I think that will work. 👉 #4028

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.