Getting started with Electron in WebStorm

Electron allows you to build cross platform applications using only JavaScript, HTML and CSS (or ECMAScript 6, TypeScript, CoffeeScript or any language that compiles to JavaScript). It provides lots of native OS APIs for things like OS notifications or automatic updates.

There are several well-known apps that use Electron, for example Slack and Atom, as well as a great number of open-source apps built on Electron that you can learn from.

Let’s have a look at how you can set up your workflow with the Electron app in WebStorm: how to enable the coding assistance and how to run and debug Electron application.

Configuring code completion

To enable coding assistance for the Electron APIs in you project, all you have to do is to add electron.d.ts as a JavaScript library. Go to Preferences | Languages and Frameworks | JavaScript | Libraries, click Download, search for electron and download it.

The downloaded TypeScript definition file contains the descriptions of all the Electron APIs. It is used by WebStorm to provide code completion, information about method parameters and documentation.

electron-doc

To get code completion for Node.js APIs, go to Preferences | Languages and Frameworks | Node.js and npm and click ‘Enable coding assistance’.

Running and debugging Electron app

In Electron, there are 2 types of processes: the main process, which manages the web pages of your application and handles system events, and the render process, which is related to every individual page of the app and hosts most of the application logic.

Running and debugging the main process

If you want to see what happens on application start, you need to debug the main process.

Create a new Node.js run/debug configuration, and specify the path to the Electron executable in the Node.js interpreter field and the path to the app’s main JavaScript file. That’s it!

Save the configuration, put the breakpoints and press Debug. Or, press Run to simply start the app.

debugging-main-process

Electron executable is what you use to start your Electron app from the command line.
If you have installed Electron (the electron-prebuilt package) locally, it should be located in your project node_modules under .bin folder. On OS X and Linux that should be electron, while on Windows it’s electron.cmd. You can also specify the path to the globally installed Electron.

The path you need to specify in the JavaScript file field is the path to the app startup file – the same file you have in the main field of your package.json.

Debugging packaged apps

You can also debug packaged Electron apps – just make sure you specify the path to Electron inside the built app in the Node.js run/debug configuration. For example, for a built OS X app, that would be your_app.app/Contents/MacOS/your_app; for a built Windows app it’s your_app-win32-x64/your_app.exe.

Debugging the render process

To debug the render process of the app in WebStorm, first start the app with an additional option --remote-debugging-port=9222 (select any port you like).

You can either add this option in the Application parameters field in the previously created Node.js configuration for the main process and use it to start the app, or run the app from the command line with this option.

main-process-with-debugging-port

Once the app is running, start a new Chromium remote run/debug configuration on port 9222 to attach to the render process.

debugging-render-process

You can also start debug sessions for both configurations. In this case the breakpoints would be hit both in render and main processes.

Debugging TypeScript Electron apps

If you’re writing your app in TypeScript (or actually any language that you then compile to JavaScript) and want to debug it, make sure that the compiler generates source maps. For example, for TypeScript, add "inlineSources": true, "sourceMap": true in the project tsconfig.json file.

Debugging apps with Webpack

Please don’t forget to add devtool: 'source-map' option to your webpack.config.js file, when you want to debug Electron apps built using Webpack.

– JetBrains 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.

