electron + react 프로젝트 셋팅

create

npx create-react-app fmap

electron 추가

cd fmap
yarn add --dev electron

실행 스크립트 추가 (package.json), 일렉트론 진입점 설정(src/StartUp.js)

{
  "name": "fmap",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "electron": "electron .",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "electron": "^21.3.1"
  },
  "main": "src/StartUp.js"
}

일렉트론 진입점 (src/StartUp.js)

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

function createWindow () { 
  const win = new BrowserWindow({ 
    width: 1600, 
    height: 900, 
    webPreferences: { 
      nodeIntegration: true,
      contextIsolation : false
    }
  });
  win.loadURL("http://localhost:3000");
  win.webContents.openDevTools(); 
} 
app.whenReady().then(() => { 
  createWindow();
}) 
app.on('window-all-closed', function () { 
  if(process.platform !== 'darwin') {
    app.quit();
  }
});

일렉트론 앱을 실행할 때 로컬 노드 서버를 실행하기 위해 패키지 추가

yarn add --dev concurrently wait-on

설치한 concurrently, wait-on을 package.json에 추가

{
  "name": "fmap",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "electron": "electron .",
    "startup": "concurrently \"yarn react-scripts start\" \"yarn electron\" ",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "concurrently": "^7.6.0",
    "electron": "^21.3.1",
    "wait-on": "^6.0.1"
  },
  "main": "src/StartUp.js"
}

yarn startup 실행시 자동 실행하는 웹브라우저는 제외하도록 설정(.env)

BROWSER=none

yarn startup 실행

yarn startup