Launching app code in a simulator like Xcode or Android Studio

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.

Here's a breakdown of the commands:

npm run build

This command is used to build your web app. It's typically associated with web development frameworks like Angular, React, or Vue. It compiles your web app source code into production-ready files.

npx cap sync

This command is part of Capacitor. It synchronizes the web app's built files with the native platform projects.

npx cap copy ios

This command is also part of Capacitor and is used to copy web app assets into the iOS project.

npx cap open ios

This command opens the Xcode project associated with the iOS platform. Xcode is the integrated development environment for iOS app development.  Here's how you can use these commands together to build and run your web app on an iOS device or simulator:

First, navigate to the root directory of your web app project.
Run npm run build to build your web app.
Next, run npx cap sync to synchronize the built web app with the native iOS project.
Then, run npx cap copy ios to copy web app assets to the iOS project.
Finally, run npx cap open ios to open the iOS project in Xcode.

Once Xcode is open, you can build and run your app on an iOS device or simulator by selecting a target and clicking the "Run" button in Xcode.

Make sure to have Capacitor properly configured in your project, and ensure that your web app code is prepared for integration with Capacitor. Additionally, if you haven't already set up an iOS development environment, you'll need Xcode installed on your macOS machine.

iOS

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

What about the slight differences for Android?

The first two commands noted above remain as is.  

npx cap copy android

This command is also part of Capacitor and is used to copy web app assets into the Android project.

npx cap open android

This command opens the Android project in Android Studio, which is the integrated development environment for Android app development.  Here's how you can use these commands together to build and run your web app on an Android device or emulator:

Navigate to the root directory of your web app project.
Run npm run build to build your web app.
Next, run npx cap sync to synchronize the built web app with the native Android project.
Run npx cap copy android to copy web app assets to the Android project.
Finally, run npx cap open android to open the Android project in Android Studio.

Once Android Studio is open, you can build and run your app on an Android device or emulator by selecting a target (device or emulator) and clicking the "Run" button in Android Studio.

Android

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

Chained commands

The noted commands above can be run more efficiently by chaining them.  For example, the command sequence npm run build && npx cap sync is a chained command sequence typically used in the context of Capacitor-based mobile app development.  When you chain these commands together using &&, they are executed in sequence. The second command (npx cap sync) is only executed if the first command (npm run build) completes successfully. This is a common approach in development workflows to automate building the web app and immediately syncing it with the native app project, ensuring that the native app stays up to date with the latest changes from the web app.

To use this chained command sequence, navigate to the root directory of your web app project and run the following command:

npm run build && npx cap sync

This will build your web app and then, if the build is successful, sync the built files with the Capacitor native platform projects. Make sure you have Capacitor properly configured in your project and that your web app code is prepared for integration with Capacitor.

All four commands chained:

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.