Capacitor could not find the web assets directory

[muuvmuuv]

Description:

Trying to run on iOS on a blank project but getting the below error. From the docs as I understand it correctly I just need to run that command without any previous commands.

Steps to Reproduce:

❯ ionic start

Pick a framework! 😁

Please select the JavaScript framework to use for your new app. To bypass this prompt next time, supply a value for the
--type option.

? Framework: Angular

Every great app needs a name! 😍

Please enter the full name of your app. You can change this at any time. To bypass this prompt next time, supply name,
the first argument to ionic start.

? Project name: test

Let's pick the perfect starter template! 💪

Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass this
prompt next time, supply template, the second argument to ionic start.

? Starter template: blank
✔ Preparing directory ./test - done!
✔ Downloading and extracting blank starter - done!
? Integrate your new app with Capacitor to target native iOS and Android? Yes

Output:

❯ ionic capacitor run ios -l --verbose
  ionic:lib Terminal info: { ci: false, shell: '/bin/zsh', tty: true, windows: false } +0ms
  ionic:lib CLI global options: { _: [ 'capacitor', 'run', 'ios' ], help: null, h: null, verbose: true, quiet: null, interactive: true, color: true, confirm: null, json: null, l: true, project: null, '--': [] } +4ms
  ionic:lib:project Project type from config: @ionic/angular (angular) +0ms
  ionic:lib:project Project details: { configPath: '/Users/marvinheilemann/Downloads/test/ionic.config.json', errors: [], context: 'app', type: 'angular' } +0ms
  ionic Context: { binPath: '/Users/marvinheilemann/.nvm/versions/node/v12.18.0/lib/node_modules/@ionic/cli/bin/ionic', libPath: '/Users/marvinheilemann/.nvm/versions/node/v12.18.0/lib/node_modules/@ionic/cli', execPath: '/Users/marvinheilemann/Downloads/test', version: '6.11.0' } +0ms
> capacitor add ios
[error] Capacitor could not find the web assets directory "/Users/marvinheilemann/Downloads/test/www".
    Please create it and make sure it has an index.html file. You can change
    the path of this directory in capacitor.config.json (webDir option).
    You may need to compile the web assets for your app (typically 'npm run build').
    More info: https://capacitorjs.com/docs/basics/building-your-app
[ERROR] An error occurred while running subprocess capacitor.

        capacitor add ios exited with exit code 1.

        Re-running this command with the --verbose flag may provide more information.
  ionic:utils-process onBeforeExit handler: 'process.exit' received +0ms
  ionic:utils-process onBeforeExit handler: running 1 functions +1ms
  ionic:utils-process processExit: exiting (exit code: 1) +61ms

My ionic info:

Ionic:

   Ionic CLI                     : 6.11.0 (/Users/marvinheilemann/.nvm/versions/node/v12.18.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.1
   @angular-devkit/build-angular : 0.901.12
   @angular-devkit/schematics    : 9.1.12
   @angular/cli                  : 9.1.12
   @ionic/angular-toolkit        : 2.3.0

Capacitor:

   Capacitor CLI   : 2.4.0
   @capacitor/core : 2.4.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.18.0 (/Users/marvinheilemann/.nvm/versions/node/v12.18.0/bin/node)
   npm    : 6.14.7
   OS     : macOS Catalina

Other Information:

[imhoffd]

@muuvmuuv Can you link to the docs you're referencing?

The workaround is to do what it says:

You may need to compile the web assets for your app (typically 'npm run build').

But it's not the best user experience. It's certainly something I'd like to address for Capacitor 3.

[muuvmuuv]

@dwieeb https://ionicframework.com/docs/cli/commands/capacitor-run#option-livereload here it says "Spin up dev server to live-reload www files". I expect it build www before because otherwise it would not be able to live-reload it. But it really sounds like I need to run ionic build --watch together with run.

From what I would expect is that ionic capacitor run ios would by default include a live reload experience and build the www → copy files to iOS → spin up the server for watching file changes. Because what I noticed (and the reason why www was not available) is that if it wasn't build with ionic build for a while (because of serve), with ionic run it wont have the latest changes.

Another thing I noticed with that command is that after cancelling CTRL+C it says "Copying files to iOS" and then just hangs without exiting. So I need to cancel again. I think this step is not necessary.

[muuvmuuv]

I would love to hear how other developers test on a real device with run. Maybe I am missing some important experience with ionic here?

Typically, we do this:

1. ionic capacitor update ios
2. xcrun simctl boot \"iPhone 11 Pro\" || true (open a simulator, would be cool if ionic CLI has something like this build in)
3. ionic capacitor run ios -l --ssl --public-host domain.lcl --port 1717 --external --source-map

[bmk15897]

Simple "ionic build" worked for me!

[muuvmuuv]

Another thing that is pretty annoying which does not make any sense for me is that it modifies capacitor.config.json. This makes it hard to commit fixes or features fast.

[muuvmuuv]

@bmk15897 yes but after not running that for a while and ios run you wont have the latest changes everywhere and anyway this shouldn't be necessary IMO.

[thesurya9]

Simple "ionic build" worked for me!

Thanks <3

[imhoffd]

Please subscribe to ionic-team/capacitor#4028 and ionic-team/capacitor#4029. This will be addressed in Capacitor 3.

[Senjonnes]

Simple "ionic build" worked for me!

Thanks

[RouR]

@dwieeb Check this docs https://ionicframework.com/docs/developing/android#project-setup

npm run build was helpful

[kawazoe]

@dwieeb Those two issues are about build steps like sync and add platform though. With serve, we actually need the assets to make it to the device via ng serve. Is the content of webDir actually used when running ionic capacitor serve or does it only check for the folder's presence?

If it's just checked for presence, then those two issues will fix the problem, but if capacitor expects those files to be served statically, ionic capacitor serve will never work as expected. Those files should be live reloaded via ng serve and now, the fix becomes much more involved than removing a warning in some scenarios.

[preetamjakhmola]

Try with "ionic build"
it will create www folder then you can run any of the following command.
ionic cordova run
ionic cordova run android
ionic cordova run android -l --external
ionic cordova run ios --livereload --external
ionic cordova run ios --livereload-url=http://localhost:8100
+++++++++++++++ RUn Build, copy to Native plateform, open to IDE
ionic capacitor build
ionic capacitor build android
ionic capacitor build android --prod --release
ionic capacitor build ios
++++++++++++++ RUn IN plateform - Capacitor +++++++++=
ionic capacitor sync android
ionic capacitor run
ionic capacitor run android
ionic capacitor run android -l --external
ionic capacitor run ios --livereload --external
ionic capacitor run ios --livereload-url=http://localhost:8100
+++++++++++++++ RUn Build, copy to Native plateform, open to IDE
ionic capacitor build
ionic capacitor build android
ionic capacitor build android --prod --release
ionic capacitor build ios