채팅 프로그램 - 2

React 채팅 프로젝트를 Electron 데스크톱 앱으로 실행

React와 Vite로 만든 채팅 프로젝트를 Electron으로 감싸 데스크톱 창에서 실행해 봤다.

프론트엔드 폴더에서 Electron을 설치했다.

npm install -D electron

package.json에는 진입점과 실행 명령을 추가했다. 기존 스크립트는 그대로 유지했다.

{
  "main": "electron/main.cjs",
  "scripts": {
    "electron": "electron ."
  }
}

main.cjs 파일을 생성했다.

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

function createWindow() {
  const window = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      sandbox: true,
    },
  })

  window.loadURL('http://localhost:5173')
}

app.whenReady().then(() => {
  Menu.setApplicationMenu(null)
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

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

Vite 개발 서버를 연 후 npm run electron를 터미널에 입력해서 프로그램을 실행했다.

결과물

디스코드처럼 프로그램으로 실행되고, 로컬에서 테스트 했을 때 정상적으로 작동한다.

(디스코드도 일렉트론을 사용한다)

서버 배포 후 자동 업데이트를 구현해보고 싶지만 남아있는 서버가 없다.

방식은 깃허브 릴리즈 버전을 확인해서 버전이 다를 시 업데이트 되게 할 수 있을 것 같다.

실행파일

설치파일