PhoneGap/Cordova

1. Install and enable the PhoneGap/Cordova repository plugin on the Plugins page as described in Managing plugins.

2. Download and install Node.js.

3. Download and install an emulator tool depending on the target platform and the operating system you use. Learn more from the Cordova official website.

• In the embedded Terminal (Alt+F12), type one of the following commands:

  • npm install -- global phonegap

  • npm install -- global cordova

  • npm install -- global ionic

To create a PhoneGap/Cordova/Ionic application from a template

1. Select File | New | Project from the main menu or click Create New Project on the Welcome screen. The Create New Project Dialog opens.

2. In the left-hand pane, choose PhoneGap/Cordova App.

3. In the right-hand pane:

   1. Specify the path to the folder where the project-related files will be stored.

   2. Specify the location of the executable file phonegap.cmd, or cordova.cmd, or ionic.cmd (see Installing PhoneGap/Cordova/Ionic).

4. When you click Create, WebStorm generates a skeleton of a PhoneGap/Cordova/Ionic application with the framework-specific structure.

To create an empty WebStorm project

1. Select File | New | Project from the main menu or click Create New Project on the Welcome screen. The Create New Project Dialog opens.

2. In the left-hand pane, choose Empty Project. In the right-hand pane, specify the application folder and click Create.

1. Open the desired PhoneGap/Cordova/Ionic application in WebStorm by choosing File | Open on the main menu or clicking Open on the Welcome Screen.

2. In the Settings/Preferences dialog (Ctrl+Alt+S), go to Languages and Frameworks | JavaScript | Cordova. The Cordova page opens.

3. 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,

4. In the Cordova Working Directory field, specify the folder under which the PhoneGap/Cordova/Ionic application files to run are stored.

5. 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 . In the Available Packages dialog that opens, select the required package.

     To install the package globally, select the Options checkbox and type --global in the field. Click Install Package.

   • To remove a plugin, select it in the list and click .

   • To upgrade a plugin to the latest available version, select the plugin in the list and click .

   See Apache Cordova Plugins and PhoneGap Plugins for information about plugins and their use.

1. From the main menu, choose Run | Edit Configurations. In the Edit Configuration dialog that opens, click on the toolbar and choose PhoneGap/Cordova from the context menu.

2. In the Run/Debug Configuration: PhoneGap/Cordova dialog 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 list, choose the command to run. The contents of the 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:

        • emulate

        • run

        • prepare

        • serve

        • remote build

        • remote run

        See PhoneGap CLI for a list of PhoneGap-specific commands with descriptions.

      • For Cordova:

        • emulate

        • run

        • prepare

        • serve

        See Cordova CLI for a list of Cordova-specific commands with descriptions.

      • For Ionic:

        • emulate

        • run

        • prepare

        • serve

        See Ionic CLI for a list of Ionic-specific commands with descriptions.

   5. From the Platform list, choose the platform for 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 npm and Yarn or by running the sudo npm install ios-sim -g command, depending on your oeprating system.

      • amazon-fireos
      • firefoxos
      • blackberry10
      • ubuntu
      • wp8
      • windows8
      • browser

      Learn more about targeted platforms from the Platform Guides.

   6. For Cordova and Ionic, specify the targeted virtual or physical Android device to run the application on: select the Specify Target checkbox and select the required device from the list.

      The list shows all the virtual and physical devices that are currently configured on our machine. for details. Learn more about setting up emulators from the Cordova official website.

      If WebStorm displays the following error message: Cannot detect ios-sim in path, make sure you have installed the ios-sim, see Before you start.

3. To run a PhoneGap/Cordova/Ionic application, select the required run configuration from the list on the main toolbar and then go to Run | Run <configuration name> from the main menu or click .