Skip to main content

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.

Related articles

Andrew Fletcher02 Aug 2023
Android Studio error when running app through emulator
Only a month ago, running an app through the Android Studio emulator was running fine.  Now I'm warmly greeted byError Installation did not succeed. The application could not be installed: INSTALL_PARSE_FAILED_NO_CERTIFICATESThe complete error is Launching '{project}' on Pixel 5 API...
Andrew Fletcher22 Aug 2022
Android releasing app issues
Warning from Google Play Store when uploading an App You must complete the advertising ID declaration before you can release an app that targets Android 13 (API 33). We'll use this declaration to provide safeguards in Play Console to accommodate changes to advertising ID in Android 13. Apps...
Andrew Fletcher22 Aug 2022
Version code 1 has already been used. Try another version code
Uploading a new version of an Android app to Google Play and I'm seeing this error Version code 1 has already been used. Try another version code. There are three areas to observe: Version Code: {whole integer} Version Name: {String} Version Name Suffix: {Integer} Currently, my...