iOS Development

Contents

This guide covers how to deploy Ionic apps to iOS simulators and devices using Capacitor or Cordova.

There are two workflows for running Ionic apps on iOS: Running with Xcode and Running with the Ionic CLI. The Xcode approach is generally more stable, but the Ionic CLI approach offers live-reload functionality.

Project Setup

Before apps can be deployed to iOS simulators and devices, the native project must be configured.

  1. Generate the native project, if it does not already exist.

    For Capacitor, run the following:

     $ ionic capacitor add ios

    For Cordova, run the following:

     $ ionic cordova prepare ios
  2. Set the Package ID.

    For Capacitor, open the capacitor.config.json file and modify the appId property.

    For Cordova, open the config.xml file and modify the id attribute of the root element, <widget>. See the Cordova documentation for more information.

  3. Open the project in Xcode.

    For Capacitor, run the following to open the app in Xcode:

     $ ionic capacitor open ios

    For Cordova, open Xcode. Use File » Open and locate the app. Open the app's platforms/ios directory.

  4. In Project navigator, select the project root to open the project editor. Under the Identity section, verify that the Package ID that was set matches the Bundle Identifier.

    Xcode Identity Setup

  5. In the same project editor, under the Signing section, ensure Automatically manage signing is enabled. Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing.

    Xcode Signing Setup

Running with Xcode

In this workflow, Xcode can automatically fix common compilation and signing issues that can occur.

  1. Develop the Ionic app and sync it to the native project.

    With each meaningful change, Ionic apps must be built into web assets before the change can appear on iOS simulators and devices. The web assets then must be copied into the native project. Luckily, this process is made easy with a single Ionic CLI command.

    For Capacitor, run the following:

     $ ionic capacitor copy ios

    For Cordova, run the following:

     $ ionic cordova prepare ios
  2. In Xcode, select a target simulator or device and click the play button.

    Xcode Play Button Area

Running with the Ionic CLI

The Ionic CLI can build, copy, and deploy Ionic apps to iOS simulators and devices with a single command. It can also spin up a development server, like the one used in ionic serve, to provide live-reload functionality.

For Cordova, run the following to start a long-running CLI process that boots up a live-reload server:

$ ionic cordova run ios -l

Now, when changes are made to the app's source files, web assets are rebuilt and the changes are reflected on the simulator or device without having to deploy again.

Using Safari Web Inspector

Safari has Web Inspector support for iOS simulators and devices. Open the Develop menu and select the simulator or device, then select the Ionic App to open Web Inspector.

If the Develop menu is hidden, enable it in Safari » Preferences » Advanced » Show Develop menu in menu bar.

Safari Web Inspector

Viewing Native Logs

Native logs can be found in Xcode in the Console.

If the Console is hidden, enable it in View » Debug Area » Activate Console.

Xcode Console

Edit this page Updated 2019-01-23
Running Overview Running on Android