[electron] ELECTRON + React.js + Vite basic 기본 세팅

BIG

만들어보고 싶은 간단한 프로그램이 생각나서 처음에는 C#으로 WPF나 Winform으로 해볼까 싶다가도

일렉트론이 불현듯 떠올라서 일렉트론으로 해볼까 한다.

아무래도 일렉트론으로 하면 macOS에서도 사용하기 용이하니 좀 더 좋은 선택이었지 않나 싶다.

일렉트론은 쉽게 말하면 웹앱..? 앱웹...? 같은 느낌이다.

결국 UI는 React.js로 사용을 하고 해당 React.js 화면을 일렉트론 창 위에 그리는 것일 뿐....!

암튼 시작해보자..

설치

빈 폴더를 하나 만든다.

처음은 vite+react.js를 만드는과정과 똑같다. 난 그냥 javascript로 해버린다.

npm create vite@latest electronapp -- --template react

cd electronapp

npm install

그러면 리액트 vite 앱이 생성이 되었고 이 위에 electron을 설치해준다.

npm install electron electron_builder

npm install concurrently cross-env

일렉트론의 경우 react와 electron을 동시에 실행시켜야 하기 때문에 concurrently가 필요한 것.

폴더구조는 다음과 같다.

src 밑에 electron 폴더를 만들어주고 main.mjs, preload.js 를 작성해준다.

package.json

으로 가서 다음과 같이 바꾼다.

{
  "name": "movieapp",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "concurrently \"vite\" \"cross-env BROWSER=none electron src/electron/main.mjs\"",
    "start": "electron src/electron/main.mjs",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.21.0",
    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
    "@vitejs/plugin-react": "^4.3.4",
    "concurrently": "^9.1.2",
    "cross-env": "^7.0.3",
    "electron": "^35.0.0",
    "electron-builder": "^25.1.8",
    "eslint": "^9.21.0",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^15.15.0",
    "vite": "^6.2.0"
  }
}

경로에 주의해야한다.

vite.conifg.js 는 다음과 같다.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  },
  build: {
    rollupOptions: {
      external: ['electron'],
    },
  },
});

main.mjs

import { app, BrowserWindow } from 'electron';
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 700,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      enableRemoteModule: false,
    },
  });

  mainWindow.loadURL('http://localhost:3000');
}

app.on('ready', createWindow);

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

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

mjs인 이유는 일반 js로 해버리면 ES모듈 에러가 나게 된다.

preload.js

window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector);
      if (element) element.innerText = text;
    };
  
    for (const dependency of ['chrome', 'node', 'electron']) {
      replaceText(`${dependency}-version`, process.versions[dependency]);
    }
  });

npm run dev로 실행시켜보자