Developing Ionic apps in WebStorm

Ionic is a framework for developing mobile apps in TypeScript. Since Ionic uses 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

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Tutorials and tagged , , , . Bookmark the permalink.

11 Responses to Developing Ionic apps in WebStorm

  1. Keith Hamm says:

    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:

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

    • Ekaterina Prigara says:

      Do you want to debug on real devices?

      • Marko says:

        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:

    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?

  4. Ciaran Gallagher says:

    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:

    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:

    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

Leave a Reply

Your email address will not be published. Required fields are marked *