※ v9.2.1
2020/08/31 - [Web/JavaScript] - [Electron] Getting Started
2020/08/31 - [Web/JavaScript] - [Electron] BrowserWindow
2020/09/01 - [Web/JavaScript] - [Electron] IPC (Inter Process Communication)
2020/09/01 - [Web/JavaScript] - [Electron] Menu
2020/09/01 - [Web/JavaScript] - [Electron] Global Shortcut
2020/09/01 - [Web/JavaScript] - [Electron] Tray
Project Configuration
Create a project folder and configure it. I'm using yarn. If you use npm, try it with npm.
$ yarn init -y
$ npm init -y
Configure the package.json as you wish.
I changed the main entry point to main.js, because electron is consisted by main process and renderer process.
Now, install Electon.
$ yarn add -D electron
And I created scripts for starting application.
{
"name": "test",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^9.2.1"
},
"license": "MIT"
}This is the configuration so far.
First Electron Application
Now, let's create a main.js file.
Import required modules.
const electron = require("electron");
const path = require("path");
const url = require("url");Define a required constant variables.
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;It's the time to create the main window!!
let win;
function createWindow() {
win = new BrowserWindow();
win.loadURL(
url.format({
pathname: path.join(__dirname, "index.html"),
protocol: "file",
slashes: true,
})
);
win.webContents.openDevTools();
win.on("closed", () => {
win = null;
});
}Call BrowserWindow function to create a window.
Put web page we want to loadURL function.
win.webContents.openDevTools(); line means run with development tool automatically.
It is not a mandatory. It is just for convenience for debugging.
Lastly, if a window is closed, mark the variable for garbage collection.
Let's dig into the remaining code.
app.on("ready", createWindow);
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", () => {
if (win === null) {
createWindow();
}
});First, if the application is ready, create a window.
Second, if all windows are closed, quit the application if it is not MAC OSX.
In the case of MAC OSX, pressing the exit button will cause the application to enter the dock and remain in the standby state.
Third line is for MAC OSX.
It the application is activated, the application will be reactivated.
This is the whole code till now.
const electron = require("electron");
const path = require("path");
const url = require("url");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let win;
function createWindow() {
win = new BrowserWindow();
win.loadURL(
url.format({
pathname: path.join(__dirname, "index.html"),
protocol: "file",
slashes: true,
})
);
// win.webContents.openDevTools();
win.on("closed", () => {
win = null;
});
}
app.on("ready", createWindow);
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", () => {
if (win === null) {
createWindow();
}
});Make Web Page
Finally, we need to create a contents.
Create a index.html file to put the loadURL function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<h1>Hello Electron</h1>
</body>
</html>I just created the simple one with title and text.
Run Our Application
Our project has this file hierarchy.
test
+- package.json
+- main.js
+- index.html
Let's execute the application !!!
$ yarn start
TADA~!
Please find the title and text that I wrote.
It's too easy to create desktop application with javascript.
Enjoy yourself~
'Web > JavaScript' 카테고리의 다른 글
| [Electron] Tray (0) | 2020.09.01 |
|---|---|
| [Electron] Global Shortcut (0) | 2020.09.01 |
| [Electron] Menu (0) | 2020.09.01 |
| [Electron] IPC (Inter Process Communication) (0) | 2020.09.01 |
| [Electron] BrowserWindow (0) | 2020.08.31 |
댓글