Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@leesatoh

react electron でwindowsアプリを作ろうと思っただけなのに

Posted at

reactとelectron でwindowsアプリを作ろうと思っただけなのに、数時間かかってしまった。自分のためにまとめておこうと思う。やる気ゲージと許容時間がゼロになったので、コマンドとポエムとグチだけ残しておく

最初に

RestAPIを叩くだけの単純なアプリが欲しかった。
何を使ってもできる。なら、このタイミングでelectronに手を出してみよう。
適当に調べて、ちゃちゃっとパク〇れば、小一時間でできるっしょ
・・・そして、半日後・・。あかんやる気HPがほぼない。寝て回復しよう・・。
この手の技術として

  • 環境づくりが大変
    • どのバージョンが良いんだってばよ
  • 参考にするサイトの情報の賞味期限が短い
    • （言っちゃ悪いがほぼ腐っている）
  • だから、類似で少し違うQiitaが出てくる
    • （どれが良いのだ？新しいものか？メンテされているものか？）
  • エラーメッセージが多かったり少なかったり、とにかく解決に時間がかかる
    • （多かったらうんざり、少なかったら、何が起こったのかわからん。とにかくどうすればいいんですか・・）
      そして、ついにやる気がゼロになってしまった。

純粋なelectronアプリ

参考にさせていただいたサイト

https://torutk.hatenablog.jp/entry/2021/08/10/001125
electronインストール
gitbash
$ npm install electron --save-dev

added 86 packages, and audited 87 packages in 26s

5 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
npm initで適当な値を入れる
gitbash
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
electronを実行するようにpackage.jsonを変更
package.json
  "scripts": {
    "start": "electron ."
  },
### Trouble：`pm start`で固まった（何も表示されない）
```shell:gitbash
$ npm start

> sandbox@1.0.0 start
> electron .
ctrl+zでも止まらない
gitbash
      0 [sig] sh 686! sigpacket::process: Suppressing signal 18 to win32 process (pid 0)

reactなelectronアプリ

気持ちを切り替えて参考にさせていただいたサイト

https://mikimemo.hateblo.jp/entry/2019/11/13/014346
https://qiita.com/cross-xross/items/eaf430b571c96b9e500a
https://qiita.com/Akatsuki1910/items/c2c035d02fb57bc6694e

Trouble：create-react-appをinstall

なんか警告が出ている
gitbash
$ npm install -g create-react-app
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
C:\Users\satom.INTERNAL\AppData\Roaming\npm\create-react-app -> C:\Users\satom.INTERNAL\AppData\Roaming\npm\node_modules\create-react-app\index.js
+ create-react-app@5.0.0
updated 1 package in 6.398s
なるほど、バージョン違いか
gitbash
$ npx create-react-app my-app
You are running Node 10.16.3.
Create React App requires Node 14 or higher.
Please update your version of Node.

この際、nvmを導入

nvm-windows 入手元

npmは最終安定盤？をインストール
gitbash
$ nvm install lts
Downloading node.js version 16.13.1 (64-bit)...
Extracting...
Complete
npmは最終安定盤？を有効に・・バケラッタ！
gitbash
$ nvm use lts
exit status 5: ▒A▒N▒Z▒X▒▒▒▒▒ۂ▒▒▒܂▒▒▒▒B

exit status 1: ▒▒▒ɑ▒▒݂▒▒▒t▒@▒C▒▒▒▒▒쐬▒▒▒邱▒Ƃ͂ł▒▒܂▒▒▒B
コマンドプロンプトで！・・バケラッタ！
command
C:\Users\satom.INTERNAL>nvm use lts
exit status 5: �A�N�Z�X�����ۂ����܂����B

exit status 1: ���ɑ��݂����t�@�C�����쐬���邱�Ƃ͂ł��܂����B
※管理者権限にすればいいらしい。
gitbash(管理者権限)
$ nvm use lts
Now using node v16.13.1 (64-bit)
※create-react-app実行成功
gitbash
$ npm install  create-react-app

up to date, audited 68 packages in 1s

4 packages are looking for funding
  run `npm fund` for details

3 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
※create-react-appインストール成功
gitbash
$ create-react-app test_electron

Creating a new React app in C:\Users\satom.INTERNAL\react\test_electron\test_electron.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1374 packages in 7m

163 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...

added 33 packages in 18s

163 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1407 packages in 3s

163 packages are looking for funding
  run `npm fund` for details

6 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created test_electron at C:\Users\satom.INTERNAL\react\test_electron\test_electron
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd test_electron
  npm start

Happy hacking!

Trouble:react-scripts buildでエラー

command
satom@PRX5039 MINGW64 ~/react/test_electron
$ npm run build

> build
> react-scripts build

Could not find a required file.
  Name: index.html
  Searched in: C:\Users\satom.INTERNAL\react\test_electron\public

Trouble:react-scripts buildでエラー

cpxをインストールしないとだめ

command

$ npm run electron-build

> electron-build
> npm run build && cpx electron/electron.js build/ && cpx electron/build/icon.ico build && node ./electron/build/build-win.js


> build
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  20 B  build\static\js\main.31d6cfe0.js

The project was built assuming it is hosted at ./.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://cra.link/deployment

'cpx' ▒́A▒▒▒▒▒R▒}▒▒▒h▒܂▒▒͊O▒▒▒R▒}▒▒▒h▒A
▒▒▒▒”\▒ȃv▒▒▒O▒▒▒▒▒܂▒▒̓o▒b▒` ▒t▒@▒C▒▒▒Ƃ▒▒ĔF▒▒▒▒▒▒Ă▒▒܂▒▒▒B


