electron.js에 react.js 연동하기 - 초기 프로젝트 설치 과정

electron.js에 react.js를 연동해서 채팅앱을 만들고 싶어 초기 세팅을 진행해보았다. 

거두절미하고 과정 바로 시작.

 

 

1. Node.js와 npm 설치 및 새 프로젝트 폴더 생성

 

- electron.js 폴더가 위치하게 될 것이다. 나는 /electron.js라는 폴더를 만들었다.

 

 

 

2. /electron.js 디렉토리에 아래 명령어로 package.json 생성

npm init

 

 

 

3. 같은 디렉토리에서 아래 명령어로 electron 설치

npm install electron --save-dev

 

 

 

4. package.json에 아래처럼 적는다. main파일은 main.js가 될 것이다.

main.js는 electron.js에서 가장 근간이 되는 파일로 생명주기 흐름을 관리할 예정.

{
  "name": "electron_name",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "pack": "electron-packager . electron_name --platform=win32 --arch=x64"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^26.2.2",
    "electron-packager": "^17.1.2"
  }
}

 

 

 

5. main.js에서 다음과 같이 적는다: 

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  const startUrl = process.env.ELECTRON_START_URL || url.format({
        pathname: path.join(__dirname, '/react-app/build/index.html'),
        protocol: 'file:',
        slashes: true
  });
  mainWindow.loadURL(startUrl);

  mainWindow.on('closed', function () {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

 

 

 

6. 해당 디렉토리에서 react를 생성한다.

 

아래 명령어를 입력하면 자동으로 리액트와 관련된 폴더가 하나 생성된다. 리액트와 관련된 작업을 하기 위해서는 아래 만든 디렉토리로 한번 더 들어가야 한다.

npx create-react-app react-app

 

 

 

7. React 앱의 소스 코드를 실시간으로 수정하면서 Electron에서 바로 확인하려면 아래 과정대로 진행한다.

로컬 주소는 3000번을 쓰는 것으로 가정한다.

1. [REACT] 리액트 디렉토리인 react-app으로 이동 후 개발 서버 실행  
- cd react-app; npm start
2. [ELECTRON] 터미널 추가 후 electron.js 디렉토리에서 환경 변수를 설정하고 Electron을 실행  
- $env:ELECTRON_START_URL="http://localhost:3000"; npm start

 

 

 

8. 빌드를 위해서는 아래 과정을 진행한다.

1. [REACT] 리액트 디렉토리인 react-app으로 이동 후 빌드 명령어 실행, build 폴더에 결과물을 생성
- cd react-app; npm run build
2. [ELECTRON] package.json 파일의 scripts 섹션에 패키징용 스크립트 확인 및 Electron 앱 패키징
- npm run pack