So you have your Ionic App and now you need to test on your phone using Xcode…

Xcode, let’s just be honest. Our first encounters have not been the most pleasant. You left me confused and scouring the web for answers, which turned into putting together a jig-saw puzzle of suggestions. However, when we finally deployed my app to my phone, I couldn’t help but give a fist pump and send a smile your way. Maybe, just maybe, one day we can work on our differences….

Alright, so you have an Ionic app and your are ready to deploy to your phone for testing. (Not familiar with the Ionic framework? Follow the link and check it out!)

Prerequisite: Make sure you have XCode installed and your phone will have to be plugged in, unless you pay for the Apple Developer License.

1. In the terminal, navigate to your project directory and run the following commands:

  • Your may already have the iOS platform already … that’s fine, carry on
  • You may or may not need to do the cordova prepare step (my computer just insisted that I did)
  • If you haven’t set up an account with Ionic previously, you may have to at this step. If you have account, please login with your credentials. This step will provide your app with an app id in the ionic.project or in the config file — you will need it for XCode soon.

2. Next run this in your terminal:

3. In your Finder, navigate to your project. Open platforms -> iOS -> select HelloCordova.xcodeproj (or something.xcodeproj). This will open your project in XCode

* If this is your first time deploying an app with Xcode …..

i. Select XCode at the top -> Preferences -> Account.

ii. Click the (+) plus button in the lower left corner.

iii. Add your apple id, put in your password.

iv. Click details -> and click create beside iOS Development or make sure it has been checked off.

Mine currently is blank because I have already selected it, you should have a create button to click

4. Highlight the top level of your project folder in the left hand tab of XCode, it should display several tabs to the right.

5. Head on over to your Ionic project and grab your app id from ionic.project or the config file depending on where yours saved.

6. Back in XCode, where your project is selected …. click on the General tab and paste in your project id where the Bundle Identifier is (or make sure that your project id is there)

7. While you are there, be sure that your developer license is selected in the Team drop down or XCode will shoot you a friendly error when you try to build.

8. Get excited because we are almost there! At the top of XCode, where you see the play button and the stop button, there is a phone that typically says Generic iOS Device. Click on that and select your personal phone, not one of simulators.

yours will be where mine says No devices ….

9. Drum roll please, it’s time to hit that play button at the top!!!

Congrats!! If you happen to hit any errors at this point, it could pertain to enabling development on your computer or phone. Follow the directions in the error message, they actually are pretty helpful. And if all else falls, pull up your developer pants and Google that error message. Once you have set up the app the first time, the workflow is easier. Make a change to your files, run ionic build in the terminal, and then go hit the play button in Xcode. I might add that there may be an easier method (probably is) to arrive here but this is what I was able to do to make things work. If you have a better solution, please share it and good luck on deploying your apps!!