この記事を作った動機

　最近以下の組み合わせでフロントエンドを簡易的に書くということをしていた。

  • Vite
  • React
  • TypeScript
  • Tailwind CSS
  • zustand

　それでとりあえず機能的な意味では最低限適当にとりあえず動くという意味ではできたので、気軽に使えるようにしたいと思い、HTTPサーバとか一時的に立てずに、すぐに使えるようにしたかったので、一つのバイナリとしてまとまっていると良いと思った。

　そこで色々試したところ、プロジェクト内にElectornプロジェクトを新規作成して、作ったコードをその中のRenderというフォルダ内にそのままコピーし、それをelectron-builderを使って各プラットフォーム向けに一つのバイナリとして作れそうだと調べてみて思った。それでいつものようにそれを実際にやって動くまでがめんどくさかったのでその記録を取る。

バイナリ完成までの試した手順

※ コマンド実行における作業ディレクトリはViteプロジェクトのルートとする。

Vite プロジェクトを用意する

プロジェクトの新規作成

npm create vite
# Need to install the following packages:
# create-vite@8.2.0
# Ok to proceed? (y) y
# 
# 
# > npx
# > "create-vite"
# 
# │
# ◇  Project name:
# │  createElectornAppTest
# │
# ◇  Package name:
# │  createelectornapptest
# │
# ◇  Select a framework:
# │  React
# │
# ◇  Select a variant:
# │  TypeScript
# │
# ◇  Use rolldown-vite (Experimental)?:
# │  No
# │
# ◇  Install with npm and start now?
# │  No
# │
# ◇  Scaffolding project in /home/username/work/createElectornAppTest...
# │
# └  Done. Now run:
# 
#   cd createElectornAppTest
#   npm install
#   npm run dev

ライブラリのインストール

npm install zustand
npm install tailwindcss @tailwindcss/vite
npm install # Command not found が出てきたとき

Tailwind CSS の設定

　以下を参考にして Tailwind CSS を機能するように設定する。

src/App.tsxの変更

import './App.css'

function App() {

  return (
    <>
      <h1>This is test project</h1>
      <p>This is test project. In order to confirm that create electron app binary from a vite project.</p>
    </>
  )
}

export default App

index.htmlの変更

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Create Electron App Test</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Electorn プロジェクトを Vite プロジェクト内に作成する

プロジェクトの新規作成

npm create @quick-start/electron@latest
# Need to install the following packages:
# @quick-start/create-electron@1.0.30
# Ok to proceed? (y) y
# 
# 
# > createelectornapptest@0.0.0 npx
# > "create-electron"
# 
# ✔ Project name: … createElectornAppTest
# ✔ Package name: … createelectornapptest
# ✔ Select a framework: › react
# ✔ Add TypeScript? … No / Yes
# ✔ Add Electron updater plugin? … No / Yes
# ✔ Enable Electron download mirror proxy? … No / Yes
# 
# Scaffolding project in /home/username/work/createElectornAppTest/createElectornAppTest...
# 
# Done. Now run:
# 
#   cd createElectornAppTest
#   npm install
#   npm run dev

ライブラリのインストール

npm install zustand
npm install tailwindcss @tailwindcss/vite
npm install # Command not found が出てきたとき

Tailwind CSS を設定する

createElectornAppTest/src/electron.vite.config.tsに、Tailwind CSS の設定を行う。

import { resolve } from 'path'
import { defineConfig } from 'electron-vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'


export default defineConfig({
  main: {},
  preload: {},
  renderer: {
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src')
      }
    },
    plugins: [react(),tailwindcss()]
  }
})

Vite プロジェクトの内容を Electron プロジェクトにコピーする

update.shを作成し、実行する。内容をコピーするだけでなく、以下の例では、Linux 向けにバイナリをビルドするように指定している。また、適宜ただコードの内容をコピーするだけでなく、Electron側のコードの修正が手動で必要である。

#!/bin/bash
cp -r ./src/* ./createElectornAppTest/src/renderer/src/
cd createElectornAppTest
npm run build:linux # :win :mac

ビルドされたバイナリを開く

./createElectornAppTest/dist/createelectornapptest-1.0.0.AppImage
Electron アプリバイナリとして、AppImageを起動した例

関係ありそうなもの

参考にしたサイトとか