node.js, npm 설치
설치 후 node -v, npm -v 명령어로 확인
Electron 설치 및 프로젝트 생성
프로젝트 생성
1
2
3
mkdir my-electron-project
cd my-electron-project
npm init
electron 패키지 설치
1
npm install --save-dev electron
package.json 편집
1
2
3
4
5
{
"scripts": {
"start": "electron ."
}
}
scripts에 해당 내용을 추가
index.js 추가
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
index.html 추가
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>My First Electron<title>
</head>
<body>
<h1>Test Page</h1>
</body>
</html>
실행 및 결과확인
1
npm start
프로젝트 빌드
Electron Forge 패키지 설치
1
2
npm install --save-dev @electron-forge/cli
npx electron-forge import
또는
1
2
yarn add --dev @electron-forge/cli
yarn run electron-forge import
빌드
1
npm run make
실행 파일은 out/프로젝트명-win32-x64/에서 확인할 수 있다.