In this tutorial, I will show you how to build an application with electron and node.js.
Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS and you can build cross-platform desktop applications free.
The official website can be found here.
Download node.js and install on your operating system.
I have used Windows 8.1 and the version number 10.8.0 for node.js.
Let’s see files from the folder nodejs where is the node.js install:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | dir Volume in drive C has no label. Volume Serial Number is 687F-6145 Directory of C:\nodejs 08/09/2018 09:16 AM <DIR> . 08/09/2018 09:16 AM <DIR> .. 08/01/2018 04:03 PM 24,275,096 node.exe 05/24/2018 05:56 PM 702 nodevars.bat 05/24/2018 05:56 PM 8,969 node_etw_provider.man 08/09/2018 09:16 AM <DIR> node_modules 05/24/2018 05:56 PM 4,974 node_perfctr_provider.man 05/24/2018 05:56 PM 867 npm 05/24/2018 05:56 PM 483 npm.cmd 05/26/2018 06:00 AM 922 npx 05/26/2018 06:00 AM 539 npx.cmd 8 File(s) 24,292,552 bytes 3 Dir(s) 208,780,754,944 bytes free |
Create a folder for your electron application into this folder:
1 2 | C:\nodejs>mkdir electronapp C:\nodejs>cd electronapp |
We can use the npm tool to manage packages that are local dependencies of a particular project.
Use the next command to init the npm tool:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | \nodejs\electronapp>npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (electronapp) version: (1.0.0) description: this is the first application with electron entry point: (index.js) mainapp.js test command: git repository: keywords: author: catafest license: (ISC) About to write to C:\nodejs\electronapp\package.json: { "name": "electronapp", "version": "1.0.0", "description": "this is the first application with electron ", "main": "mainapp.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "catafest", "license": "ISC" } Is this OK? (yes) yes |
We need to install the electron with this command:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | \nodejs\electronapp>npm install --save electron > electron@2.0.7 postinstall \nodejs\electronapp\node_modules\electron > node install.js Downloading SHASUMS256.txt [============================================>] 100.0% of 5.33 kB (5.33 kB/s) npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN electronapp@1.0.0 No repository field. + electron@2.0.7 added 148 packages from 125 contributors and audited 219 packages in 157.321s found 0 vulnerabilities |
Let’s see the files from the folder electronapp:
1 2 3 4 5 6 7 8 9 10 11 12 13 | electronapp>dir Volume in drive C has no label. Volume Serial Number is 687F-6145 Directory of C:\nodejs\electronapp 08/09/2018 09:34 AM <DIR> . 08/09/2018 09:34 AM <DIR> .. 08/09/2018 09:31 AM <DIR> node_modules 08/09/2018 09:34 AM 39,301 package-lock.json 08/09/2018 09:34 AM 311 package.json 2 File(s) 39,612 bytes 3 Dir(s) 208,587,538,432 bytes free |
Open the package.json file and change the line row with test with start, see:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | { "name": "electronapp", "version": "1.0.0", "description": "this is the first application with electron ", "main": "mainapp.js", "scripts": { "start": "electron ." }, "author": "catafest", "license": "ISC", "dependencies": { "electron": "^2.0.7" } } |
When I used the command npm init I set this file named mainapp.js, see the entry point: (index.js) mainapp.js and the package.json file.
We have to create the following files and complete them with source code: mainapp.html and mainapp.js.
The mainapp.html is the HTML5 file with the content of the application, see :
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> Content of the document...... </body> </html> |
The mainapp.js will create the electron application, see:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // define all you need : electron , url and path const electron = require('electron'); const url = require('url'); const path = require('path'); // create the main process of electron. const {app, BrowserWindow} = electron; // keep a global reference of the window object let mainWindow; // start the application app.on('ready', function(){ // create the browser window to show HTML5 file. mainWindow = new BrowserWindow({}); // load the mainapp.html of the application like URL // with path , protocol and slashes mainWindow.loadURL(url.format({ pathname:path.join(__dirname,'mainapp.html'), protocol:'file:', slashes:true })); }); |
This application use loadURL to show the HTML5 file.
You can see more examples on the official website or looking for examples on the internet.
Depends on the basic structure of the application.
If you are not interested in the URL then you can use:
1 | mainWindow.loadFile('mainapp.html') |
Use the next command to start the project:
1 2 3 4 | \nodejs\electronapp>npm start > electronapp@1.0.0 start C:\nodejs\electronapp > electron . |
This is the output result of this source code:
The next step will add a menu, to see how is working.
See the source code and find the source code I change it:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | // define all you need : electron , url and path const electron = require('electron'); const url = require('url'); const path = require('path'); // create the main process of electron. // NOTE: you can add the Menu to use it. const {app, BrowserWindow, Menu } = electron; // keep a global reference of the window object let mainWindow; // start the application app.on('ready', function(){ // create the browser window to show HTML5 file. mainWindow = new BrowserWindow({}); // load the mainapp.html of the application like URL // with path , protocol and slashes mainWindow.loadURL(url.format({ pathname:path.join(__dirname,'mainapp.html'), protocol:'file:', slashes:true })); // build menu from template :myMenuTemplate const mainMenu = Menu.buildFromTemplate(myMenuTemplate); // add my menu Menu.setApplicationMenu(mainMenu); }); // create my menu template const myMenuTemplate = [ { label:"my menu item" } ]; |
The result will remove the old menu and will add just my menu item.
This menu does nothing, it’s just to see the changes in the source code.
Examples can follow, but this is just a tutorial and I should not overload it with too much information.