Developing Ionic Apps in WebStorm

Posted on by Ekaterina Prigara

Ionic is a framework for developing mobile apps in TypeScript. Since Ionic can use Angular, WebStorm can be of a great help when working on your next Ionic application.

Let’s go through the Ionic tutorial in WebStorm. But first, make sure that you’ve installed Cordova and Ionic and configured your environment for iOS or Android development as described here.

ionic-emulate

Starting an app

Ionic allows you to create a new project from the command line:
ionic start MyIonicProject

It creates a simple app with all the dev tools already configured. You can also use one of the available templates.

Once you’ve created a project, open a folder with it in WebStorm. You’ll see project files in the Project view, and all available npm tasks in the npm tool window on the left.

Double-click the task named ionic:serve to preview the app in the browser.

Check the output of the command in the Run tool window. If there are no errors, the app will be opened in the browser automatically.

ionic-serve

Debugging the app

Once our app is running in the browser, we can start debugging it.

Create a new JavaScript debug configuration in WebStorm (menu Run – Edit Configurations… – Add – JavaScript Debug) and paste the URL the app is running at (in our project it’s http://localhost:8100/). Save the configuration, and then click the green bug-like icon to start debugging.

Now you can put the breakpoints right in the app’s TypeScript source code, and debug the code without leaving the IDE. Thanks to source maps, the debugger will map the compiled code that runs in the browser to the source code in the editor, and the breakpoints will be hit.

ionic-debug

At the moment, it’s not possible to debug apps running in the emulator. Please let us know if you debug your apps that way and would like to do it in WebStorm.

Working with the code

The application code is located in the src folder. Since Ionic uses Angular, the app structure will look familiar to Angular developers.

src/app/app.module.ts is the entry point of the app. The root component is app.component.ts. Every other component is located in a separate folder.

Navigating around the project

All our components are classes, which is why you can quickly navigate from one to another using the Go to class action (Cmd-O on macOS or Ctrl+N on Windows and Linux).

ionic-go-to-class

Using just the keyboard, there are two fast ways to go from a component’s *.ts file to *.html or *.css file in the same directory. One is to use Go to file (Shift-Cmd-O / Ctrl+Shift+N) and them start typing the component name.

ionic-go-to-file

Another is to use the Navigation bar: press Cmd-Up / Alt+Home to jump to the navigation bar, and from there find your way to the nearby files.

ionic-nav-bar

And surely you can always use Go to definition (Cmd-Click / Ctrl+Click) to jump from a component, class, method or symbol usage to their declaration.

ionic-go-to-definition

Editing the code

As you start writing code, WebStorm will provide you with code completion suggestions.

For example, you’ll get completion for various symbols from Ionic and Angular packages. After you select an item from the list of suggestions, the import for the symbol will be added automatically.

ionic-auto-import

Similarly, you will get suggestions in the code completion popup and auto imports for all classes, methods, and symbols defined in your application.

ionic-completion-for-components

When using TypeScript, you can catch many errors before you actually compile the code. They will be highlighted in the editor and also listed in the TypeScript tool window in the IDE.

ionic-ts-error

In template files, WebStorm will help you by suggesting the names of components defined both in Ionic and in your app.

ionic-completion-for-tags

And the attributes.

ionic-completion-for-attributes

Refactoring

With the refactorings available for TypeScript and Angular in WebStorm, you can quickly make safe changes throughout your whole project. No more Find & Replace!

For example, you can use the Rename refactoring to update the component‘s class name, and all its usages in all project files will be updated automatically.

ionic-rename

Or, if you rename the component’s selector, the tags for this component in .html files will also be changed.

To see the list of available refactorings for any selected code, use the Refactor This popup (Ctrl-T on macOs or Ctrl+Alt+Shift+T on Windows and Linux).

Previewing the app

Ionic allows you to run the app in the phone emulator or on a real device connected to your computer. In WebStorm, you can automate this with a special PhoneGap/Cordova run configuration – then you won’t need to type the command in the Terminal every time you want to run the app in the emulator.

In the Run menu, select Edit configurations…, then click Add and select PhoneGap/Cordova.

Specify the path to the Ionic executable, the command you’d like to run (e.g. run or emulate), and the platform you’re targeting (iOS or Android). Additionally, you can specify the exact target (for example, the iPhone 6 emulator) and some extra arguments.

ionic-cordova-conf

After you name and save the configuration, you can run it anytime from the IDE.

ionic-emulate

Please note that to do that, you have to additionally configure your dev environment for iOS or Android.

WebStorm Team

Comments below can no longer be edited.

26 Responses to Developing Ionic Apps in WebStorm

  1. Keith Hamm says:

    August 25, 2017

    Thanks for the tutorial!

    I like to run apps in an emulator and on a device rather than in a browser. It would be great to be able to debug apps running like that from WebStorm.

  2. Marko says:

    August 30, 2017

    Same as Keith except we currently don’t use simulators. Debugging is possibly the biggest pain for us right now.

    • Ekaterina Prigara says:

      August 30, 2017

      Do you want to debug on real devices?

      • Marko says:

        September 4, 2017

        Yes and we do outside of WebStorm which is a problem in its own right as it requires different package.json settings depending on build type and different browser for each platform (Chrome for Android and Safari for iOS).

  3. Ciaran Gallagher says:

    September 11, 2017

    Where is the NPM task runner window? I’ve followed these exact instructions and I fail to see the NPM task runner window and I can’t find it anywhere in the settings? Any ideas?

    • Ekaterina Prigara says:

      September 12, 2017

      Please try to open a tool window via the menu View – Tool Windows – npm. Does that help?

  4. Ciaran Gallagher says:

    September 11, 2017

    I ran the ‘Ionic run’ and got an error message that says “Error occurred during initialisation of VM. Could not reserve enough space for 2097152KB object heap”. Any ideas?

  5. Miroslav Verčimák says:

    September 22, 2017

    Thank you for this helpful tutorial. It definitely enhanced the experience of developing using Ionic Framework.

    As to the question of debugging apps from device or emulator directly in Webstorm, i would absolutely love that feature built-in even though it can be done by using the emulator console commands and opening a terminal window in the IDE itself 🙂

  6. David De Los Santos says:

    November 23, 2017

    Hello… After starting my ionic app, I tried to open a the project folde through the folder explorer of webstorm… But it does not open anything after hitting ‘Ok’… Please help

    • lena_spb says:

      November 23, 2017

      Please elaborate on this. Did you try opening a folder using File | Open? what was the result?

  7. Wanlin Li says:

    February 5, 2018

    Error:Abnormal build process termination:
    ….
    C:/Users/Administrator/.IntelliJIdea2017.3/system/compile-server
    Error occurred during initialization of VM
    Could not reserve enough space for 1536000KB object heap

    I’m a beginner , I saw the title of yours has refered to this problem .I have changed -XX:ReservedCodeCacheSize for double , but not well done
    How can I deal with it?
    thank you

    • lena_spb says:

      February 6, 2018

      Seems you have passed invalid VM options to java (passed Xmx value is too big for JVM to initialize). What do your compiler settings look like? did you try reverting changes you’ve made to vm options?

  8. JPB says:

    September 19, 2018

    I don’t seem to have the npm target for for ionic:* at all in my package.json. This after generating the initial photo-gallery app from the note I got after logging into ionic for the first time.

    • Ekaterina Prigara says:

      September 19, 2018

      That might have changed since the time the post was published. You need to run ionic serve, if there’s a script in package.json that runs this command, please run it. Or you can always add a new script, e.g. “start”: “ionic serve”.

  9. Vijay Singh says:

    October 3, 2018

    Hi,
    I am new in Ionic Platform, Is there any resourceful material from where I can learn easily.

    Thanks waiting for your revert.

  10. Mark Wayner says:

    October 7, 2018

    Opening an Ionic 4 project in 2018.2.4 Webstorm unfortunately does not yield auto-completion for Ionic-Html tags, Webstorm does not recognize them (and ask me to add them as custom tags).
    Anyone else experiencing this with Ionic 4? Some way to fix this?

    • Ekaterina Prigara says:

      October 8, 2018

      Sorry, right now WebStorm doesn’t support Ionic 4 Beta. Please vote for this issue and follow it for the updates: https://youtrack.jetbrains.com/issue/WEB-35194

      • Mark Wayner says:

        October 8, 2018

        Thanks for the quick response!

  11. Claudio says:

    April 14, 2019

    Hi,
    are these steps to enable debugging still valid with Ionic4?
    Because I’ve:
    – added an entry “start-devmode”: “ionic serve”, in package.json
    – added “sourceMap”: true in tsconfig.json
    – added, in WebStorm, a new Javascript debug configuration
    – launched the debug

    But the breakpoints don’t work.

    Claudio

  12. Rômulo de Queiróz says:

    September 30, 2019

    I am developing an ionic 4 pwa but it is not working suggesting template files.
    Webstorm is not identifying the project as ionic but as angular.

  13. Edmund says:

    January 7, 2020

    Great article, but having the same problem while setting up WebStorm, It’s not suggesting template files.

    • Ekaterina Prigara says:

      January 7, 2020

      Hello Edmund, can you please share a bit more details about the issue? Where exactly do you get no suggestions? Thanks!