Create React App
npx create-react-app -template typescript first-electron-app
cd first-electron-app
Linux Package 설치
sudo apt install libnss3-dev libgdk-pixbuf2.0-dev libgtk-3-dev libxss-dev libasound2 libgconf-2-4 libatk1.0-0 -y
Electron 설치
npm install -D electron
Electron 파일 생성
mkdir electron && code electron/main.ts
import { app, BrowserWindow } from "electron"
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
})
win.loadURL("http://localhost:3000")
}
app.whenReady().then(() => {
createWindow()
})
Package.json
{
"main": "electron/main.js", // 추가
"name": "second-electron-app",
"version": "0.1.0",
"private": true,
"dependencies": {
...생략
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"react-electron": "BROWSER=none npm run start", // 추가
"electron": "tsc --project electron.tsconfig.json && electron ." //추가
},
"eslintConfig": {
...생략
},
"browserslist": {
...생략
},
"devDependencies": {
"electron": "^26.0.0"
}
}
electron.tsconfig.json 파일 추가
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true
},
"include": ["electron"]
}
실행
npm run react-electron
npm run electron

참고
즐겁게 읽었습니다. 유용한 정보 감사합니다.