Overview
Electron is a tool that you can create desktop applications with JavaScript. Because it is an MIT license, it can be used for free and commercial use is also possible. Atom and Slack applications were also made with Electron. Below, simple features.
- You can make applications with WEB technology called Node.js + HTML + CSS.
- Since it has a built-in Chromium browser (open source version of Chrome), it does not differ from usual writing taste.
- With this one you can make applications for Windows, Mac and Linux
Here we will introduce the installation of Electron to the distribution of applications. Below is an application that only issues "Hello World", but it can be done in 30 minutes until the first time from zero.
Installation
First, install what you need.
Installation of node
For Windows, download and install msi from here. For Mac, install with the following command.
$ brew install node
Installation of Electron
After installing node, the next is Electron installation.
$ npm -g install electron-prebuilt
Create an application with Electron
Create project
Let's make a project.
Create a directory for the application and do it npm init.
As various questions are asked, input properly.
The entry point of the application is "index.js" by default, but since Electron Quick Start reads "main.js", it is set to "main.js".
$ mkdir sample
$ cd sample
$ npm init -y
Based on the input contents "package.json" like the following will be completed.
{
"name": "sample",
"version": "0.0.0",
"description": "Sample",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "[email protected]:Sample/sample.git"
},
"author": "Nyanchu",
"license": "MIT",
"bugs": {
"url": "https://github.com/Sample/sample/issues"
}
}
Preparation is complete.
Output Hello World
Let's output "Hello World".
First, write a description that only displays HTML in main.js.
'use strict';
// Mod of Electron
const electron = require ("electron");
// Module that controls the application
const app = electron.app;
// Module to create window
const BrowserWindow = electron.BrowserWindow;
// Global declaration so that main window is not GC
let mainWindow;
/ / Close all windows closed
app.on ('window-all-closed', function () {
if (process.platform! = 'darwin') {
app.quit ();
}
});
// Execute after completion of initialization of Electron
app.on ('ready', function () {
// Main screen display. You can specify the width and height of the window
mainWindow = new BrowserWindow ({width: 800, height: 600});
mainWindow.loadURL ('file: //' + __dirname + '/ index.html');
// Close the application when the window is closed
mainWindow.on ('closed', function () {
mainWindow = null;
});
});
Next, I will write "Hello World" in index.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
Now let's quick start the application. Type the following command.
# If you are in the sample directory, go back to the upper level
$ cd ../
# quick start
$ electron sample/
I think the window has come up and "Hello World" is displayed. It's very easy, is not it? If you get an error, it is js error or something. I think that you can understand by reading a message. Close it by closing application window or enter Control + C.
Archive the application
Well, let's archive the application we created this time.
To archive an application created with Electron, use a tool called asar.
First let's install npm.
$ npm install -g asar
Well, let's quickly archive it. When you execute the asar command, a single file like tar is created.
$ # asar pack {application directory} {output file name} .asar
$ asar pack ./sample ./sample.asar
Let's execute the archived file.
$ electron sample.asar
As before, I think that the window got up and I could confirm "Hello World".
Distribute the application
Files archived with asar can only be started by users installing Electron. Therefore, in order to make it executable for everyone, it is necessary to pack it along with the Electron's execution environment. In this time I will use a tool called electron-packager that automatically does my neighborhood. Install first.
$ npm i electron-packager -g
And packaging it. For packaging for Mac and Windows, for example below.
$ # electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> --version=<version>
$ electron-packager ./sample sample --platform=darwin,win32 --arch=x64 --electronVersion=0.36.1
I will also explain the arguments with ease.
- platform ... Select all, linux, win32, darwin. Separate commas if you put more than one.
- arch ... Select all, ia32, x64.
- electronVersion ... Specify the version of Electron. After executing the above command for a while, two directories "sample - darwin - x64" and "sample - win32 - x64" are made. Let's take a look at the contents of the "sample-darwin-x64" directory.
$ ls sample-darwin-x64/
LICENSE sample.app version
You have an app file. Double click to execute. Now you have an application that can be distributed to anyone.
Conclusion
Anyway it's easy. I'm very happy to be able to make desktop applications just by knowledge of WEB. Next time I will try to arrange the appearance of the application a little more.