Zenn
😀

WSL2+Docker上でelectron-vite+biome+shadcn/ui

に公開
Docker
Electron
Vite
tech
  • 前提
    • 環境構築であれこれしていたので、作業メモを書き落としする
  • 環境
    • Windows 11
      • WSL2
      • Docker Desktop on Windows
      • VcXsrv
  • 全体手順
    1. Xサーバを準備する
    2. Dockerコンテナを準備する
    3. electron-viteをセットアップする
    4. biome+shadcn/uiをセットアップする
  • Xサーバを準備する
    • electronは同梱したChromiumを駆動にネイティブアプリを生成してくれる
    • ネイティブアプリのレンダリングをするため、コンテナ上アプリを描画するXサーバの準備が必要になるため、VcXsrvを用意する
    • 手順
      • SourceForgeからダウンロード
      • インストーラーが落ちるのでインストール
      • 起動
        • Multiple Window → ✅
        • Display Number → 0
        • Disable display control → ✅
          • セキュリティ上よろしく無いが、開発環境用なので若干はファジーに。そんな設定がこの後ももうちょっとある
  • Dockerコンテナを準備する

    • electronが依存しているライブラリがあるので、事前に apt install する必要がある

    • Dockerfile

      FROM node:20-slim

ENV DISPLAY=${ホストマシンのIPアドレス}:0.0

RUN apt update && \
  apt install -y \
  libgtk-3-0 \
  libnss3 \
  libxss1 \
  libasound2 \
  libdrm2 \
  libgbm-dev \
  libatk-bridge2.0-0 \
  libatk1.0-0 \
  libpangocairo-1.0-0 \
  libxcomposite1 \
  libxcursor1 \
  libxi6 \
  libxtst6 \
  libxrandr2 \
  xvfb \
  && rm -rf /var/lib/apt/lists/*

RUN npm install -g npm
      • これをVSCodeのDevContainer拡張で起動する
      • 補足
        • rm -rf /var/lib/apt/lists/* について
          • apt update 時に取得したリポジトリのパッケージ情報が保存されている
          • 容量的に無駄なので削除
  • electron-viteをセットアップする
    • Viteベースのテンプレートが無いかなと探したところelectron-viteがあった
    • 基本はGetting Startedの通り進めれば良いが、一部注意がある
      • デフォルトのままでは Running as root without --no-sandbox is not supported. を食らうので、 scripts にある dev 箇所を electron-vite dev -- --no-sandbox に修正
      • 前段で apt install したライブラリが欠落していると、エラー無くElectronが起動しない（Electronアプリが初期化されない）。もしその様な事象が発生した場合は前段のライブラリがきちんとインストールされているか確認すること
  • biome+shadcn/uiをセットアップする
    • biome
      • こちらに沿って進めれば良い
      • electron-viteは事前にESLintとPrettierが準備されていたので、これをbiomeに移行した上でESLintとPrettierの依存関係は削除する
    • shadcn/ui

      • Tailwindのセットアップも一緒にマニュアルで進める

        • フロントエンド側が src/renderer の下にあるので設定値は一部気にしないといけない

          • tsconfig.web.json で @ エイリアスの設定があるので、そこは src/renderer/src/* にする必要がある

            {
  "extends": "@electron-toolkit/tsconfig/tsconfig.web.json",
  "include": [
    "src/renderer/src/env.d.ts",
    "src/renderer/src/**/*",
    "src/renderer/src/**/*.tsx",
    "src/preload/*.d.ts"
  ],
  "compilerOptions": {
    "composite": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/renderer/src/*"
      ]
    }
  }
}

          • Vite側もエイリアス解釈をバンドル時にしてあげる必要があるので　electron.vite.config.ts にも下記の設定をしてあげる

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

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

      • src/renderer/src/components/ui の下にコンポーネントたちが入った上でレンダリングも出来ればOK

Discussion