Using PhoneGap/Cordova
In IntelliJ IDEA, you can develop applications intended for running on various mobile platforms, including Android, using the PhoneGap, Apache Cordova, and Ionic frameworks.
On this page:
- Before You Start
- Installing PhoneGap/Cordova/Ionic
- Preparing to Use PhoneGap/Cordova/Ionic in a Project
- Creating and Launching a PhoneGap/Cordova/Ionic Run Configuration
Before You Start
- Make sure the PhoneGap/Cordova and the NodeJS plugins are enabled. The plugins are not bundled with IntelliJ IDEA, but they can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins. Once enabled, the plugins are available at the IDE level, that is, you can use it in all your IntelliJ IDEA projects.
- Download and install Node.js because NPM, which is a part of the framework, is also the easiest way to download PhoneGap and Cordova.
Installing PhoneGap/Cordova/Ionic
To use PhoneGap/Cordova, you need a phonegap
, or cordova
, or ionic
package.
The package can be installed either in the command line mode or through the IntelliJ IDEA user interface. In either case, installation is performed via npm.
Installing PhoneGap in the Command Line Mode
-
Launch the embedded Terminal
by hovering your mouse pointer over
in the lower left corner of IntelliJ IDEA and choosing Terminal from the menu (see Working with Embedded Local Terminal for details).
-
Type one of the following commands at the command line prompt:
With the
npm install -- global phonegap npm install -- global cordova npm install -- global ionic
--global
option, the package will be installed globally so it is accessible from all your IntelliJ IDEA projects.
Installing PhoneGap/Cordova/Ionic Through the IntelliJ IDEA Interface
- Run NPM from IntelliJ IDEA using the Node.js and NPM page of the Settings dialog box: Open the Settings / Preferences Dialog by choosing for Windows and Linux or for OS X, and click Node.js and NPM under Languages & Frameworks.
-
On the Node.js and NPM page that opens, the Packages area shows all the Node.js-dependent packages
that are currently installed on your computer, both at the global and at the project level.
Click
.
-
In the Available Packages dialog box that opens, select the
phonegap
, orcordova
, orionic
package, depending on your preferences and workflow.Optionally:
- Click Install Package to start installation.
Preparing to Use PhoneGap/Cordova/Ionic in a Project
To start your development, you need a IntelliJ IDEA project with the PhoneGap/Cordova/Ionic-specific structure. You can have an application stub that meets these requirements generated automatically or open an existing PhoneGap/Cordova/Ionic project in IntelliJ IDEA and configure PhoneGap/Cordova/Ionic support in it.
Generating a PhoneGap/Cordova/Ionic Application Stub
- In the right-hand pane, choose PhoneGap/Cordova App and click Next.
-
On the second page of the wizard, specify the project name and the folder to create it in.
Specify the location of the executable file
phonegap.cmd
, orcordova.cmd
, orionic.cmd
(see Installing PhoneGap/Cordova/Ionic).
When you click Finish, IntelliJ IDEA generates a skeleton of a PhoneGap/Cordova/Ionic application with the framework-specific structure.
Enabling PhoneGap/Cordova/Ionic Integration in an Existing Project
- Open the desired PhoneGap/Cordova/Ionic project in IntelliJ IDEA by choosing on the main menu or clicking Open on the Welcome Screen.
- Open the Settings / Preferences Dialog by choosing for Windows and Linux or for OS X. Expand the Languages&Frameworks node, and then click PhoneGap/Cordova under JavaScript.
-
On the PhoneGap/Cordova page that opens:
-
Check the location of the executable file
phonegap.cmd
, orcordova.cmd
, orionic.cmd
or specify the path to it if IntelliJ IDEA has not detected the executable file automatically.IntelliJ IDEA detects the installed version and displays it in the PhoneGap/Cordova Version read-only field,
- In the PhoneGap/Cordova Working Directory field, specify the folder under which the PhoneGap/Cordova/Ionic application files to run are stored.
-
In the Plugins area,
configure a list of plugins to use in your development by installing required packages.
The list shows all the PhoneGap/Cordova/Ionic plugins that are currently installed on your computer,
both at the global and at the project level.
-
To install a plugin, click the Install button
. In the Available Packages dialog box that opens, select the required package.
To have the installed globally so it is accessible from all your IntelliJ IDEA projects, select the Options check box and type
--global
in the text box. Click Install Package. -
To remove a plugin, select it in the list and click the Uninstall button
.
-
To upgrade a plugin to the latest available version, select the plugin in the list and click the Upgrade button
.
-
To install a plugin, click the Install button
-
Check the location of the executable file
Creating and Launching a PhoneGap/Cordova/Ionic Run Configuration
PhoneGap/Cordova/Ionic applications are executed according to a dedicated run/debug configuration.
-
On the main menu, choose .
In the Edit Configuration dialog box, that opens, click the Add New Configuration toolbar button
, and choose PhoneGap/Cordova on the context menu.
-
In the Run/Debug Configuration: PhoneGap/Cordova dialog box that opens, specify the following:
- The name of the configuration.
-
In the PhoneGap/Cordova Executable Path field,
specify the location of the executable file
phonegap.cmd
,cordova.cmd
, orionic.cml
(see Installing PhoneGap/Cordova/Ionic). - In the PhoneGap/Cordova Working Directory field, specify the folder under which the PhoneGap/Cordova/Ionic application files to run are stored.
-
From the Command drop-down list,
choose the command to run. The contents of the drop-down list, depend on the actually used framework, namely,
on the executable file specified in the PhoneGap/Cordova Executable Path field. The available options are:
- For PhoneGap: See https://www.npmjs.org/package/phonegap for a list of PhoneGap-specific commands with descriptions.
- For Cordova: See https://www.npmjs.org/package/cordova for a list of Cordova-specific commands with descriptions.
- For Ionic: See https://www.npmjs.org/package/ionic for a list of Ionic-specific commands with descriptions.
-
From the Platform drop-down list,
choose the platform for running on which the application is intended.
The available options are:
- Android
-
ios
To emulate this platform, you need to install the ios-sim command line tool globally.
You can do it through the Node Package Manager (npm), see Installing and Removing External Software Using Node Package Manager
or by running the
sudo npm install ios-sim -g
command, depending on your oeprating system. - amazon-fireos
- firefoxos
- blackberry10
- ubuntu
- wp8
- windows8
- browser
- For Cordova and Ionic, specify the targeted virtual or physical Android device to run the application on: select the Specify Target check box and select the required device from the drop-down list. The list shows all the virtual and physical devices that are currently configured on our machine. See http://docs.phonegap.com/en/edge/guide_platforms_android_index.md.html#Android%20Platform%20Guide for details.
-
To run a PhoneGap/Cordova/Ionic application,
select the required run configuration from the list on the main tool bar
and then choose on the main menu or click the Run toolbar button
.