Ionic - Capacitor config​

Initialise your Capacitor config​

To initialise Capacitor use the CLI questionnaire:

npx cap init

On executing the above command, you will be prompted to answer a few questions for your app such as your app's name and the package ID.

[?] What is the name of your app?
    This should be a human-friendly app name, like what you'd see in the App
    Store.
✔ Name … {App name}
[?] What should be the Package ID for your app?
    Package IDs (aka Bundle ID in iOS and Application ID in Android) are unique
    identifiers for apps. They must be in reverse domain name notation,
    generally representing a domain name that you or your company owns.
✔ Package ID … {packageID}
[?] Cordova preferences can be automatically ported to capacitor.config.json.
    Keep in mind: Not all values can be automatically migrated from config.xml.
    There may be more work to do.
    More info:
    https://capacitorjs.com/docs/cordova/migrating-from-cordova-to-capacitor
✔ Migrate Cordova preferences from config.xml? … yes
⠙ Creating capacitor.config.json in /Users/andrewfletcher/Apps/{project}/SA✔ Creating capacitor.config.json in /Users/andrewfletcher/Apps/{project}/SAFS in 3.20ms
[success] capacitor.config.json created!

Next steps:
https://capacitorjs.com/docs/getting-started#where-to-go-next

Create your Android and iOS projects​

Install the Android and iOS platforms:

npm i @capacitor/android @capacitor/ios

With your package.json file having had the platforms added, create your Android and iOS projects by executing the following commands:

npx cap add android
npx cap add ios

Android

On success of running the nix cap add android command, will look like

✔ Adding native android project in android in 43.76ms
✔ add in 44.35ms
✔ Copying web assets from www to android/app/src/main/assets/public in 2.27s
✔ Creating capacitor.config.json in android/app/src/main/assets in 723.54μs
⠧ copy android [info] Found 7 Cordova plugins for android:
       cordova-plugin-advanced-http@3.3.1
       cordova-plugin-android-permissions@1.1.3
       cordova-plugin-device@2.1.0
       cordova-plugin-file@7.0.0
       cordova-plugin-file-opener2@3.0.5
       cordova-plugin-statusbar@3.0.0
       cordova-sqlite-storage@6.0.0
✔ copy android in 2.44s
✔ Updating Android plugins in 18.63ms
[info] Found 4 Capacitor plugins for android:
       @capacitor/camera@1.3.1
       @capacitor/filesystem@1.1.0
       @capacitor/haptics@1.1.4
       @capacitor/splash-screen@1.2.2
⠹ update android [info] Found 7 Cordova plugins for android:
       cordova-plugin-advanced-http@3.3.1
       cordova-plugin-android-permissions@1.1.3
       cordova-plugin-device@2.1.0
       cordova-plugin-file@7.0.0
       cordova-plugin-file-opener2@3.0.5
       cordova-plugin-statusbar@3.0.0
       cordova-sqlite-storage@6.0.0
[info] Found 3 incompatible Cordova plugins for android, skipped install:
       cordova-plugin-ionic-keyboard@2.2.0
       cordova-plugin-ionic-webview@5.0.0
       cordova-plugin-splashscreen@6.0.1
✔ update android in 163.40ms
✔ Syncing Gradle in 11.00s
[success] android platform added!
Follow the Developer Workflow guide to get building:
https://capacitorjs.com/docs/basics/workflow

Of course the plugins added will be dependant on your project.

Copy the resource files to their respective environments

Generate icons & splash screen in a top-level resources folder within your project, like so:

resources/
   ├── icon.png
   └── splash.png

Run the following command:

cordova-res ios --skip-config --copy
cordova-res android --skip-config --copy

Or without specifying the platform:

cordova-res --skip-config --copy

Errors and warnings

Some warnings and errors you can come across as you execute these commands can be

[warn] sync could not run--missing www directory.

The full block response is similar to

❯ npx cap add android
✔ Adding native android project in android in 45.89ms
✔ add in 46.48ms
[warn] sync could not run--missing www directory.
[success] android platform added!
Follow the Developer Workflow guide to get building:
https://capacitorjs.com/docs/basics/workflow

While the directory Android has been added (same if you ran the iOS command), it will be missing structure.  To add the structure run the command

npm run build && npx cap sync

Now your app is ready for your next steps.