Using PhoneGap/CordovaIn WebStorm, 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 StartInstalling PhoneGap/Cordova/IonicInstalling PhoneGap in the Command Line ModeInstalling PhoneGap/Cordova/Ionic Through the WebStorm InterfacePreparing to Use PhoneGap/Cordova/Ionic in a ProjectGenerating a PhoneGap/Cordova/Ionic Application StubEnabling PhoneGap/Cordova/Ionic Integration in an Existing ProjectCreating and Launching a PhoneGap/Cordova/Ionic Run ConfigurationBefore You Start1.Make sure the PhoneGap/Cordova and the NodeJS plugins are enabled. The plugins are bundled with WebStorm and activated by default. If not, enable them on the Plugins page of the Settings dialog box as described in Enabling and Disabling Plugins. 2.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/IonicTo 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 WebStorm user interface. In either case, installation is performed via npm. Installing PhoneGap in the Command Line Mode1.Launch the embedded Terminal by hovering your mouse pointer over in the lower left corner of WebStorm and choosing Terminal from the menu (see Working with Embedded Local Terminal for details). 2.Type one of the following commands at the command line prompt: npm install -- global phonegap npm install -- global phonegap npm install -- global cordova npm install -- global ionic With the --global option, the package will be installed globally so it is accessible from all your WebStorm projects. Installing PhoneGap/Cordova/Ionic Through the WebStorm Interface1.Run NPM from WebStorm using the Node.js and NPM page of the Settings dialog box: Open the project settings by choosing File | Settings or pressing Ctrl+Alt+S, see Accessing Settings for details. Then click Node.js and NPM under the Languages & Frameworks node. 2.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 . 3.In the Available Packages dialog box that opens, select the phonegap, or cordova, or ionic package, depending on your preferences and workflow. Optionally: oSpecify the version to install. oTo have the package installed globally so it is accessible from all your WebStorm projects, select the Options check box and type --global in the text box. 4.Click Install Package to start installation. Preparing to Use PhoneGap/Cordova/Ionic in a ProjectTo start your development, you need a WebStorm 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 WebStorm and configure PhoneGap/Cordova/Ionic support in it. Generating a PhoneGap/Cordova/Ionic Application Stub1.Choose File | New Project on the main menu or click the New Project button on the Welcome screen. 2.In the Create New Project dialog box that opens, specify the project name and location. 3.From the Project type drop-down list, choose PhoneGap/Cordova App and click OK. 4.In the PhoneGap/Cordova App dialog box, that opens, specify the location of the executable file phonegap.cmd, or cordova.cmd, or ionic.cmd (see Installing PhoneGap/Cordova/Ionic). When you click OK, WebStorm generates a skeleton of a PhoneGap/Cordova/Ionic application with the framework-specific structure. Enabling PhoneGap/Cordova/Ionic Integration in an Existing Project1.Open the desired PhoneGap/Cordova/Ionic project in WebStorm by choosing File | Open on the main menu or clicking Open on the Welcome Screen. 2.Open the Settings dialog box by choosing File | Settings . Expand the Languages&Frameworks node, and then click PhoneGap/Cordova under JavaScript. 3.On the PhoneGap/Cordova page that opens: 1.Check the location of the executable file phonegap.cmd, or cordova.cmd, or ionic.cmd or specify the path to it if WebStorm has not detected the executable file automatically. WebStorm detects the installed version and displays it in the PhoneGap/Cordova Version read-only field, 2.In the PhoneGap/Cordova Working Directory field, specify the folder under which the PhoneGap/Cordova/Ionic application files to run are stored. 3.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 plugin installed globally so it is accessible from all your WebStorm 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 . See Apache Cordova Plugins and PhoneGap Plugins for information about plugins and their use. Creating and Launching a PhoneGap/Cordova/Ionic Run ConfigurationPhoneGap/Cordova/Ionic applications are executed and debugged according to a dedicated run/debug configuration. 1.On the main menu, choose Run | Edit Configurations . In the Edit Configuration dialog box, that opens, click the Add New Configuration toolbar button , and choose PhoneGap/Cordova on the context menu. 2.In the Run/Debug Configuration: PhoneGap/Cordova dialog box that opens, specify the following: 1.The name of the configuration. 2.In the PhoneGap/Cordova Executable Path field, specify the location of the executable file phonegap.cmd, cordova.cmd, or ionic.cml (see Installing PhoneGap/Cordova/Ionic). 3.In the PhoneGap/Cordova Working Directory field, specify the folder under which the PhoneGap/Cordova/Ionic application files to run are stored. 4.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: emulateremote buildremote runrunserveSee https://www.npmjs.org/package/phonegap for a list of PhoneGap-specific commands with descriptions. For Cordova: emulaterunserveSee https://www.npmjs.org/package/cordova for a list of Cordova-specific commands with descriptions. For Ionic: emulaterunserveSee https://www.npmjs.org/package/ionic for a list of Ionic-specific commands with descriptions. 5.From the Platform drop-down list, choose the platform for running on which the application is intended. The available options are: AndroidiOSLearn more about targeted platforms at http://docs.phonegap.com/en/edge/guide_platforms_index.md.html#Platform%20Guides 6.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#Android20Platform20Guide for details. 3.Run the application or start a debugging session: oTo run a PhoneGap/Cordova/Ionic application, select the required run configuration from the list on the main tool bar and then choose Run | Run on the main menu or click the Run toolbar button . oTo debug a PhoneGap/Cordova/Ionic application: 1.Set the breakpoints in the code, where necessary. 2.To initiate a debugging session, select the required debug configuration from the list on the main tool bar and then choose Run | Debug on the main menu or click the Debug toolbar button . 3.Explore the suspended program and step through the program. See AlsoProcedures:Generating a Project from a Framework TemplateReference:Run/Debug Configuration: PhoneGap/CordovaPhoneGap/CordovaWeb Resources:http://www.jetbrains.net/devnet/community/wihttp://youtrack.jetbrains.com/issues/WEBLast modified: 5 February 2015