[mac] electron quick start tutorial

electron Quick start 따라해보기

Great.Bean

Published in

Red.Bean

9 min readMar 16, 2017

실습환경

Mac Sierra 10.12.3
Chrome 56.0.2924.87

Electron 메인 페이지에서 중앙부 상단의 Docs로 들어간다

세부메뉴 중 Quick Start로 들어간다

Quick start를 해보기 위해서는 Node.js(3월 16일 현재 v6.10.0 LTS)가 필요하다

Node.js가 설치 안되어있다면 먼저 설치하자

나는 Homebrew를 사용중이어서 brew 명령어를 썼다

brew update
brew install node
node -v

설치가 잘 끝났다면 node -v 했을 때 설치된 NodeJS의 버전이 출력된다

본격적으로 Electron Quick Start를 시작해보자

Quick Start를 해보기 위해서는 다음과 같인 파일이 필요하다고 설명하고있다.

your-app/
├── package.json
├── main.js
└── index.html

your-app에 해당하는 test01 디렉토리를 만들었다
package.json , main.js , index.html 파일을 만들었다

3. package.json 파일에 입력해야 할 내용들이다

{
  "name"    : "your-app(디렉토리 경로)",
  "version" : "0.1.0",
  "main"    : "main.js"
}

Note: If the main field is not present in package.json, Electron will attempt to load an index.js.

만약 main 필드에 package.json이 없다면 Electron이 index.js를 찾는다고 되어있다

4. package.json에 입력해야 할 내용들이다

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

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // Open the DevTools.
  win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

이 내용을 그대로 입력하면 결과화면에서 브라우저 개발자 도구가 같이 열린다. 개발자도구를 보기 싫다면 win.webContents.openDevTools() 을 주석처리하자

5. index.html에 입력해야 할 내용들이다

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

6. package.json 파일이 들어있는 곳에서 electron . 을 실행하자

결과화면을 만날수 있다

만약 https://github.com/electron/electron/issues/7915에서 보이는것처럼

Error: EACCES: permission denied, link '/usr/local/lib/node_modules/electron/electron-tmp-download-82077-1478703334824/electron-v1.4.5-darwin-x64.zip' -> '/Users/USERNAME/.electron/electron-v1.4.5-darwin-x64.zip'
    at Error (native)
npm ERR! Darwin 16.3.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "electron" "-g"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE

npm ERR! electron@1.4.5 postinstall: `node install.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the electron@1.4.5 postinstall script 'node install.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the electron package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node install.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs electron
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls electron
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/USERNAME/npm-debug.log

이런 에러가 발생한다면

sudo npm install -g electron — unsafe-perm=true — allow-root

위의 명령어를 입력해주면 정상설치된다. 이게 귀찮다면 로컬에 설치된 Electron을 이용할 수도 있다

./node_modules/.bin/electron .

[mac] electron quick start tutorial

electron Quick start 따라해보기

실습환경

Written by Great.Bean