[Electron] Electron + React(vite) 프로젝트 한방에 띄우기

1.node설치

우선 node.js가 설치되어있어야 한다 설치가 안되어 있다면 아래 블로그를 참고하여 설치하고 오자

https://deahan.tistory.com/413

[React] 272샘의 React1 (Node.Js설치)

 

참고로 본인은 node버전이 낮아 설치도중 오류가 발생해 24.14.1 LTS 버전을 사용했다.

아래 명령가 안먹힌다면 nvm을 설치안해서 그러니 위에 블로그를 참고하여 설치하고 오자 

#nvm 설치기준 
#설치 가능한 노드버전 모두보기
nvm ls available 
#원하는 노드 버전 설치 ex) nvm install {node버전}
nvm install 24.14.1
#설치된 노드 버전들 확인
nvm ls
#노드 버전들중 원하는 노드 사용하기 ex) use {노드 버전}
use 24.14.1

 

2. react설치

react 개발 환경 구축에는 facebook에서 만들어준 create-react-app (보통 CRA라 부름) 이 있고

vue.js를 만든 사람이 만든 vite란 것이 있는데 

CRA보다 vite가 훨씬 편하고 빠르다. facebook에서도 vite를 사용한다고 한다. 

그런 이유로 CRA말고 vite를 사용하여 설치해본다.

  #react vite설치
  npm create vite@latest

 

D:\MinwooTool\practice\electronApplication>npm create vite@latest

> npx
> create-vite

│
◇  Project name:
│  electron <--- 프로젝트 이름 설정(나는 electron이지만 마음대로 설정가능)
│
◇  Select a framework:
│  React <--- 리액트 선택
│
◇  Select a variant:
│  TypeScript <--- TypeScript선택
│
◇  Install with npm and start now?
│  Yes <--- 설치 및 실행 아주 예스
│
◇  Scaffolding project in D:\MinwooTool\practice\electronApplication\electron...
│
◇  Installing dependencies with npm...

added 172 packages, and audited 173 packages in 10s

49 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
│
◇  Starting dev server...

> electron@0.0.0 dev
> vite


  VITE v8.0.3  ready in 866 ms

  ➜  Local:   http://localhost:5173/ <--- Ctrl + 클릭
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

 

바로 실행 yes를 안하면 위에 처럼 안뜨고 마지막에 아래처럼 뜬다 그럼 아래 명령어 그대로 입력해주자

  cd electron
  npm install
  npm run dev

 

 

vscode왼쪽에 electron프로젝트 생성과 함께 정상적으로 화면이 뜬걸 볼 수 있다.

이렇게 잘 작동하는지 확인한후 리액트를 종료 

#리액트 종료 명령어
Ctrl + C

 

 

생성된 electron 패키지로 이동

cd electron

 

프로젝트에 일렉트론 패키지를 추가한다.

#Electron 설치 명령어 아래 두 명령어중 선택
#yarn add --dev electron <-- 이것을 사용한다면 아래 명령어에서 모두 npm대신 yarn사용
npm install electron --save-dev  <--난 아래 명령어 사용

package.json에 electron 관련 설정을 추가한다.

{ ... 
  "main": "src/main.js", 
  ... "
  scripts": { 
       ... 
       "electron": "electron ." 
       } 
  ... 
}

{

  "name": "electron",

  "private": true,

  "version": "0.0.0",

  "type": "module", < ---- 한줄 삭제

  "main": "src/main.js",  <---- 추가

  "scripts": {

    "dev": "vite",

    "build": "tsc -b && vite build",

    "lint": "eslint .",

    "preview": "vite preview",

    "electron": "electron ."  <---- 추가

  },

 

이제 src 폴더 밑에 main.js를 만든다.

 

여기서 react 화면을 electron 에서 보여주기 위해 아래 코드를 복붙

win.loadFile을 win.loadURL("http://localhost:5173/") 으로 변경한다.

//main.js
const { app, BrowserWindow } = require('electron') 
const path = require('path') 
function createWindow () { 
  const win = new BrowserWindow({ 
    width: 800, 
    height: 600, 
    webPreferences: { 
      nodeIntegration: false,
      contextIsolation : true
    } 
  }) 
  win.loadURL("http://localhost:5173/")
} 
app.whenReady().then(() => { 
  createWindow() 
}) 
app.on('window-all-closed', function () { 
  app.quit() 
})

 

Electron과  React를 동시에 실행하기  위해 concurrently wait-on 패키지를 추가한다.

concurrently  : 일렉트론과 리액트 프로세스를 동시에 실행하기 위해사용

wait-on : 프로세스 동시 수행시 한개의 프로세스가 완료되기를 기다리다 완료된 후 다음 프로세스를 수행하게 만들어 준다.

#설치 명령어
npm install concurrently wait-on --save-dev

이후 pakage.json 스크립트를 수정한다.

 

start 스크립트 실행시 concurrently를 사용해 react와 electron을 같이 시작하게 한다.electron 스크립트는 react가 완료되길 기다린 후 실행한다.

  "scripts": {

    "start": "concurrently \"npm run dev\" \"npm run electron\"",

    "dev": "vite",

    "build": "tsc -b && vite build",

    "lint": "eslint .",

    "preview": "vite preview",

    "electron": "wait-on http://localhost:5173 && electron ."

  },

이후 프로젝트를 실행한다.

#프로젝트 실행
npm start

 

이때 만약 브라우저 창이 뜨고 electron이 실행된다면 브라우저 창은 필요없기 때문에 뜨지 않고록 환경 설정을 한다.

루트 폴터에 .env 파일을 만들고 다음 내용을 추가한다. 브라우저를 띄우지 않겠다는 설정이다.

BROWSER=none

이렇게 잘 떳으면 텍스트 변경후 바로 변경되는지 확인한다.

이렇게 켜둔상태에서 

App.tsx 파일의 아래 코드를

<h1>Get started</h1>

 

아래 코드로 변경한다.

<h1>Hello Minux</h1>

 

이후 파일을 저장하면 아래와 같이 hmr update /수정파일 경로.tsx 가 보인다.

소스 변경시 자동 반영되는 것을 "hot deploy" 라고 한다.

 

 

끝이다... 

이렇게 기본만 구축 해놔도 요즘은  AI를 이용하면 데스크탑 프로그램 밥한공기 뚝딱이다.

 

---

번외

프로그램 종료할때 react는 계속 살아있다... 그냥 거슬리고 기분이 찝찝하다.

react도 같이 종료되도록 설정하자

package.json 파일을 열어 start 부분에 -k옵션을 추가하자

 -k : 프로세스중 하나만 죽어도 전부 kill!!!

  "scripts": {

    "start": "concurrently -k \"npm run dev\" \"npm run electron\"",

    "dev": "vite",

    "build": "tsc -b && vite build",

    "lint": "eslint .",

    "preview": "vite preview",

    "electron": "wait-on http://localhost:5173 && electron ."

  },

 

이제 종료해보면 전부 다같이 꺼진다.

 

 

아래는 만든 프로젝트를 멋지게 만들었으면 빌드하고 배포까지 해보는 과정이다.

시간이 된다면 내가 만든 프로젝트를 배포하여 친구들에게 자랑해보자

https://deahan.tistory.com/487

[Electron] React + vite + typescript + 일렉트론 배포하기(build)