satom@PRX5039 MINGW64 ~/react/test_electron
$ cpx electron/electron.js build
bash: cpx: command not found

satom@PRX5039 MINGW64 ~/react/test_electron
$ npm install --save-dev cpx
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated chokidar@1.7.0: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated core-js@2.6.12: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.

added 181 packages, and audited 1756 packages in 35s

178 packages are looking for funding
  run `npm fund` for details

14 vulnerabilities (2 low, 6 moderate, 6 high)

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

Trouble:build-win.js（electron-builder）が古かったり、場所が違ったり

command
satom@PRX5039 MINGW64 ~/react/test_electron
$ npm run electron-build

> electron-build
> npm run build && cpx electron/electron.js build/ && cpx electron/build/icon.ico build && node ./electron/build/build-win.js


> build
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  20 B  build\static\js\main.31d6cfe0.js

The project was built assuming it is hosted at ./.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://cra.link/deployment

node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module 'C:\Users\satom.INTERNAL\react\test_electron\electron\build\build-win.js'
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

satom@PRX5039 MINGW64 ~/react/test_electron
$ npm run electron-build

> electron-build
> npm run build && cpx electron/electron.js build/ && cpx electron/build/icon.ico build && node ./electron/build/build-win.js


> build
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  20 B  build\static\js\main.31d6cfe0.js

The project was built assuming it is hosted at ./.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://cra.link/deployment

node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module 'C:\Users\satom.INTERNAL\react\test_electron\electron\build\build-win.js'
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

satom@PRX5039 MINGW64 ~/react/test_electron
$ npm run electron-build

> electron-build
> npm run build && cpx electron/electron.js build/ && cpx electron/build/icon.ico build && node ./electron/build/build-win.js


> build
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  20 B  build\static\js\main.31d6cfe0.js

The project was built assuming it is hosted at ./.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://cra.link/deployment

  • electron-builder  version=22.14.5 os=10.0.19043

C:\Users\satom.INTERNAL\react\test_electron\node_modules\app-builder-lib\src\index.ts:61
      throw new InvalidConfigurationError(`Unknown option "${optionName}"`)
            ^
