[Electron] React + Typescript + Electron + WSL 2 (Ubuntu 22.04)

민수·2023년 8월 15일

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"]
}