Creating Phonegap project on MacOS from Command Line

Written by on December 14, 2014

Creating Phonegap project on MacOS from Command Line

After a rather long hiatus and public demand here’s another Phonegap article. My last one was about building a native mobile app with PhoneGap and jQuery Mobile 1.4, most important part talked about creating the PhoneGap project from a command line. I’ve covered only Windows point of view, and an article grew too large to include MacOS, so I’m writing this article to rectify this problem. I will try not to stray too far from the main point, if you need a better understatement read my previous article.

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to Thanks and have a nice day!


Download the listed software:

  • XCode
  • XCode Command Line Tool
  • Apache Cordova

Install XCode

Download from this sources:

This is rather a large installation (2,09 GB as you can see from the picture) so take some time before the installation completes.

[frame align=”center”]ANT PATH[/frame]

Install XCode Command Line Tool

Open your XCode and go to this location: [highlight background=”#e9e9e9″ color=”#000000″]Xcode Preferences[/highlight] -> [highlight background=”#e9e9e9″ color=”#000000″]Downloads[/highlight] -> [highlight background=”#e9e9e9″ color=”#000000″]Command Line Tools[/highlight]. This will download and install copies of the core command line tools and system headers into system folders on your computer.

[frame align=”center”]ANT HOME[/frame]

Download and extract Apache Cordova

This next step requires us to download and extract Apache Cordova; it doesn’t need to be the latest version, use any version that you are comfortable with. Download it from here. Click on the Download icon and select [highlight background=”#e9e9e9″ color=”#000000″][/highlight] to download to your machine. The X, Y, and Z represent the version number of Cordova, for an example 2.5.0. The download includes the code for all of the Apache Cordova supported platforms.

Navigate to the folder where you downloaded the code. Find the [highlight background=”#e9e9e9″ color=”#000000″][/highlight] file. 
Double click file to extract. This will create a directory named, cordova-X.Y.Z. 
Expand this folder and locate the file and double click to extract it. 
The code for iOS is within the [highlight background=”#e9e9e9″ color=”#000000″]cordova-ios[/highlight] directory structure. That structure looks like this:

[frame align=”center”]CORDOVA PATH[/frame]

Project creation

Thank God for MacOS, unlike my previous tutorial we don’t need Java and Ant here. But this part is still tricky. First, we need to open a terminal app. Just click on Spotlight and type Terminal.

[frame align=”center”]TERMINAL[/frame]

The terminal app should be listed there, just double-click it, and it should open. It should look something like this:

[frame align=”center”]TERMINAL[/frame]

Now highlight the bin directory and drag this directory to the open Terminal. This will open up a default terminal window with the path set to the bin directory. There’s another way, just [highlight background=”#e9e9e9″ color=”#000000″]right click bin folder[/highlight] -> [highlight background=”#e9e9e9″ color=”#000000″]click Services[/highlight] -> [highlight background=”#e9e9e9″ color=”#000000″]click New Terminal at Folder[/highlight]. This will also open terminal windows at this specific directory point.

Now we will need to run the create command to build a new project. Before we do that few warnings. Project directory should not exist, create command will create it automatically. Command line execution should look like this:

[highlight background=”#e9e9e9″ color=”#000000″]./create [/highlight]

[highlight background=”#e9e9e9″ color=”#000000″]./create ~/Documents/CordovaXY/HelloWorld org.apache.cordova.HelloWorld HelloWorld[/highlight]

Where [highlight background=”#e9e9e9″ color=”#000000″]~/Documents/CordovaXY/HelloWorld[/highlight] is our non existent directory, package name [highlight background=”#e9e9e9″ color=”#000000″]org.apache.cordova.HelloWorld[/highlight] should always be a unique and project name [highlight background=”#e9e9e9″ color=”#000000″]HelloWorld[/highlight] is your arbitrary name.

Create command execution should look like this:
[frame align=”center”]ANT PATH[/frame]

A new project should/will be created, check that project was really created. To be sure go to your project directory [highlight background=”#e9e9e9″ color=”#000000″]~/Documents/CordovaXY/HelloWorld[/highlight], if it exist and if there’s a content inside you are fine.

Open the Project

Navigate to the location where you created the project. This guide uses [highlight background=”#e9e9e9″ color=”#000000″]~/Documents/CordovaXY/HelloWorld[/highlight]. Double click the [highlight background=”#e9e9e9″ color=”#000000″]HelloWorld.xcodeproj[/highlight] file to open the project in Xcode. In the upper left-hand corner of Xcode, click on the Scheme drop down and select the project name, HelloWorld, as the target. 
Click the Device section and select an iOS Simulator such as iPhone 6.0 Simulator. 
Click the Run button in your project window’s toolbar to build, deploy and run the application in the simulator.
Your screen should look similar to:
[frame align=”center”]ANT PATH[/frame]


More then the tutorial this article was meant to show us how last jQuery Mobile version runs and feels wrapped inside the iOS PhoneGap app. From what I can see it behaves much better than previous jQuery Mobile versions, CSS reductions really helped to make it more fluid and native-like. Page transitions finally feel native-like, unfortunately scrolling still don’t feel fluid, still it is a big improvement over previous versions. Not to mention that iOS version works much better then Android counterpart.

In the end, this is a big step for jQuery Mobile, it is finally catching with his commercial brothers Kendo UI and PhoneJs. Thumbs up.

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.


Leave a Reply