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.

I. Use the package or a CLI

• Electron.js can be installed separatately as a package.

$ npm install -D electron@latest

• Or you can use a CLI to work faster! Lots to choose from.

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

2. Initialize a new project

$ electron-forge init my-new-project

3. 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.

mainWindow.webContents.openDevTools();

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.

<script>require("./public/js/app.js");</script>

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"
},