본문 바로가기
프로그래밍/Node.js

Electron - Hello World!

by 꾸션 2019. 4. 19.

우선, electron 앱을 만들기 위해서는 npm 설치가 되어 있어야 합니다.

프로젝트 폴더를 하나 생성합니다. (예: C:\ElectronTest)

Node.js command prompt 를 실행 후 해당 디렉토리에서 아래의 작업을 수행하면 됩니다. (예: cd C:\ElectronTest)

 

1. package.json 파일 만들기

Node.js command prompt에서 아래 명령어를 실행합니다.

npm init

위 명령어 실행 후 나오는 물음에 대해서 모두 Enter키로 스킵합니다.

수정이 필요한 경우 "npm init"을 다시 실행하거나 "package.json"파일을 수동으로 수정할 수 있습니다.

 

 

2. package.json에서 scripts 수정

일반 텍스트 편집기롤 package.json파일을 열어 scripts부분을 "start": "electron ."로 수정합니다. 

{
  "name": "electrontest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "electron": "^4.1.4"
  },
  "devDependencies": {},
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC"
}

 

 

3. Electron 설치

Node.js command prompt에서 아래 명령어를 실행합니다.

npm install --save-dev electron

"package.json"파일에 devDependencies항목으로 electron이 추가된 것을 확인 할 수 있습니다.

 

 

4. index.js, index.html 파일 만들기

index.js

const { app, BrowserWindow } = require('electron')

let win = null

function createWindow () {
  // 브라우저 창을 생성합니다.
  win = new BrowserWindow({ width: 800, height: 600 })

  // index.html파일을 로드합니다.
  win.loadFile('index.html')
}

app.on('ready', createWindow)

 

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <center><h1>Hello World!</h1></center>
  </body>
</html>

 

 

5. 실행

Node.js command prompt에서 아래 명령어를 실행합니다.

npm start

 

&quot;Hello World!&quot;를 출력한 Electorn 실행 이미지

 

반응형

댓글