50 Responses to Getting started with Electron in WebStorm

  1. Bob Cochran says:

    Thank you for providing this. I have been playing with Electron recently and wondered how to import and test an Electron project in Webstorm.

  2. Cameron says:

    How do you debug the main and renderer at the same time, like you mentioned?

    • Ekaterina Prigara says:

      You just start the debug session for the main process and the debug session for the render process.

      • jdawg says:

        Can you elaborate please with an example?

        • Ekaterina Prigara says:

          Please do the steps described in the blog post in sections ‘Running and debugging the main process’ and Debugging the render process. Start the first configuration and then start the second configuration (do no stop the first one). That’s it.

  3. David Cotter says:

    Once small typo: the “dash dash” has been replaced by one “long dash”: see below. This stops debugging working

    To debug the render process of the app in WebStorm, first start the app with an additional option –remote-debugging-port=9222
    should be
    –remote-debugging-port=9222

  4. Sascha says:

    How does this work in Intellij 16: When clicking on Add… there is no way to download anything. What am I missing?

    • Ekaterina Prigara says:

      Sorry, my bad, it’s the Download… button. Fixed in the post.

      • Sascha says:

        Hi Ekaterina

        Thanks. Interestingly, I do not see a github-electron entry in the downloads list. What am I doing wrong?

        • Ekaterina Prigara says:

          Hmm, that’s quite weird. It should look like this:
          .

          • Sascha says:

            Thanks. It works now.

            Don’t know what the problem was. I restarted IntelliJ , deleted jsLibraryMappings.xml in .idea folder of the project, and after that: voilà!

  5. Fred Vader says:

    Regarding using TypeScript; I had webstorm insert the default tsconfig.json file for me and also went into Preferences-> Lang & Frameworks > TypeScript and checked Enable TS Compiler and Use tsconfig.json.

    Do I also need to add typescript to my package.json as shown below? Thanks!

    “devDependencies”: {
    “electron-packager”: “^7.3.0”,
    “electron-prebuilt”: “^1.2.7”,
    “concurrently”: “^2.0.0”,
    “lite-server”: “^2.2.0”,
    “typescript”: “^1.8.10”,
    “typings”:”^1.0.4″
    }

    • Ekaterina Prigara says:

      You can use either a built-in TypeScript compiler, then you don’t need to have TypeScript installed in node_modules, or set up some other build tool like Gulp, then you do need it.

  6. Marius says:

    I’m having some problems running the process. All I get is “CreateProccess failed with error 193 (no message available).

    My settings:
    Node interpreter: C:\Code\Webstorm\Electron\Lab\node_modules\.bin\electron
    Working directory: C:\Code\Webstorm\Electron\Lab
    JavaScript file: app.js

    I’m running Windows 10

    Any one know what I can do to get around this problem?

  7. Peter says:

    The main process works for me, but no breakpoints are hit in the renderer.
    I’m using typescript and I’m using the latest EAP version (WebStorm 2016.3 EAP
    Build #WS-163.4396.14, built on September 14, 2016)

  8. Frank Arnold says:

    Is developing with Electron also supported with PHPStorm or is there a difference between Webstorm vs PHPStorm for node.js/Electron or Node Webkit?

  9. Edik says:

    Hello.
    I try to use a Configuration:

    node interpreter –
    D:\workspace_webstorm\shn-elect-000\node_modules\.bin\electron.cmd

    working directory –
    D:\workspace_webstorm\shn-elect-000

    javascript file –
    main.js

    _Run_ is fine.

    But when I try to use _Debug_,
    I take a error message:

    “D:\Program Files (x86)\JetBrains\WebStorm 2016.2.3\bin\runnerw.exe” D:\workspace_webstorm\shn-elect-000\node_modules\.bin\electron.cmd –debug-brk=61115 –expose_debug_as=v8debug D:\workspace_webstorm\shn-elect-000\main.js

    ReferenceError: v8debug is not defined

    Ekaterina, can you possibly to help me ?

    • Ekaterina Prigara says:

      Please ignore this message (it’s related to the upcoming changes in the Node.js debugging protocol), it should not affect debugging your app. Sorry for confusion.

  10. polina says:

    Hello.
    My typescript module(which i use in render process) is required as usual module and it contains only ./out directory with js files, but I want debug it as ts code. I tried to add source map to files in ./out dir, where source is my local ./src dir, but Chromium remote does not see them. Chromium remote use only js files from ./out dir :(
    How can i fix it?
    I also tried add tsconfig with something like this but it also does not work

    "outDir": "./node_modules/myTSmodule/out/",
    "sourceRoot": "../myTSmodule/src/",
    "mapRoot": "../myTSmodule/out/",
    "inlineSources": true,
    "sourceMap": true
    },
    "include": [
    "../myTSmodule/src/**/*.ts"
    ]

  11. Robert Derus says:

    Did something change in WS 2016.2? I cant find “Preferences | Languages and Frameworks | JavaScript | Libraries, click Download”

  12. Kevin says:

    Create NodeJS run\debug configuration for the Main process and Chromium remote configuration for the Render process.
    Run NodeJS configuration, then Chromium remote configuration.
    Main process is OK.
    Chromium remote successfully connected, but nothing happens – breakpoints are not hit, console.log message are not shown.
    Why? How to fix it?

    Thx.

    • Konstantin Ulitin says:

      Could you please enable logging by setting js.debugger.wip.log property in Registry (Help|Find Action|Registry) to some file path like ~/wip.json, start debugging and attach resulted file? Feel free to create a support request for it, it will be more convenient to continue the investigation there.

  13. Liam says:

    For anyone who had trouble getting the webstorm interpreter dialog to find the .bin folder or the /usr directory on a mac. A workaround is to create a symlink to the .bin or /usr/local folder and then select the electron binary.

    For example in my home directory ~/ I did:
    ln -s /usr/local/ ~/usr_local_symlink

    After that I was able to access the electron binary from the dialog. There must be a better way to accomplish this but in the short term this is for anyone who is stuck.

    • Ekaterina Prigara says:

      You can hit Shift-Cmd-G (it’s a default shortcut on macOS in Finder for Go to folder) when you see a file chooser in WebStorm and type the path you need to get to, e.g. /usr.

      • John Wilson says:

        Good tip, though I’ve oddly had mixed results with it. Worked for me once, then it locked up the open dialog the next time I tried it. In the end I found hitting Cmd-Shift-. (period) will cause hidden files like .bin to be shown in the dialog box. Just another option if anyone runs into problems with Shift-Cmd-G like I did.

  14. Robert Ferentz says:

    I’m attempting to debug the main process of my electron app according to this https://blog.jetbrains.com/webstorm/2016/05/getting-started-with-electron-in-webstorm/

    I’ve set up everything as described, but am getting an error when attempting to debug.

    /Users/robertferentz/Work/connect-admin/node_modules/electron-prebuilt-compile/lib/cli.js –debug-brk=56546 –expose_debug_as=v8debug /Users/robertferentz/Work/connect-admin/src/index.js App threw an error during load Error: Cannot find module ‘/Users/robertferentz/Work/connect-admin/–debug-brk=56546’ at Module._resolveFilename (module.js:455:15) at Function.Module._resolveFilename (/Users/robertferentz/Work/connect-admin/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/common/reset-search-paths.js:35:12) at Function.Module._load (module.js:403:25) at Module.require (module.js:483:17) at init (/Users/robertferentz/Work/connect-admin/node_modules/electron-compile/lib/config-parser.js:279:16) at main (/Users/robertferentz/Work/connect-admin/node_modules/electron-prebuilt-compile/lib/es6-init.js:38:29) at Object. (/Users/robertferentz/Work/connect-admin/node_modules/electron-prebuilt-compile/lib/es6-init.js:41:1) at Module._compile (module.js:556:32) at Object.Module._extensions..js (module.js:565:10) at Module.load (module.js:473:32)

    I’ve made sure all the settings are correct. Could be because I’m using electron-forge or does it not have anything to do with it?

  15. Kim Gentes says:

    I have one Electron main.js process and TWO (2) render processes. How do I point my debugger to a specific render process that I want to debug?

    • Ekaterina Prigara says:

      You should do the steps described in Debugging the render process section of the blog post. The only difference is that when you start the Chromium remote configuration, WebStorm will ask you what render process out of two you’d like to debug.

  16. Aland Kuang says:

    I’m on IntelliJ 2016.1 Ultimate and I can’t find “Preferences | Languages and Frameworks | JavaScript | Libraries, Download”. I cannot locate “Libraries.” Is this a new feature in 2016.2 and onwards?

    • Ekaterina Prigara says:

      Please make sure you have JavaScript support enabled in Preferences | Plugins.

      • Aland Kuang says:

        I was meaning to say I was using WebStorm 2016.1. Sorry about that.

        I do see that Javascript support is checked. I just updated WebStorm and I still can’t see the Libraries.

        • Ekaterina Prigara says:

          It seems that you’re looking at the default settings instead of project settings. Libraries are only available in project settings.

          • Aland Kuang says:

            Ah. I made an empty test project and now I see Libraries and I could see the downloads. Thanks for the help!

  17. Aland Kuang says:

    I can’t find github-electron in the list. I tried Sascha’s solution but I couldn’t find the referenced file.

    I updated to WebStorm 2017.1.

    Here’s a link to a screenshot: http://imgur.com/a/gVTyc

    However, I see a choice called electron and electron-* where * is any word. Is electron the new name for it?

Leave a Reply

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