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 https://github.com/ionic-team/capacitor/issues/4028 and https://github.com/ionic-team/capacitor/issues/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

[kawazoe]

@preetamjakhmola The whole point of ionic run is that you should not need a www folder. It isn't used by ng serve in a livereload environment.

[caegomezda]

Just use ionic cap sync, then, use ionic cap build, work´s for me!!!

[TxusBlack]

Just use ionic cap sync, then, use ionic cap build, work´s for me!!!

This worked for me too. Thanks!

[kawazoe]

Just use ionic cap sync, then, use ionic cap build, work´s for me!!!

This worked for me too. Thanks!

@caegomezda @TxusBlack The workaround have already been documented in the discussion. We know it works. It doesn't fix the core issue.

[preetamjakhmola]

anyone who have issue with admob free rewarded video ad I am facing this issue.when i click on the show ad button. please help.

java.lang.NoSuchMethodError: No static method getRewardedVideoAdInstance(Landroid/content/Context;)Lcom/google/android/gms/ads/reward/RewardedVideoAd; in class Lcom/google/android/gms/ads/MobileAds; or its super classes (declaration of 'com.google.android.gms.ads.MobileAds' appears

[ramizwebdev]

Just use ionic cap sync, then, use ionic cap build, work´s for me!!!

This works for me as well thanks 👍 💯

[preetamjakhmola]

please help @kawazoe .

[Branksy]

Perhaps check your capacitor.config.json - a trailing comma resulted in the above notice

[jashenco]

I had to change the webDir variable in the capacitor.config.ts. As I was using SSR with Angular Universal, the build ended up in 'dist/app/browser'.