目次
はじめに
案件でパソコンにインストールされたフォントを使って、帳票出力をすることになりました。
.net は分からないけど、Electronなら趣味での開発経験があるので、サクッとElectronで作っちゃおうかなと思いました。
ちょうど思い立った時に、本屋で見かけた↓の書籍
[React+Electronで作る デスクトップアプリ開発入門]
普段はVue.jsで作るけど、たまにはReactでも使ってみるかと、参考に進めました。
環境
この記事は、以下の管理人の検証環境にて記事にしています。
| OS | Windows11 |
| node.js | 18.14.0 |
package.json
{
"name": "hello",
"version": "0.1.0",
"private": true,
"main": "public/electron.js",
"homepage": ".",
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"electron-is-dev": "^2.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"react-start": "cross-env BROWSER=none react-scripts start",
"react-build": "react-scripts build",
"react-test": "react-scripts test",
"react-eject": "react-scripts eject",
"start-electron": "wait-on http://localhost:3000 && electron .",
"electron-build": "electron-builder",
"electron-start": "run-p react-start start-electron",
"start": "react-scripts start",
"build": "run-s react-build electron-build"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"cross-env": "^7.0.3",
"electron": "^22.2.0",
"electron-builder": "^23.6.0",
"npm-run-all": "^4.1.5",
"wait-on": "^7.0.1"
}
}
現象
一番最初の Section-006 で
npm run electron-start
をしてもElectronが立ち上がらない。
ログを見ても特にエラーは無さそう。
npm run electron-start > [email protected] electron-start > run-p react-start start-electron > [email protected] start-electron > wait-on http://localhost:3000 && electron . > [email protected] react-start > cross-env BROWSER=none react-scripts start Starting the development server... Compiled successfully! You can now view hello in the browser. Local: http://localhost:3000 On Your Network: http://192.168.10.141:3000 Note that the development build is not optimized. To create a production build, use npm run build. webpack compiled successfully
package.json の start-electron を
"start-electron": "electron .",
に書き換えてやると動く。
react-start を単体で起動すると動く。
$ npm run react-start > [email protected] react-start > cross-env BROWSER=none react-scripts start Starting the development server... Compiled successfully! You can now view hello in the browser. Local: http://localhost:3000 On Your Network: http://192.168.10.141:3000 Note that the development build is not optimized. To create a production build, use npm run build. webpack compiled successfully
start-electron に -v 追加すると
"start-electron": "wait-on -v http://localhost:3000 && electron .",
永遠とエラーを吐き続ける。
以上からwait-on が原因と思われる。
解決策
検索してみると、下記のようなサイトにたどり着く。
https://stackoverflow.com/questions/59271634/react-npm-start-windows-cannot-find-localhost
どうもWindows Shellだと問題が起きるっぽい？
解決策が提示されていて、
react-scripts 3.2.0package.json に切り替えるnpm startWSL 以外のもの (Powershell など) から実行するopen問題をreact修正するまで待つ
どれも、うーんだなあ。。。
苦肉の策で、http://localhost:3000 を使わずに npm run react-start した時に表示される
$ npm run react-start > [email protected] react-start > cross-env BROWSER=none react-scripts start Starting the development server... Compiled successfully! You can now view hello in the browser. Local: http://localhost:3000 On Your Network: http://192.168.10.141:3000 Note that the development build is not optimized. To create a production build, use npm run build. webpack compiled successfully
http://192.168.10.141:3000 を start-electron に設定する。
"start-electron": "wait-on http://192.168.10.141:3000 && electron .",
これだと起動しますね。
じゃあ、ひとまずこれで解決ということで！（力技
注意ポイント
http://192.168.10.141 は、何かのタイミングで数字が変わるので、あくまで検証段階だけと思った方が良いです。
npm run build
した後のアプリは、http://localhost:3000 でも問題ありませんでした。
さいごに
今回の本を読みながら引っかかったところを記事にしていこうと思います。
もしかしたら、どこかで情報のまとめとかあるのかな？
今日はこの辺でー