Error: Unknown option "platform"
    at checkBuildRequestOptions (C:\Users\satom.INTERNAL\react\test_electron\node_modules\app-builder-lib\src\index.ts:61:13)
    at Object.build (C:\Users\satom.INTERNAL\react\test_electron\node_modules\app-builder-lib\src\index.ts:67:3)
    at Object.build (C:\Users\satom.INTERNAL\react\test_electron\node_modules\electron-builder\src\builder.ts:212:10)
    at Object.<anonymous> (C:\Users\satom.INTERNAL\react\test_electron\electron\build\build-win.js:7:9)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47

satom@PRX5039 MINGW64 ~/react/test_electron
$ npm run electron-build

> electron-build
> npm run build && cpx electron/electron.js build/ && cpx electron/build/icon.ico build && node ./electron/build/build-win.js


> build
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  20 B  build\static\js\main.31d6cfe0.js

The project was built assuming it is hosted at ./.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://cra.link/deployment

  • electron-builder  version=22.14.5 os=10.0.19043
  • public/electron.js not found. Please see https://medium.com/@kitze/%EF%B8%8F-from-react-to-an-electron-app-ready-for-production-a0468ecb1da3
  • loaded parent configuration  preset=react-cra
  • description is missed in the package.json  appPackageFile=C:\Users\satom.INTERNAL\react\test_electron\package.json

C:\Users\satom.INTERNAL\react\test_electron\node_modules\app-builder-lib\src\util\packageMetadata.ts:78
    throw new InvalidConfigurationError(errors.join("\n"))
          ^
Error: Please specify 'name' in the package.json (C:\Users\satom.INTERNAL\react\test_electron\package.json)
    at Object.checkMetadata (C:\Users\satom.INTERNAL\react\test_electron\node_modules\app-builder-lib\src\util\packageMetadata.ts:78:11)
    at Packager.build (C:\Users\satom.INTERNAL\react\test_electron\node_modules\app-builder-lib\src\packager.ts:335:5)
    at Object.executeFinally (C:\Users\satom.INTERNAL\react\test_electron\node_modules\builder-util\src\promise.ts:12:14)

satom@PRX5039 MINGW64 ~/react/test_electron
$ npm run electron-build

> electron-build
> npm run build && cpx electron/electron.js build/ && cpx electron/build/icon.ico build && node ./electron/build/build-win.js


> build
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  20 B  build\static\js\main.31d6cfe0.js

The project was built assuming it is hosted at ./.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://cra.link/deployment

  • electron-builder  version=22.14.5 os=10.0.19043
  • public/electron.js not found. Please see https://medium.com/@kitze/%EF%B8%8F-from-react-to-an-electron-app-ready-for-production-a0468ecb1da3
  • loaded parent configuration  preset=react-cra
  • description is missed in the package.json  appPackageFile=C:\Users\satom.INTERNAL\react\test_electron\package.json

C:\Users\satom.INTERNAL\react\test_electron\node_modules\app-builder-lib\src\util\packageMetadata.ts:78
    throw new InvalidConfigurationError(errors.join("\n"))
          ^
Error: Please specify 'name' in the package.json (C:\Users\satom.INTERNAL\react\test_electron\package.json)
    at Object.checkMetadata (C:\Users\satom.INTERNAL\react\test_electron\node_modules\app-builder-lib\src\util\packageMetadata.ts:78:11)
    at Packager.build (C:\Users\satom.INTERNAL\react\test_electron\node_modules\app-builder-lib\src\packager.ts:335:5)
    at Object.executeFinally (C:\Users\satom.INTERNAL\react\test_electron\node_modules\builder-util\src\promise.ts:12:14)

satom@PRX5039 MINGW64 ~/react/test_electron
$ npm run electron-build

> electron-build
> npm run build && cpx electron/electron.js build/ && cpx electron/build/icon.ico build && node ./electron/build/build-win.js


