Getting Started with Electron in WebStorm
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
The coding assistance for the Electron APIs is provided via the electron.d.ts TypeScript definition file. Starting with Electron v1.6.9 this file is included in the electron node module.
If you have electron listed as a project dependency, WebStorm can automatically locate this file in the node_modules folder.
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.
Updated on November, 26th 2018: Create a new Node.js run/debug configuration, specify the path to the Electron executable in the Node.js interpreter field and add
. as a Node.js option (because we need to run
electron . to start the app).
Save the configuration, put the breakpoints and press Debug. Or, press Run to simply start the app.
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.
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
With Electron < 1.6 or > 2, 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.
With Electron 1.6-2, you need to add
app.commandLine.appendSwitch('remote-debugging-port', '9222') to the app’s main.js file and then start your app.
Then create a new debug configuration of the Attach to Node.js/Chrome type (in WebStorm 2017.2 or earlier it’s called Chromuim Remote) and specify the port number – 9222 (or a different port you’ve used).
Once the app is running, start this new configuration to attach to the render process.
If you want to debug both render and main processes at the same time, start both configurations in debug mode.
Debugging TypeScript Electron apps
"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