Electron 시작하기

init

npx create-react-app appname --template typescript

electron tools

• Electron-is-dev: 개발환경인지 빌드한 프로덕션환경인지 확인
• Electron: 일렉트론
• Electron-builder: 일렉트론을 실제 프로덕션 버전으로 빌드하기 위해 사용
• concurrently: 동시에 여러 명령어를 사용하기 위해 사용
• cross-env: 프로그램을 CLI활경에서 실행시킬 때 os에 관계 없이 환경변수를 설정할 수 있도록 하기 위해 사용
• wait-on: HTTP 자원, PORT, FILE 등이 활성화 될 때 까지 기다려주는 cross platfrom

npm i electron-is-dev
npm i electron electron-builder concurrently cross-env wait-on typescript --save-dev

src/electron.ts 생성

import { app, BrowserWindow } from 'electron';
import * as isDev from 'electron-is-dev';
import * as path from 'path';

let mainWindow: BrowserWindow;

const createWindow = () => {
  mainWindow = new BrowserWindow({
    width: 900,
    height: 680,
    center: true,
    kiosk: !isDev,
    resizable: true,
    fullscreen: false,
    fullscreenable: true,
    webPreferences: {
      // node환경처럼 사용하기
      nodeIntegration: true,
      // 개발자도구
      devTools: isDev,
    },
  });

  // production에서는 패키지 내부 리소스에 접근.
  // 개발 중에는 개발 도구에서 호스팅하는 주소에서 로드.
  mainWindow.loadURL(isDev ? '<http://localhost:3000>' : `file://${path.join(__dirname, '../build/index.html')}`);

  if (isDev) {
    mainWindow.webContents.openDevTools({ mode: 'detach' });
  }

  mainWindow.setResizable(true);

  // Emitted when the window is closed.
  mainWindow.on('closed', () => (mainWindow = undefined!));
  mainWindow.focus();
};

// 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', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

package.json 파일 수정

{
  ...
  "main": "src/electron.js",
  "scripts": {
    "react-start": "react-scripts start",
    "react-build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start": "tsc ./src/electron.ts && concurrently \\"cross-env BROWSER=none npm run react-start\\" \\"wait-on <http://localhost:3000> && electron .\\"",
    "build": "npm run react-build && electron-builder",
    "release": "npm run react-build && electron-builder --publish=always",
    "lint": "eslint './src**/*.{ts,tsx}'"
  },
  ...
}