Vue.js로 만든 마크다운 편집기 앱을 Electron으로 데스크톱 앱으로 만들기

소개

마지막으로 Auth0을 사용하여 비공개 마크다운 편집기 만들기(클라이언트 측) 에서 브라우저에서 작동하는 마크다운 편집기의 프로토타입을 만들었습니다.
이 기사에서는 Electron을 사용하여 데스크톱 응용 프로그램을 만들려고합니다.

시스템 구성도

이 기사에서는 이전 기사에서 만든 클라이언트를 Electron을 사용하여 데스크톱 앱으로 만듭니다.

Vue.js 프로젝트를 Electron화

Vue.js 프로젝트는 2 명령을 실행하기만 하면 Electron화할 수 있습니다.

사전 준비: Vue.js 프로젝트 만들기

Auth0을 사용하여 비공개 마크다운 편집기 만들기(클라이언트 측) 의 순서를 따릅니다. http://localhost:3000/ 에 액세스 하면 다음과 같은 화면이 표시되는 상태로 합니다.

Electron 명령 실행

vue-cliプラグイン 의 electron-builder 를 사용하여 Electron화할 수 있습니다.
자세한 내용은 여기 → h tps : / / n k ぁ y 만. 기주 b. 이오 / ㄔ ぃ - ぅ ぅ 긴 - ぇct

다음 명령을 실행합니다.

$ npm i -g @vue/cli
$ vue add electron-builder

도중에 사용하는 Electron의 버전을 들을 수 있으므로 최신 6.0.0를 선택합니다.

$ npm i -g @vue/cli
$ vue add electron-builder

�📦  Installing vue-cli-plugin-electron-builder...


> [email protected] install C:\Users\taka\.ghq\github.com\mono0423\p-mark-down-editor\node_modules\electron-chromedriver
> node ./download-chromedriver.js

+ [email protected]
added 222 packages from 157 contributors and audited 30705 packages in 22.803s
found 7 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
✔  Successfully installed plugin: vue-cli-plugin-electron-builder

? Choose Electron Version ^6.0.0     <-- バージョンはとりあえず最新の6.0.0を選択（他のでも大丈夫です） 

～～～～～～～～～～～～～～～～～～～～～～～～略～～～～～～～～～～～～～～～～～～～～～～～～～～

✔  Successfully invoked generator for plugin: vue-cli-plugin-electron-builder
   The following files have been updated / added:

     src/background.js
     .gitignore
     package-lock.json
     package.json

   You should review these changes with git diff and commit them.

조금 기다리면 명령이 성공해야합니다.electron-builder 에 의해, 이하 4 파일이 추가·갱신된 것 같으므로, 버젼 관리하고 있는 경우는 잊지 않고 커밋·푸시 해 둡시다.

src/background.js

.gitignore

package-lock.json

package.json

막상 동작 확인

package.json 의 scripts 를 보면 일부 별칭이 추가되어 있으며 $ npm run electron:serve 로 시작할 수 있을 것 같아서 실행해 보겠습니다.

$ npm run electron:serve
npm WARN lifecycle The node binary used for scripts is C:\Program Files (x86)\Nodist\bin\node.exe but npm is using C:\Program Files (x86)\Nodist\v-x64\12.11.1\node.exe itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
 DONE  Compiled successfully in 7536ms                                                                                                               15:58:18

  App running at:
  - Local:   http://localhost:3000/
  - Network: http://192.168.100.47:3000/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

-  Bundling main process...

 DONE  Compiled successfully in 5384ms                                                                                                               15:58:23
  File                      Size                     Gzipped   

  dist_electron\index.js    651.00 KiB               148.88 KiB

  Images and other types of assets omitted.

 INFO  Launching Electron...

그러면 이런 화면이 나옵니다.


개발자 도구가 표시되어 있기 때문에 × 버튼으로 닫으면 웹과 같은 외형이되었습니다.


Auth0을 사용한 Google 로그인도 할 수 있어 마크다운 에디터의 기능도 망가지지 않고 그대로 데스크톱 앱으로 움직일 수 있었습니다.

요약

Vue.js로 만든 웹 앱은 vue-cli 플러그인의 electron-builder의 힘을 빌려 두 명령으로 데스크톱 앱이 될 수있었습니다. (그 중 하나는 vue-cli 설치이므로 vue-cli가 설치되어 있으면 1 명령 만이군요)

데스크톱 앱으로 움직여도 웹에서 움직이는 기능이 손상되지 않고 움직이는 것은 놀랐습니다. (Electron의 내부에서는 Chromium이 사용되고 있다는 것이므로, 당연히 당연합니다만)

최근에는 PWA를 사용해도 데스크톱 앱처럼 보일 수 있도록( Windows 10 1803의 새로운 기능 "PWA"란? PWA의 UWP 앱화를 사용해보십시오. ) 이므로, 그쪽도 시험해 가고 싶습니다.