electron

first 라는 프로젝트 github에서 가져오고.

npm init 을 실행해서 package.json 파일을 생성하고.

jinia@jin:~/Documents/GitHub$ cd first
jinia@jin:~/Documents/GitHub/first$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (first) startup
version: (1.0.0) 
description: Startup desktop app
entry point: (index.js) 
test command: 
git repository: (https://github.com/poscoict-arvrmr/first.git) 
keywords: 
author: poscoict
license: (ISC) 
About to write to /home/jinia/Documents/GitHub/first/package.json:

{
  "name": "startup",
  "version": "1.0.0",
  "description": "Startup desktop app",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/poscoict-arvrmr/first.git"
  },
  "author": "poscoict",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/poscoict-arvrmr/first/issues"
  },
  "homepage": "https://github.com/poscoict-arvrmr/first#readme"
}


Is this ok? (yes) yes
jinia@jin:~/Documents/GitHub/first$ 

npm install --save electron 실행해서 package.json에 electron을 추가하고..

jinia@jin:~/Documents/GitHub/first$ npm install --save electron

> electron@1.7.10 postinstall /home/jinia/Documents/GitHub/first/node_modules/electron
> node install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
+ electron@1.7.10
added 152 packages in 10.833s
jinia@jin:~/Documents/GitHub/first$ 

jinia@jin:~/Documents/GitHub/first$ cat package.json 
{
  "name": "startup",
  "version": "1.0.0",
  "description": "Startup desktop app",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/poscoict-arvrmr/first.git"
  },
  "author": "poscoict",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/poscoict-arvrmr/first/issues"
  },
  "homepage": "https://github.com/poscoict-arvrmr/first#readme",
  "dependencies": {
    "electron": "^1.7.10"
  }
}

package.json 파일의 script 부분을 수정할것.

{
  "name": "startup",
  "version": "1.0.0",
  "description": "Startup desktop app",
  "main": "index.js",
  "scripts": {
    "start": "electron ."
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/poscoict-arvrmr/first.git"
  },
  "author": "poscoict",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/poscoict-arvrmr/first/issues"
  },
  "homepage": "https://github.com/poscoict-arvrmr/first#readme",
  "dependencies": {
    "electron": "^1.7.10"
  }
}

그리고 index.js 파일과 mainWindow.html 파일을 생성하고

const electron = require('electron');
const url = require('url');
const path = require('path');

const {app, BrowserWindow} = electron;

let mainWindow;

// Listen for app to be ready
app.on('ready', function(){
    //Create new window
    mainWindow = new BrowserWindow({});
    //Load html into window
    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'mainWindow.html'),
        protocol:'file:',
        slashes:true
    }));
});

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>AR/VR First App</title>
    </head>
    <body>
        <h1>Welcome</h1>
    </body>
</html>

테스트를 해보면 된다.

jinia@jin:~/Documents/GitHub/first$ npm start

> startup@1.0.0 start /home/jinia/Documents/GitHub/first
> electron .

참고 : https://www.youtube.com/watch?v=kN1Czs0m1SU
ShoppingList 앱을 만드는데.. window용 .exe 파일을 만들어서 publish까지 진행됨. 동영상 3:27 부터 따라하면 된다.