Electron + Remix vite SSRのボイラープレートを作った（no SSRも）
Introduction
ElectronでのアプリケーションをRemixでWebアプリケーションを作るみたいで作れるよというボイラープレートです。
できるだけ最小限の構成になるようにベタに書いてあります。また意図的にファイルもできるだけ分けずに書いてあります。要らない部分は自分で削って使うことを想定してます。
Electron + remix vite SSR
こんな感じでloaderやaction内でelectronの APIが利用できます。
export const loader = async () => {
const { app } = await importElectron();
return {
version: app.getVersion(),
userData: app.getPath("userData"),
};
};
loaderはメインプロセスで実行されるので値が取得できます。IPC (In-process communication)を意識せずに書けるのが利点です。
Without SSR through tRPC
もしかしたらSSRしたくないときもあるかもしれません。renderer部分はSPAにして別の環境にデプロイしたいとか。
そんなときのためにメインプロセスとの通信をtRPCを介して行う方法も実装してみました。
export default function Index() {
const getPath = ipcTRPC.ipc.getPath.useQuery("home");
const settins = ipcTRPC.ipc.loginItemSettings.useQuery();
return (
<>
<div>getPath: {getPath.data}</div>
<div>loginItemSettings.status: {settins.data?.status}</div>
<App />
</>
);
}
余談
Electronで自作のnote takingアプリをちまちま作っている。
これの開発の遍歴はNuxt.jsで始まり、その後Next.js、electron-viteと移ってきている。
でtauriが2.0になってそろそろ使えるのかと思って素振りしてみたときのスクラップがこれ。各種moduleを最新に保とうとアップデートしようとすると動かないmoduleが増えてきてelectron-viteをメインに据えた開発は難しくなってきたところだったので、式年遷宮よろしくtauri 2.0に移行できないかと思っていた。
結論から言うと、tauri 2.0はまだ自分が欲しい機能が足りない、もしくは多くの調査や実装が必要そうということで見送った。
ということでイチからvite (+ rollup)の挙動を理解すべくボイラープレートを書いたらなんとか動いたというところ。そしてどうせなら最近好きなframeworkであるRemixを使ってみようということで作ったのがこのボイラープレート。
Discussion