PhpStorm
 
2022.3
Shortcuts: Windows
Get PhpStorm
  1. Web Technologies
  2. JavaScript
  3. PhoneGap and Cordova

PhoneGap and Cordova

Last modified: 06 October 2022

Required plugins:

Javascript and TypeScript -  The plugin is bundled with PhpStorm and enabled by default.

Cordova -  Install the plugin on the Settings | Plugins page, tab Marketplace.

PhoneGap and Apache Cordova are frameworks for developing mobile application with single HTML, CSS, and JavaScript/TypeScript code base and targeting various mobile platforms, including Android.

Before you start

Installing PhoneGap and Cordova

Creating a new PhoneGap or Cordova application

If you have no application yet, you can generate a PhpStorm project with PhoneGap or Cordova-specific structure from a boilerplate template. Alternatively, create an empty PhpStorm project and configure PhoneGap or Cordova support in it.

Create an application from a template

  1. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The New Project dialog opens.

  2. In the left-hand pane, choose Cordova.

    note

    Select Cordova even if you are going to develop a PhoneGap or an iOS application, because these frameworks use quite similar app generators.

  3. In the right-hand pane, specify the path to the folder where the project-related files will be stored. Specify the location of the executable file. Depending on your operating system and target platform, this can be phonegap, phonegap.cmd, cordova, or cordova.cmd.

  4. When you click Create, PhpStorm generates a skeleton of an application with the framework-specific structure.

Starting with an existing PhoneGap or Cordova application

To continue developing an existing application, open it in PhpStorm, download the required dependencies, and configure PhoneGap or Cordova support in your project.

Configure PhoneGap or Cordova in your project

  1. Open the Settings dialog (Ctrl+Alt+S) and go to Languages & Frameworks | JavaScript | Cordova.

  2. Check the location of the executable file or specify the path to it if PhpStorm has not detected the executable automatically. This can be phonegap, phonegap.cmd, cordova , or cordova.cmd, depending on your operating system and the selected framework.

    PhpStorm detects the installed version and displays it in the Cordova version read-only field.

  3. In the Cordova working directory field, specify the folder where the application files to run are stored.

  4. By default, PhpStorm automatically treats the platforms or www directory as excluded and ignores it during indexing, parsing, and code completion, see Configuring folders in a content root.

    To preserve this default behavior, make sure the Automatically exclude working directories ('platforms', 'www' for ionic) checkbox is selected.

Project security

When you open a project that was created outside PhpStorm and was imported into it, PhpStorm displays a dialog where you can decide how to handle this project with unfamiliar source code.

Untrusted project warning

Select one of the following options:

  • Preview in Safe Mode: in this case PhpStorm, opens the project in a preview mode. It means that you can browse the project's sources but you cannot run tasks and script or run/debug your project.

    PhpStorm displays a notification on top of the editor area, and you can click the Trust project… link and load your project at any time.

  • Trust Project: in this case, PhpStorm opens and loads a project. That means project is initialized, project's plugins are resolved, dependencies are added, and all PhpStorm features are available.

  • Don't Open: in this case PhpStorm doesn't open the project.

Learn more from Project security.

tip

Projects created from the Welcome screen or via File | New | Project as described in Creating projects are automatically considered trusted.

Running PhoneGap and Cordova applications

PhoneGap and Cordova applications are executed according to a dedicated run/debug configuration.

Create a run configuration

  1. From the main menu, select Run | Edit Configurations. In the Edit Configuration dialog that opens, click the Add New Configuration button on the toolbar and select Cordova from the context menu.

  2. In the Run/Debug Configuration: Cordova dialog that opens, specify the following:

    1. The name of the configuration.

    2. In the Cordova executable field, specify the location of the executable file phonegap, phonegap.cmd, cordova or cordova.cmd, depending on your operating system and the selected framework.

    3. In the Cordova working directory field, specify the folder where the 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 Cordova executable 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.

    5. From the Platform list, choose the platform for which the application is intended.

      The available options are:

      • Android

      • iOS To emulate this platform, install the ios-sim and ios-deploy command-line tools globally.

        Open the embedded Terminal (Alt+F12) and type:

        npm install -g ios-sim

        npm install -g ios-deploy

      • browser

      • amazon-fireos

      • firefoxos

      • blackberry10

      • ubuntu

      • wp8

      • windows

      • windows8

      Learn more about targeted platforms from the Platform Guides.

    6. For Cordova, 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 your machine. Learn more about setting up emulators from the Cordova official website.

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

Run an application

  • Select the newly created run configuration from the list on the main toolbar and click the Run button next to the list.

See also

Procedures

Reference