PhoneGap + XCode4

Posted bycameron 52 Comments on PhoneGap + XCode4

There’s been a bit of confusion surrounding changes to XCode4 and PhoneGap. Right now the big ones are 1) Where did my PhoneGap user templates go!? and 2) How do I submit my PhoneGap-based app to Apple? Let me help you.

1) You want to create a new PG project, but you’re not seeing the XCode templates when you go through the new project menus. Check out Shazron’s blog @ Nitobi for a command-line script to get you a new project up and running. It’s not as sexy as the XCode template, but it will do.

2) You can’t compile your app for submission to Apple? That was a little more tricky to track down. See this thread on the Apple Dev Forums for a bit of an abstract view of what’s going on. I’ll save you the details. Follow these steps to XCode bliss.

  1. Select the PhoneGapLib.xcodeproj entry in your files list:
  2. Make sure the “All” tab is selected:
  3. Look for the “Deployment” section and scroll down until you see the “Skip Install” parameter. Set Skip Install to YES:
  4. EDIT: Make sure to verify your target device…
    Make sure you have the “iOS Device” option selected in the schemes drop-down:
  5. Go over to the “Product > Archive” menu. XCode will do its compile magic. Open the Organizer to see the app and the listed archives when the compile is complete. At this point, make sure you are ready to upload the app to iTunes Connect. Bonus: we get to skip the Application Loader app from now on!
  6. Select the archive and click the “Submit” button. XCode will ask for your credentials. Log in and select the appropriate app and distribution profile from the list. Submit. If all goes to plan, you’ll get a message of approval. Finished.

That was easy. Now you can navigate the XCode4 waters with PhoneGap.

Join the Conversation

