Skip to main content

Loading the code in a platform - in this article, I'll be focusing on Android and iOS.  Ionic app shell prompts for iOS and Android devices.

iOS

npm run build
npx cap sync
npx cap copy ios
npx cap open ios

 

Android

npm run build
npx cap sync
npx cap copy android
npx cap open android

 

Chained commands

iOS

npm run build && npx cap sync && npx cap copy ios && npx cap open ios

Android

npm run build && npx cap sync && npx cap copy android && npx cap open android

 

If doing both, best to separate them into two primary zones

Set up for either Android or iOS

npm run build && npx cap sync

Then add the corresponding platform

iOS

npx cap copy ios && npx cap open ios

Android

npx cap copy android && npx cap open android

 

Breaking down the steps

npm run build

This command will do custom work written inside package.json.  It lets you perform any necessary building/prep tasks for your project.

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
},

npx cap sync

This command runs npx cap copy and npx cap update.  This action will copy all the change to {platform}/app/src/main/assets/public, ensure the android and ios platform have the same conditions.

npx cap copy

This command copies what's in your webDir to the native platforms like Android and iOS.  If you have Cordova files they will also be copied.

npx cap update

Searches for Cordova and Capacitor plugins and copy/update some native files the plugins need for working.

So copy is for "web" files and update for "native" files and sync does both.

npx cap open iOS / android

Open's the project in the native software such as Xcode / Android Studio.

 

Related articles

Andrew Fletcher16 Aug 2022

How to handle a lost KeyStore password in Android?

If you have a situation where either you have forgotten a Keystore password or change of developers and the password wasn't sent across.... what to do?  However, your app lives on and needs to be updated!   Possible solutions grade.properties This is a great starting point....
Andrew Fletcher08 Aug 2022

How to update package.json dependencies to the latest version?

This article works through the steps to update dependencies in package.json file to the latest version. Use npm-check-updates or npm outdated to suggest the latest versions. npm-check-updates is a utility that automatically adjusts a package.json with the latest version of all...