[mac] electron quick start tutorial

electron Quick start 따라해보기

3월 16일 현재 브라우저 지원현황

실습환경

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
  1. your-app에 해당하는 test01 디렉토리를 만들었다
  2. 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 .
Show your support

Clapping shows how much you appreciated Great.Bean’s story.