Build an App with Electron.js

Build an App with Electron.js

“If you can build a website, you can build a desktop app. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS.”

Look at the apps built on Electron! You might be surprised.

Apps build on Electron

I. Use the package or a CLI

  • Electron.js can be installed separatately as a package.
$ npm install -D electron@latest

II. Bootstrap with electron-forge

I recommend electron-forge templates because they are ready to use without much configuration.

  1. Install the electron-forge CLI globally
$ npm install -g electron-forge
  1. Initialize a new project
$ electron-forge init my-new-project
  1. Launch your app
$ cd my-new-project
$ electron-forge start

III. How to debug

This line in your index.js does it. Comment it out to hide the dev tools.


I also recommend passing a mode option to the openDevTools() method:

mainWindow.webContents.openDevTools({ mode: 'bottom' });

See webContents Documentation for more info about available options.

IV. How to add jQuery and include internal scripts

To add jQuery, first use npm!

$ npm install jquery --save

And add this line to the index.html file near the closing </body> tag:

<script>window.$ = window.jQuery = require('jquery');</script>

To add an internal JS file, add this line below that.


V. How to deploy

Take a look at the available CLI commands. We’ll use the make command.

$ electron-forge make [path]

BONUS - How to add custom icon

Easy! After preparing an icon.icns file, include the path in your package.json file:

"electronPackagerConfig": {
  "icon": "src/public/icons/mac/icon.icns"