初めてのElectron+React+DevContainer【開発環境編】

Electron の開発環境を作ってみた

結論

下記のリポジトリを参照していただければ、動く環境になっています。
https://github.com/aismszy/electron

前提条件

• VSCode の DevContaeinr を利用しています
• https://learn.microsoft.com/ja-jp/windows/wsl/tutorials/gui-apps こちらのサイトからGUIアプリの設定をしてください。
• 初めてなので大目に見てください。

DevContainer の準備

こちらから

Node.js & Typescript を選択します。

devcontainer.json が作成されるので、postCreateCommand にコマンドを追加します。
※こちらGUIアプリを動かすために必要なライブラリのようです。

"postCreateCommand": "sudo apt update && sudo apt -y install libnss3-dev libgdk-pixbuf2.0-dev libgtk-3-dev libxss-dev libasound2",

全体はこちらです。

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
{
	"name": "Node.js & TypeScript",
	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",

	// Features to add to the dev container. More info: https://containers.dev/features.
	// "features": {},

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],

	// Use 'postCreateCommand' to run commands after the container is created.
	"postCreateCommand": "sudo apt update && sudo apt -y install libnss3-dev libgdk-pixbuf2.0-dev libgtk-3-dev libxss-dev libasound2",

	// Configure tool-specific properties.
	// "customizations": {},

	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
	// "remoteUser": "root"
}

準備は終わったので、コンテナを立ち上げましょう。

Electron のテンプレート準備

立ち上げた devContainer 環境で下記コマンドを叩いてください。

npm create electron-webpack

色々聞かれるので、自分の使いたい通りに選択してください。

ソースが履かれるので準備完了です。

立ち上げてみよう

このような構成になっているかと思います。
自分の画像だと electron フォルダの中で下記コマンドを実行します。

yarn dev

Counter のアプリが動けば成功です。

※画像はResetボタンを追加していますので、無視してください。

Windows の exe を作成する方法

devcontainer.json の postCreateCommand を追記する

- "postCreateCommand": "sudo apt update && sudo apt -y install libnss3-dev libgdk-pixbuf2.0-dev libgtk-3-dev libxss-dev libasound2",
+ "postCreateCommand": "sudo dpkg --add-architecture i386 && sudo apt update && sudo apt -y install libnss3-dev libgdk-pixbuf2.0-dev libgtk-3-dev libxss-dev libasound2 wine64 wine32",

package.json に 下記を追加

"build:win": "electron-packager . --platform=win32 --arch=x64 --overwrite"

下記コマンドで作成

yarn build:win

日本語フォント導入

- "postCreateCommand": "sudo dpkg --add-architecture i386 && sudo apt update && sudo apt -y install libnss3-dev libgdk-pixbuf2.0-dev libgtk-3-dev libxss-dev libasound2 wine64 wine32",
+ "postCreateCommand": "sudo dpkg --add-architecture i386 && sudo apt update && sudo apt -y install libnss3-dev libgdk-pixbuf2.0-dev libgtk-3-dev libxss-dev libasound2 wine64 wine32 fonts-takao",