52 Comments

  1. Shazron’s script isn’t self explanatory for someone who is new to using phonegap and just downloaded xcode4. If the script works, it will be great to have a step by step tutorial with screen shot or video.

    1. Screenshots and videos? What’s not self-explanatory? He tells you exactly how to use it – pass the project name and the destination directory as the only two parameters. That’s it

      1) Install PhoneGap from the installer (get it from the web). Follow steps 1-3 at http://www.phonegap.com/start
      2) CD to wherever you’ve saved Shazron’s script
      3) make said script executable: chmod 755 create_project.sh
      4) Example usage: ./create_project.sh AwesomePhoneGapApp ~/Applications/

      You’ll have your brand new project in ~/Applications/AwesomePhoneGapApp
      Total time: sixty seconds. No joke. Writing this post took a lot longer.

      If running the shell script is a little over your skill level, I suggest maybe applying for the PhoneGap build program over at https://build.phonegap.com/

  2. Argh! Thank you so much. Had no idea about the ‘all’ filter.

    Now if you’d only answer my few other questions…

  3. Actually, here’s my issue. When I change ‘skip install’ to yes, I can go to Product > Archive, and it goes through the motions, but never actually creates an archive.

    I notice in the bottom ‘products’ directory that the name.app is red, like it’s missing. Would that be a problem?

    1. Hmmm.. I’m not sure about that one. If there are any “red” errors, XCode won’t build. The only thing I can think of is to make sure the skip install is only on the PhoneGap sub project, then archive your app. Otherwise, I’m not sure what’s going on.

      1. Got it sorted, I had the wrong ‘scheme’ selected. You had that just cropped out of your pictures 🙂

  4. @cameron, I tried following those steps , running scripts after giving it all the access rights. Project build with phonegap template, and 3 erros (2 related to VERSION and one other.) And I believe many are facing similar issue with the script.

  5. no need for Screenshots and videos. the script its easier than a walk in the park.

    Thank you Cam for the link!!!!

  6. I am having the exact same errors that Kunal mentioned. I have yet to find a solution. This is definitely making this harder than it should be.

  7. Same issue as the others… I am sure it is really simple and we are being dense. Let me see if I can paint a clearer picture.

    I can get all the way through running the script and opening the project file, as described by Shazron.

    When I open the project file from the finder Xcode4 shows the PhoneGapLib.xcodeproj file (right under the www project folder) as an empty icon with a dotted edges and the name PhoneGapLib.xcodeproj is displaying in red. In your screen shot that icon is solid and blueish looking with a series of folders displaying below it. I cannot see that and when I select the icon I do not get any options to edit.

    This situation prevents me from getting to Step 1 of your tutorial.

    If I choose Build instead of making the edits I get the three errors the others describe. They are…

    1. “Shell Script Invocation Error: Head: /version: no such file of directory”

    2. “Shell Script Invocation Error: Cp: /javascripts/phonegap.*js: No such file of directory”

    3. “Uncategorized: error: /version: no such file or directory.

    Many thanks for your help… I’m guessing this might be a simple setting in xcode or maybe the result of the way I have launched the project… but those are very uneducated guesses. I appreciate your expertise in the matter.

    1. It’s hard to say what’s going on without actually having experienced the problem myself.

      The reason the project file is showing up in red is because XCode can’t actually find the PhoneGap project file in your ~/Documents/PhoneGapLib directory. First, make sure it’s there. You can try deleting the reference to the project then re-adding it.

      1. Success in getting the PhoneGampLib.xcodeproj connected to the project! I did what you suggested and deleted the instance that was missing and the added it directly from the ~/Documents/PhoneGapLib directory .

        I’ve made the adjustments as you described in the tutorial and now the only issue is that the Archive option is grayed out under the project menu. Any thoughts?

    2. You may have spaces in the names of some of the subdirectories in your file path where you designated for the files to be located on your system. I went into users/shared on my system, located Cordova ‘s directory there and created a new subfolder under that directory with a simple folder name (no caps, spaces, punctuation, etc. to rule out character handling issues) and then named the project something simple like “test1″… There’s a very brief line at the bottom of the FAQ detailing this problem, stating it is limited to the older version of Cordova released in early March 2012, but to my knowledge I have just installed the latest version. There is no warning about this spacing issue that I saw at the beginning of any of their tutorials, so you wouldn’t know if you didn’t read the error logs and troubleshoot your project yourself. According to the FAQ there is nothing else to be done but avoid file paths with spaces in any of the parent folders, and remember this probably includes the full paths on your machine not just custom folders you create, but the errors resolved for my tests when I reverted to a simple directory path on my system. It’s not a setting, but an inherent attribute of the early March release – and possibly some later versions, as I am still having the issue on a presumably upgraded install. If anyone knows why my upgrade may not have taken effect, I’d be interested to know why I might still be experiencing this issue. I did have Xcode closed out for the new install.

  8. @Bob

    Go up to the scheme drop-down where it has your app name then the various options for iOS Device and various versions of the emulator – it’s next to the star/stop buttons. Select iOS device then the Archive option should become available.

    2. Just one update… Since I never had phonegap installed before, there was nothing under XCode > Preferences > Source Tree List so I created a new entry called PHONEGAPLIB (must be in all caps) and in path gave it the path of the PhoneGapLib Folder.

      I thought this might be useful for someone still have trouble.

      2. just to be clear for people who are still having problems, use this for the path: ~/Documents/PhoneGapLib

      3. Correction: you should enter the FULL PATH to your PhoneGapLib directory, e.g. /Users/tom/Documents/PhoneGapLib

  9. Pingback: XCODE 4: build failed, no architectures to compile « devgeek.de: news, tutorials und links by Mark Buch

  10. I use your steps of the easy setup guide to get things going but it only creates the temporary project in –
    /var/folders/bj/bjPC2DMwEweqVzFkF-zOeU+++TI/-Tmp-/phonegap.jrP7fc58
    /var/folders/bj/bjPC2DMwEweqVzFkF-zOeU+++TI/-Tmp-/phonegap.jrP7fc58

    It doesn’t then create the directory in the requested folder. Can I just copy paste the temporary project to where i need it and run it, or will that create issues?

    BTW i copied and pasted your step 4 –
    /create_project.sh AwesomePhoneGapApp ~/Applications/

    I assume it should be creating the folder AwesomePhoneGapApp in Applications?

  11. Strike that – I had some chmod issues. I just realised I can drag and drop files into terminal to get the correct path… great for us newbies! 😉

    1. Make sure you select the appropriate scheme in the drop-down: “iOS Device,” otherwise it won’t be available if you have one of the simulators selected.

      I’m uploading a screenshot right now to the main post, so take a look at the edit.

  13. First of all Thanks for this great support, I am able to add PhoneGapLib stuff and Shell Script and also able to remove 3 errors mentioned above but after all i am still getting one error. I Hope someone can answer this post.

    Error
    Check dependencies

    [BEROR]No architectures to compile for (ARCHS=i386, VALID_ARCHS=armv6 armv7).

    1. Perhaps you should check step 4 and make sure you ‘ ve selected the corrected scheme. I had the same error when trying to compile and “Archive” wasn’t working for me. Cameron pointed that out for me.

      1. Yes you are right missed Step 4….

        Thanks a lot Korto, Bob, Cameron and other members, Finally got user credential screen to submit my first APP!!! i love this blog!!!

        Can’t we have a forum where we can share some new ideas and walkthroughs for PhoneGap Apps?

  14. Does this assume that I paid for $99/year to join the developer program, and hence the privilege to test apps in development on an actual device, not just the simulator?

    I ask because I get an error that reads Code Sign error: The identity 'iPhone Developer' doesn't match any valid certificate/private key pair in the default keychain. I am guessing that picking iOS Device in scheme means that I will be testing the app on a physical device.

    If I pick one of the simulators, I get an error that says No architectures to compile for (ARCHS=i386, VALID_ARCHS=armv6 armv7)..

    1. Xcode is such a bag of hurt. When you define PHONEGAPLIB in Preferences / Source Trees, Xcode doesn’t like paths such as ~/Documents/PhoneGapLib/.

      Instead, use /Users/username/Documents/PhoneGapLib/.

      This is how you get the thing to work properly:

      1. Download and install PhoneGap as usual.

      2. Open Xcode 4, go the Preferences and click on Source Trees (second tab from the right).

      3. If the table does not have an entry called PHONEGAPLIB, click the + at the bottom left corner and set Setting Name to PHONEGAPLIB (all caps) and Path to /Users/username/Documents/PhoneGapLib/ where username is your OS X username.

      4. Now, do what the main blog post above says up to step 4.

      5. In Build Settings for both the project and PhoneGapLib.xcodeproj, add i386 to Valid Architectures under Architectures.

      Done! Now if you select any of the simulators, the project should compile and launch in the simulator.

      And one more thing. (See what I did there?)

      Apparently Xcode gets b!tchy when there are spaces in the path leading to the .xcodeproj file. I was keeping my projects in ~/Documents/Xcode projects. Don’t do that. ^_^

      2. The spaces in the path were not causing the compile to fail. They were just producing annoying remarks during compilation.

      3. Hi,

        Unfortunately when setting up my macbook initially a few years ago I used a username with spaces in. This seems to be triggering problems when building.

        It appears to be locating the PhoneGapLib via source trees with the spaces no problem but when i try to build/run i get:

        Script invocation Error:
        head: /Users/Gary: No such file or directory
        head: Mccann: No such file or directory
        head: MBP/Documents/PhoneGapLib: No such file or directory

        It appears to look in three different locations, which obviously It cant find. Any Ideas??

        Ps. I have tried quotes and backslashing to escape the charater but then it fails to locate PhoneGapLib all together

        Thanks
        Gary

      4. Hi Gary,

        Try making a symlink to the PhoneGapLib directory in root and try again. Open up Terminal and type the following:
        cd /
        sudo ln -s /Users/Gary Mccann/Documents/PhoneGapLib PhoneGapLib

        Then go to Preferences in Xcode, and click on Source Trees (second tab from the right).

        If the table does not have an entry called PHONEGAPLIB, click the + at the bottom left corner and set Setting Name to PHONEGAPLIB (all caps) and Path to /PhoneGapLib/.

        If PHONEGAPLIB already exists, replace the path with /PhoneGapLib/.

        This should work in theory.

      5. Oh snap!

        The second Terminal command should be:
        sudo ln -s /Users/Gary Mccann MBP/Documents/PhoneGapLib PhoneGapLib

        Here’s a friendly advice from someone who has been burned too many times by to many operating systems. When choosing usernames, follow these two rules:
        1. use all lower-case letters or digits (i.e. a-z, 0-9)
        AND
        2. avoid upper-case letters (A-Z), special characters such as !@#$%^ and space.

        This advice is true for Windows, Linux, Mac OS X, *BSD, etc. Ignoring these rules may work in the short term to get the system up and running, but in the long term, they will rear their ugly head when you least expect it to and it’s most inconvenient.

      6. This thread is a year old but still very helpful. If there’s a newer thread anywhere on these topics I’d love to read it. Cheers

  15. anyone know what would cause this error xcode 4
    Users/brandonwc/Library/Developer/Xcode/DerivedData/ihateappleapp-gqxaansvtrssqaebbricjdmevrmx/ArchiveIntermediates/PhoneGapLib/IntermediateBuildFilesPath/PhoneGapLib.build/Release-iphoneos/PhoneGapLib.build/Script-78AAE5AF135F687C002DA0FF.sh: line 10: 5.: command not found
    Command /bin/sh failed with exit code 127

    thanks

    1. Take a look at this. Main thread here.

      Looks nasty. I’d rather start over by deleting PhoneGap, removing Xcode (can that be done?), then reinstall Xcode and PhoneGap. The .xcodeproj should import right in and you should not lose any data.

      By the way, are you using Xcode 3 or Xcode 4?

      1. Hey, sorry this just got approved. I didn’t notice it sitting in the pending messages queue. There shouldn’t be any need to reinstall XCode, though it wouldn’t hurt to do a clean PhoneGap install based on the instructions over at nitobi and this post. I believe at this point things have been improved and I think there’s now an XCode4 template available, though I haven’t started a new PG app in the last few months, so I can’t say for certain.

        Again, my apologies.

  16. also changing some setting i can get it to exit with error code 1 with this info instead
    /Users/brandonwc/Documents/PhoneGapLib/build/Release-iphoneos//: object file format unrecognized, invalid, or unsuitable

  17. Unfortunately when setting up my macbook initially a few years ago I used a username with spaces in. This seems to be triggering problems when building.

    It appears to be locating the PhoneGapLib via source trees with the spaces no problem but when i try to build/run i get:

    Script invocation Error:
    head: /Users/Gary: No such file or directory
    head: Mccann: No such file or directory
    head: MBP/Documents/PhoneGapLib: No such file or directory

    It appears to look in three different locations, which obviously It cant find. Any Ideas??

    Ps. I have tried quotes and backslashing to escape the charater but then it fails to locate PhoneGapLib all together

    Thanks
    Gary

    1. Hi Gary,

      Try making a symlink to the PhoneGapLib directory in root and try again. Open up Terminal and type the following:
      cd /
      sudo ln -s /Users/Gary Mccann MBP/Documents/PhoneGapLib PhoneGapLib

      Then go to Preferences in Xcode, and click on Source Trees (second tab from the right).

      If the table does not have an entry called PHONEGAPLIB, click the + at the bottom left corner and set Setting Name to PHONEGAPLIB (all caps) and Path to /PhoneGapLib/.

      If PHONEGAPLIB already exists, replace the path with /PhoneGapLib/.

      This should work in theory.

      1. TwiT commander, you genious!

        Many thanks it worked a dream! Well actually I was getting two lots of the same errors, I’m now only getting 1 lot of three but build succeeded.

        Thanks again. Yeah when I set this comp up I had little knowledge, although still limited I have been burnt by spaces before so your tip rings through once again.

        Thanks Again
        Gary

      2. We can try to fix those errors with space.

        Because Mac OS X is Unix, we can use many Unix tricks here. Even though you have spaces in your user name, there's a way around it.

        Open up Terminal (I love Terminal, isn't that obvious already? ^_^) and do the following:
        cd /Users
        sudo ln -s Gary Mccann MBP/ garymccannmbp

        Now, whenever you specify a path, instead of using
        /Users/Gary Mccann MBP/ or
        /Users/Gary Mccann MBP/, use
        /Users/garymccannmbp/

        This should work to eliminate most errors.

        Note: A symlink is like a shortcut in Windows, but it is actually more powerful. In our original example, /PhoneGapLib/ isn't just a shortcut/pointer to /Users/Gary Mccann MBP/Documents/PhoneGapLib , it is the latter. This is powerful stuff.

        By the way, you just became the first person on the Internet to call me a genius. Thanks! (hint: genius is not spelt with an o. xD

  19. Pingback: Building a PhoneGap app for iPhone with Adobe Dreamweaver CS 5.5 « Tim Anderson’s ITWriting

  20. I downloaded XCode 4 and PhoneGap 0.9.5yesterday (Tuesday) didn’t work out of the box, still ran the shell script.

  21. I ran the script and it ended with “no such file or directory.” Any reason for that?

  22. Pingback: Creating a PhoneGap project from the command line (for Xcode 4) | shazronatnitobi

Leave a comment

Hey there! Come check out all-new content at my new mistercameron.com!