> build
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  20 B  build\static\js\main.31d6cfe0.js

The project was built assuming it is hosted at ./.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://cra.link/deployment

  • electron-builder  version=22.14.5 os=10.0.19043
  • public/electron.js not found. Please see https://medium.com/@kitze/%EF%B8%8F-from-react-to-an-electron-app-ready-for-production-a0468ecb1da3
  • loaded parent configuration  preset=react-cra
  • description is missed in the package.json  appPackageFile=C:\Users\satom.INTERNAL\react\test_electron\package.json

C:\Users\satom.INTERNAL\react\test_electron\node_modules\app-builder-lib\src\util\packageMetadata.ts:78
    throw new InvalidConfigurationError(errors.join("\n"))
          ^
Error: Please specify 'name' in the package.json (C:\Users\satom.INTERNAL\react\test_electron\package.json)
    at Object.checkMetadata (C:\Users\satom.INTERNAL\react\test_electron\node_modules\app-builder-lib\src\util\packageMetadata.ts:78:11)
    at Packager.build (C:\Users\satom.INTERNAL\react\test_electron\node_modules\app-builder-lib\src\packager.ts:335:5)
    at Object.executeFinally (C:\Users\satom.INTERNAL\react\test_electron\node_modules\builder-util\src\promise.ts:12:14)

satom@PRX5039 MINGW64 ~/react/test_electron
$ npm run electron-build

> electron-build
> npm run build && cpx electron/electron.js build/ && cpx electron/build/icon.ico build && node ./electron/build/build-win.js


> build
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  20 B  build\static\js\main.31d6cfe0.js

The project was built assuming it is hosted at ./.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://cra.link/deployment

  • electron-builder  version=22.14.5 os=10.0.19043
  • public/electron.js not found. Please see https://medium.com/@kitze/%EF%B8%8F-from-react-to-an-electron-app-ready-for-production-a0468ecb1da3
  • loaded parent configuration  preset=react-cra

C:\Users\satom.INTERNAL\react\test_electron\node_modules\app-builder-lib\src\util\packageMetadata.ts:78
    throw new InvalidConfigurationError(errors.join("\n"))
          ^
Error: Please specify 'name' in the package.json (C:\Users\satom.INTERNAL\react\test_electron\package.json)
    at Object.checkMetadata (C:\Users\satom.INTERNAL\react\test_electron\node_modules\app-builder-lib\src\util\packageMetadata.ts:78:11)
    at Packager.build (C:\Users\satom.INTERNAL\react\test_electron\node_modules\app-builder-lib\src\packager.ts:335:5)
    at Object.executeFinally (C:\Users\satom.INTERNAL\react\test_electron\node_modules\builder-util\src\promise.ts:12:14)

ついにビルドが成功する予定。。だったが固まっている

command
satom@PRX5039 MINGW64 ~/react/test_electron
$ npm run electron-build

> LeeAplication@0.1.0 electron-build
> npm run build && cpx electron/electron.js build/ && cpx electron/build/icon.ico build && node ./electron/build/build-win.js


> LeeAplication@0.1.0 build
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  20 B  build\static\js\main.31d6cfe0.js

The project was built assuming it is hosted at ./.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://cra.link/deployment

  • electron-builder  version=22.14.5 os=10.0.19043
  • public/electron.js not found. Please see https://medium.com/@kitze/%EF%B8%8F-from-react-to-an-electron-app-ready-for-production-a0468ecb1da3
  • loaded parent configuration  preset=react-cra
  • packaging       platform=win32 arch=x64 electron=16.0.5 appOutDir=dist\win-unpacked
  • downloading     url=https://github.com/electron/electron/releases/download/v16.0.5/electron-v16.0.5-win32-x64.zip size=85 MB parts=8
  • downloaded      url=https://github.com/electron/electron/releases/download/v16.0.5/electron-v16.0.5-win32-x64.zip duration=4.997s
1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?