Macと Electron Forge + React + MUI でPCアプリを作る（その１）で作成したプロジェクトにReactを導入していきます。
$ npm install --save react react-dom $ npm install --save-dev @types/react @types/react-dom
tsconfig.json に React を使うため “jsx”: “react-jsx”, を追記します。
$ vim tsconfig.json
-----
{
"compilerOptions": {
"jsx": "react-jsx",
"target": "ESNext",
"module": "commonjs",
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"noImplicitAny": true,
"sourceMap": true,
"baseUrl": ".",
"outDir": "dist",
"moduleResolution": "node",
"resolveJsonModule": true
}
}
-----
:wq
./src 内にデフォルトのソースが入っていますが、メインプロセスと、レンダラープロセスの区別がつきやすいようにディレクトリ分けをしておきます。こちらを参考にさせていただきました。
(※2024/3/18追記 Viteで作ったプロジェクトは、index.htmlはsrcではなくrootに置かれるようです)
$ cd src $ mkdir main $ mv main.ts ./main $ mv preload.ts ./main $ mkdir renderer $ mv index.css ./renderer $ mv renderer.ts ./renderer/index.tsx
フォルダ構成を変更したので、関連設定を修正します。
forge.config.tsの以下の部分
build: [
{
// `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.
entry: ‘src/main/main.ts’,
config: ‘vite.main.config.ts’,
},
{
entry: ‘src/main/preload.ts’,
config: ‘vite.preload.config.ts’,
},
],
$ cd ../
$ vim forge.config.ts
-----
import type { ForgeConfig } from '@electron-forge/shared-types';
import { MakerSquirrel } from '@electron-forge/maker-squirrel';
import { MakerZIP } from '@electron-forge/maker-zip';
import { MakerDeb } from '@electron-forge/maker-deb';
import { MakerRpm } from '@electron-forge/maker-rpm';
import { VitePlugin } from '@electron-forge/plugin-vite';
import { FusesPlugin } from '@electron-forge/plugin-fuses';
import { FuseV1Options, FuseVersion } from '@electron/fuses';
const config: ForgeConfig = {
packagerConfig: {
asar: true,
},
rebuildConfig: {},
makers: [new MakerSquirrel({}), new MakerZIP({}, ['darwin']), new MakerRpm({}), new MakerDeb({})],
plugins: [
new VitePlugin({
// `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.
// If you are familiar with Vite configuration, it will look really familiar.
build: [
{
// `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.
entry: 'src/main/main.ts',
config: 'vite.main.config.ts',
},
{
entry: 'src/main/preload.ts',
config: 'vite.preload.config.ts',
},
],
renderer: [
{
name: 'main_window',
config: 'vite.renderer.config.ts',
},
],
}),
// Fuses are used to enable/disable various Electron functionality
// at package time, before code signing the application
new FusesPlugin({
version: FuseVersion.V1,
[FuseV1Options.RunAsNode]: false,
[FuseV1Options.EnableCookieEncryption]: true,
[FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
[FuseV1Options.EnableNodeCliInspectArguments]: false,
[FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
[FuseV1Options.OnlyLoadAppFromAsar]: true,
}),
],
};
-----
:wq
rendererの位置と名称が変わったので index.html を修正します。
% cd ~/electron.my-app/
% vim index.html
-----
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
</head>
<body>
<h1>💖 Hello World!</h1>
<p>Welcome to your Electron application.</p>
<script type="module" src="/src/renderer/index.tsx"></script>
</body>
</html>
-----
:wq
まだソース自体にReactを導入していませんが、念のためこの時点で起動することを確かめておきましょう。
$ npm start
次にソースをReact化(ベタ打ちのHello Worldを別コンポーネントにして呼び出す）していきます。
Macと Electron Forge + React + MUI でPCアプリを作る（その３）