Typescript 기반으로 React Electron App 시작하기.

먼저 기본적으로 node.js가 설치가 되어 있다는 가정으로 설명 합니다.

yarn이 설치 되어 있지 않다면 먼저 yarn을 설치해 줍니다.  yarn은 npm과 같은 node의 패키지 매니저 입니다.

$ npm install -g yarn

그리고, create-react-app을 통해서 타입스크립트 기반의 프로젝트를 생성해 줍니다.

$ npx create-react-app my-app-name --template typescript
$ cd my-app-name

위와 같이 명령어를 넣어 주면 타입스크립트 기반으로 react와 webpack 설정이 되어 있는 프로젝트가 설정 됩니다.

이제 Electron과 실행에 필요한 패키지를 설치해 줍니다. 아래 패키지들은 개발에서만 사용되는 패키지라서 --dev를 붙여 줬습니다.

$ yarn add --dev electron electron-builder concurrently wait-on cross-env

 

각 패키지의 역할은 아래와 같습니다.

• electron : Electron 기본 패키지
• electron-builder : electron을 원하는 플랫폼으로 빌드해 줍니다.
• concurrently : 한번에 여러개의 명령어를 실행할 수 있게 해 줍니다.
• wait-on : 특정 포트 또는 파일이 활성화 될 때까지 대기를 해 줍니다.
• cross-env : 시스템에 관계없이 환경변수 값을 설정할 수 있게 해 줍니다.

그리고 추가로 아래의 패키지를 설치해 줍니다.

$ yarn add electron-is-dev

 

electron-is-dev 패키지는 현재 환경이 개발 환경인지를 확인 해 주는 패키지 입니다. 이 파일을 별도로 설치한 이유는 앱 실행시 이 패키지를 통해서 실행 경로를 바꿔주기 위해서 입니다.

이게 public 폴더 안에 electron.js 파일을 아래와 같이 작성해 줍니다.

./public/electron.js

const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require("path");
const isDev = require("electron-is-dev");

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({ 
    width: 900, 
    height: 680,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      devTools: isDev,
    },
  });
  
  mainWindow.loadURL(
    isDev
      ? "http://localhost:3000"
      : `file://${path.join(__dirname, "../build/index.html")}`
  );
  
  if (isDev) {
    mainWindow.webContents.openDevTools({ mode: 'detach' });
  }
  
  mainWindow.setResizable(true);
  mainWindow.on('closed', () => (mainWindow = null));
  mainWindow.focus();
}

app.on("ready", createWindow);

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

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

소스의 가운데 쯤 isDev를 보시면 http와 file로 분기하는 걸 보실 수 있습니다.

개발 환경인 경우에는 아래 그림과 같이 Webpack을 통해서 빌드 된 화면에 Electron app에서 실행되게 됩니다.

이렇게 구성을 하게 되면 소스 파일을 수정하게 되면 앱을 새로 빌드하지 않고도 바로 고친 내용을 Electron 앱에서 실행이 되게 됩니다. 덕분에 빠른 속도로 개발이 가능해 집니다.

그리고 일반적인 빌드를 하게 되면 Webpack으로 묶인 React App 파일이 Electron App에 포함해서 실행 파일로 만들어 지게 됩니다.

그리고, BrowerWindow는 Electron 앱의 다양한 실행 형태를 지정하는 옵션을 가지고 있습니다. 상세한 옵션은 아래 주소를 참고 하세요.

www.electronjs.org/docs/api/browser-window

BrowserWindow | Electron

이제 마지막 과정으로 아래 내용을 package.json 파일에 추가해 줍니다.

  "author": "My name",
  "build": {
    "appId": "com.appId"
  },
  "main": "public/electron.js",
  "homepage": "./",
  "scripts": {
    "react-start": "react-scripts start",
    "react-build": "react-scripts build",
    "react-test": "react-scripts test",
    "react-eject": "react-scripts eject",
    "start": "concurrently \"cross-env NODE_ENV=development BROWSER=none yarn react-start\" \"wait-on http://localhost:3000 && electron .\"",
    "build": "yarn react-build && electron-builder",
    "release": "yarn react-build && electron-builder --publish=always"
  },

기존의 scripts 내용은 제거하고 위 내용을 넣어 주시면 됩니다.

여기서 main과 homepage는 꼭 넣어 줘야 빌드하고 나서 실행이 됩니다.

이제 설정을 모두 마쳤습니다. 그리고 아래와 같이 실행을 하게 되면 React App 윈도우가 뜨게 됩니다.

$ yarn start

그리고 실행 파일을 만들고 싶다면 아래와 같이 입력 하시면 됩니다.

$ yarn build

package.json 파일에 배포 설정이 되어 있다면 yarn release를 통해서 배포도 가능 합니다.