ionic-cli: Capacitor could not find the web assets directory

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:

About this issue

  • Original URL
  • State: open
  • Created 4 years ago
  • Comments: 21 (6 by maintainers)

Most upvoted comments

Simple “ionic build” worked for me!

@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.

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

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

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

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.

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

This worked for me too. Thanks!

@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.

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’.

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

@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.