[Electron] 於Visual Studio 建立 Electron Project

Electron 是一套建基以 Node.js 作back-end 和 Chromium 作front-end 的軟件框架. 最大的好處是可以利用JavaScript 建立Desktop Application, 同時亦可以利用npm 大量的 repository. 網上的教學主要都集中在如何利用Visual Studio Code 那邊. 但其實Visual Studio 2017 都可以做到.方法如下:

1. 確定自己有安裝Node.js, 沒有的話, 請到 https://nodejs.org/en/ 下載及安裝.
2. 建立Node.js project.
   開啟 Visual Studio > File > New Project, 於 JavaScript 中選取Blank Node.js Console Application, 並輸入Project name 後按OK.
   
3. 開啟npm package manager.
   於 Solution Explorer 中選取 npm, 按右鍵開啟 Install New npm Packages.
   
4. 安裝Electron.
   於 text box 輸入Electron, 然後於下邊的list box 選取electron, 之後按Install Package.
    
5. 從Github 下載Sample code. 並加到Project 中.
    
6. 設定stratup file.
   於 Solution Explorer 中選取 main.js, 按右鍵並選取 Set as Node.js Startup File.
   
7. 設定Project property.
   於Project Property 中, 進行以下設定:

   Property	Value	Remarks
   Node.exe path	%Project_Path%\node_modules\electron\dist\electron.exe	執行時叫用electron.exe
   Node.exe option	–inspect-brk	使debugger 可以辯認break point.

   

8. 進行測式.
   按F5 執行project, 正常會彈出Console, 將顯示的URL 複制.
   
9. 開啟 Desktop Application.
   於瀏覽器中開啟URL, 會彈出application.
   

參考資料

• Electron Quick Start, Electron, Github,
  https://github.com/electron/electron-quick-start
• Creating an Electron app using Visual Studio (not VSCode) w/ Node.js tools,
  StackOverflow,https://stackoverflow.com/questions/35416172/creating-an-electron-app-using-visual-studio-not-vscode-w-node-js-tools