[Electron] Electron + React 연동하기

1. React에 electron 적용하기

https://2ssue.github.io/programming/electron-react/

#create-react-app후 electron 집어넣기
npm init
npm install create-react-app --save
npx create-react-app {project_name}
cd {project_name}
npm install electron --save-dev

 

디렉토리 구조

{project_name}
├── public          # 정적 파일. react를 사용하기 때문에 특별히 변경할 내용은 없다.
├── src             # javascript 파일. react routing, electron로딩 등의 작업을 진행.
│   ├── App.js
│   ├── index.js
│   ├── index.css
│   └── ...         # 이 외 파일은 삭제해도 무방
├── package.json
└── package-lock.json

electron 실행 파일 추가

• /src/electron-starter.js
• electron-quick-start의 main.js 복사 붙여넣기

// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// 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.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    // 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 (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// 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.

mainWindow.loadFile()

⇒mainWindow.loadURL('http://localhost:3000')변경

package.json 변경 및 추가

• "main": "src/electron-starter.js"를 추가
• script에 "electron": "electron ."을 추가

{
  "name": "electron-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "electron": "^7.0.1",
    "electron-builder": "^22.1.0",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-scripts": "3.2.0",
  },
  **"main": "src/electron-starter.js",**
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    
    "electron": "electron ." //여기 추가
  }
}

react 서버 활성화

npm start

electron 앱 실행

npm run electron

2. Electron에 react 적용하기

https://ohrora-developer.tistory.com/4

electron create app

npx create-electron-app electron-app
cd electron-app 

npm 패키지 설치

npm install

electron 실행

npm start

react 프로젝트를 electron에 설치하기

npx create-react-app react-electron

electron 패키지 추가

npm add --dev electron

Electron 실행 스크립트 추가하기

• electron package.json 추가

"scripts": {
	....,
	"electron": "electron ."
},

Electron Entry point 스크립트 추가하기

• electron package.json root

"main": "src/main.js",

main.js 추가

• src/main.js 파일을 생성
• https://github.com/electron/electron-quick-start/blob/master/main.js 복사
• win.loadFile(’index.html’) 부분을 아래와 같이 변경

win.loadURL('http://localhost:3000')

Reference

자습서: React 시작하기 - React

Building an Electron application with create-react-app