install and run the app on iOS devices

[dpcunningham]

Ryan (who was doing Mac-based build cycles) offers the following guidance on his project page:

Getting it on your iOS device.

• Clone and enter the repository.
• npm install.
  • You may notice something like found 3 moderate severity vulnerabilities. This is ok.
• npm install -g ios-deploy
  • This will install, globally, the packages necessary to deploy to iOS with Cordova. It only needs to be run once on the system you are developing on.
• Plug in an iOS device using a USB cable.
  • Check your iOS device if it requires permission. You'll need the passcode to enter in.
• ionic cordova run ios --device
  • You'll find an error containing Select a development team in the Signing & Capabilities editor.
• Follow directions at https://ionicframework.com/docs/v3/intro/deploying/ for iOS Devices.
• ionic cordova run ios --device
  • You may encounter the error message [native-run] Error: DeviceLocked. You'll want to unlock your device.

[dpcunningham]

Ryan offers more extensive guidance on iOS builds here...

His project focuses on deploying Ionic/Angular projects to iOS devices. For Ionic, we have a menu of the following for testing or production:

• Desktop web. The large screens with mouse for devices such as a laptop or desktop.
• Mobile web. A browser on a phone or tablet. Responsive web design declares that content is like water, so that content flows naturally into the dimensions of a phone, tablet, or desktop.
• iOS simulator
• iOS native
• Android simulator
• Android native

Starting up with Mac on Ionic/Angular.

XCode

• Grab XCode from the Mac app store.
• xcode-select --install
  • This will install important tools like git.

Install npm and node

• Two options here.
  • Brew. Popular way to install open source components for Mac. Once brew is installed, brew install npm will pull in both npm and node.
  • Node. Directly download both node and npm.

Global installs

Node can either install packages for a certain project, or globally. For Mac, global installs will work across logins. You'll need the following globally installed:

• npm install -g ionic
• npm install -g ios-deploy

Setup an account for signing apps here. This will be required for deploying to an iOS device.

Start a new project, called insa

• ionic start insa blank --cordova --type=ionic-angular
  • This starts a blank application (no pre-built functionality) with cordova. capacitor seems to be an alternate native interface, and is aligned with the ionic project. Here, by setting --type=ionic-angular, we are choosing angular for a front-end framework. Other choices are vue and react.
  • It will try to create a git project, unless you are currently in a git repository. This can be confusing if you try to git init later in the ionic directory.
• cd insa

At this point, you can run the ionic project as a web app:

• ionic serve
  • This will open a web browser to the browser version of the ionic app. Ionic serves the same code to native (iOS and android) apps or a web browser (mobile or desktop). A useful tool to simulate the native or mobile experience is with Google chrome. Use dev tools and select the small icon showing the mobile device view.

To end the ionic server, hit ctrl-c.

Since we are doing iOS, we need to set the bundle identifier. It needs to be globally unique. Try something like com.example4223. Edit config.xml. On the second line, there will be <widget id="io.ionic.starter"... . Change io.ionic.starter to a unique identifier.

• Save, and ionic cordova prepare ios. It will ask:
  • ? Platform ios is not installed! Would you like to install it? (Y/n). Hit enter to use this default. Now open the generated xcode project. One way is to type:
• open platforms/ios/insa.xcodeproj.

Notice that the Bundle Identifier will reflect what was typed earlier. Go to the Signing & Capabilities tab. Select your team for signing the application. It's easier to use a personal team, which requires an Apple ID. Note that a collision on the global namespace for Bundle Identifier will require a different ID.

Plug in the iOS device with a cable. From XCode, select your device on the top toolbar. Make sure the device is unlocked. The device may ask for permission to be used as a test device. You'll probably need to enter in the device password. Hit "play", and the app should be pushed to the device and able to be used.

You can also run the emulator from this directory. The emulator does not need the bundle identifier set, so you can skip those steps if you just want to emulate a device.

• ionic cordova run ios --emulator