Open12
Electron + TypeScript + React アプリ開発のセットアップ

このスクラップについて
このスクラップでは Electron + TypeScript + React を使ったデスクトップアプリケーション開発環境を整える過程を記録する。

Vite + TypeScript のセットアップ
コマンド
cd ~/workspace
pnpm dlx create-electron-app@latest my-electron-ts-react-app --template=vite-typescript

起動
コマンド
pnpm start
アプリが起動した

main.ts 警告が出るのでインストール
コマンド
pnpm i -D @types/electron-squirrel-startup

開発者ツールの非表示
main.ts で mainWindow.webContents.openDevTools();
をコメントアウトする。

React のインストール
pnpm install --save react react-dom
pnpm install --save-dev @types/react @types/react-dom

app.tsx の作成
コマンド
touch src/app.tsx
src/app.tsx
import React from 'react';
import { createRoot } from 'react-dom/client';
const root = createRoot(document.body);
root.render(<h2>Hello from React!</h2>);

renderer.ts の編集
renderer.ts
import './app';

起動
コマンド
pnpm start
React からの Hello に成功

tailwind の設定
ちょっとつまいづいたので明日またやろう。

参考になりそうなスクラップを見つけた

こちらのリポジトリも参考になりそう