atom & electron

Um Electron zu nutzen benötigen wir npm, dieses wird bei nodejs mit installiert.

Als erstes erstellen wir ein neues Projekt mit npm init.

npm init
1

Danach erzeugen wir 2 Dateien, main.js und index.html. Die main.js muss folgendes beinhalten:

Datei: main.js

const {app, BrowserWindow} = require('electron');
let win;
function createWindow () {
    win = new BrowserWindow({width: 800, height: 600})
	win.loadURL(
	    url.format({
		    pathname: path.join(__dirname, 'index.html'),
			protocol: 'file:',
			slashes: true
		})
	);
	win.on('closed', () => {
	    win = null
	});
}
app.on('ready', createWindow);
}]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

die index.html kann so aussehen.

Datei: index.html

<html>
    <head>
        <meta charset="UTF-8">
		<title>Hello Electron!</title>
	</head>
	<body>
	    <h1>Hello Electron!</h1>
		<p>Ready</p>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10

Jetzt instalieren wir Electron mit npm install.

npm install electron --save-dev
1

Um die App zu starten benötigen wir noch folgende konfiguration. Dazu muss die package.json geändert werden.

"scripts":{
    "start": "electron main.js"
}
1
2
3

Jetzt können wir die App starten.

npm run start
1