{"id":682,"date":"2018-01-01T02:46:38","date_gmt":"2018-01-01T00:46:38","guid":{"rendered":"http:\/\/leonidassavvides.com\/blog\/?p=682"},"modified":"2018-01-01T02:46:38","modified_gmt":"2018-01-01T00:46:38","slug":"the-most-basic-example-hello-world-to-convert-an-html5-web-app-to-desktop-binary-app-w10-macos-linux","status":"publish","type":"post","link":"https:\/\/www.leonidassavvides.com\/blog\/2018\/01\/the-most-basic-example-hello-world-to-convert-an-html5-web-app-to-desktop-binary-app-w10-macos-linux\/","title":{"rendered":"The most basic example (“Hello World!”) to convert an HTML5 web app to desktop (binary) app [W10, MacOS, Linux]"},"content":{"rendered":"
<\/div>

The most basic example (“Hello World!”) to convert an HTML5 web app to desktop (binary) app [W10, MacOS, Linux]<\/h2>\n

=================================================<\/p>\n

I. In this tutorial I will use in the first part(Part 1) Electron Framework<\/strong> – http:\/\/electron.atom.io<\/a>
\nII. And in the second part(Part 2)\u00a0<\/strong> I will use the NW.js (Node.js Library)<\/strong> for this – http:\/\/docs.nwjs.io\/en\/latest<\/a><\/p>\n

Note: Also in the third way\u00a0<\/strong>is to\u00a0use Cordova to build a Windows 10 desktop app –\u00a0https:\/\/cordova.apache.org<\/a> [used also for building iOS & Android Apps & Windows Phone 10 Apps]. this will Not discussed here ….\u00a0\u00a0https:\/\/cordova.apache.org\/docs\/en\/latest\/guide\/platforms\/win8\/index.html<\/a>\u00a0.<\/p>\n

The result will be almost the same a Desktop compiled Binary App for each platform.<\/p>\n

A MAIN DISADVANTAGE is that “The downside of the Electron approach is that each app comes with a copy of two large software frameworks, Node.js and Chromium. The latter is technically a web browser engine, but as the web platform has expanded, the humble browser has turned into a sprawling software layer large enough to be an operating system of its own.”\u00a0 …\u00a0https:\/\/medium.com\/dailyjs\/put-your-electron-app-on-a-diet-with-electrino-c7ffdf1d6297<\/a><\/p>\n

So a hello world app – minimal size – may be 115MB-200MB the same as one big app … ( source code minimal app be 2KB and source code for big app be 10MB – but the software frameworks make them the same relatively). Developers already have started to look for solutions as the link just above shows one … electrino…<\/p>\n

 <\/p>\n

 <\/p>\n

General Steps<\/h3>\n

We proceed\u00a0step by step how to:
\nConvert “hello world”(index.html local web page file), or http:\/\/www.google.com or other remote page, into a desktop binary app, in other words to a chromium independent window (without top bar controls like address bar or back & fwd buttons.<\/p>\n

We start by installing Node.js if is Not yet installed in the computer… follow\u00a0https:\/\/nodejs.org\/en\/download\/<\/a><\/p>\n

Also if you are in Windows 10 install Git Bash CLI [if Not yet installed] by installing Git from https:\/\/git-scm.com\/download\/win<\/a><\/p>\n

For Linux \/ Mac, as for Git Bash CLI windows you can use the Terminal CLI app.<\/p>\n

 <\/p>\n

(Part 1) Electron Framework<\/strong><\/h3>\n

Make a folder structure as Documents\/desktop-apps\/electron<\/strong> – open File Explorer and right click …\/…\/electron<\/strong> and choose Git Bash Here and confirm Node.js installed by [npm comes with Node.js]<\/p>\n

LSE@PC7 MINGW64 \/t\/articles\/desktop-apps\/electron<\/p>\n

$ node -v<\/strong><\/p>\n

v6.10.2<\/strong><\/p>\n

LSE@PC7 MINGW64 \/t\/articles\/desktop-apps\/electron<\/p>\n

$ npm -v<\/strong><\/p>\n

3.10.10<\/strong><\/p>\n

LSE@PC7 MINGW64 \/t\/articles\/desktop-apps\/electron<\/p>\n

$<\/p>\n

==============================================<\/p>\n

Generate a binary App using Electron from Hello World! Web App<\/p>\n

Generally, an Electron app is structured like this (at minimum):\u00a0 \/\/ more structure in Source Code<\/a><\/p>\n

...\/articles\/desktop-apps\/electron\/your-app\/<\/span><\/strong>\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 main.js\n\u2514\u2500\u2500 index.html<\/code><\/pre>\n
package.json<\/code><\/strong><\/span><\/pre>\n
{\n \"name\": \"your-app\",\n \"version\": \"0.0.1\",\n \"main\": \"main.js\",\n \"scripts\": {\n \"start\": \"electron .\",\n \"dist\": \"build\"\n },\n \"author\": \"LSE\",\n \"build\": {\n \"appId\": \"com.example.helloworld\"\n },\n \"devDependencies\": {\n \"electron\": \"~1.7.8\",\n \"electron-builder\": \"^17.1.2\"\n }\n}<\/pre>\n
index.html<\/code><\/strong><\/span><\/pre>\n
<!DOCTYPE html>\n<html<\/span>>\n  <head<\/span>>\n    <meta<\/span> charset<\/span>=\"<\/span>UTF-8\"<\/span><\/span>>\n    <title<\/span>>Hello World!<\/title<\/span>>\n  <\/head<\/span>>\n  <body<\/span>>\n    <h1<\/span>>Hello World!<\/h1<\/span>>\n    We are using node <script<\/span>>document<\/span>.write<\/span>(process<\/span>.versions<\/span>.node<\/span>)<\/span><<\/span>\/script<\/span>>,\n    Chrome <script<\/span>>document<\/span>.write<\/span>(process<\/span>.versions<\/span>.chrome<\/span>)<\/span><<\/span>\/script<\/span>>,\n    and Electron <script<\/span>>document<\/span>.write<\/span>(process<\/span>.versions<\/span>.electron<\/span>)<\/span><<\/span>\/script<\/span>>. \n <br\/>\n <br\/>\n <br\/>\n <br\/>\n <img src=\"img\/mickey-mouse-icon.png\">\n  <\/body<\/span>>\n<\/html<\/span>><\/pre>\n
\u00a0\n\nmain.js<\/strong><\/span><\/pre>\n
const<\/span> {app<\/span>, BrowserWindow<\/span>} =<\/span> require<\/span>('<\/span>electron'<\/span><\/span>);\nconst<\/span> path<\/span> =<\/span> require<\/span>('<\/span>path'<\/span><\/span>);\nconst<\/span> url<\/span> =<\/span> require<\/span>('<\/span>url'<\/span><\/span>);\n\n\/\/ Keep a global reference of the window object, if you don't, the window will<\/span>\n\/\/ be closed automatically when the JavaScript object is garbage collected.<\/span>\nlet<\/span> win;\n\nfunction<\/span> createWindow<\/span> () {\n  \/\/ Create the browser window.<\/span>\n  win =<\/span> new<\/span> BrowserWindow<\/span>({\n                           width:<\/span> 1000<\/span>, \n                           height:<\/span> 700,\n<\/span>                           frame: true,   \/\/ put false<\/strong> for get a chromium windows completely frame-less\n                           icon: path.join(__dirname, \"img\/favicon.ico\")\n                           });\n\n  \/\/ and load the index.html of the app.<\/span>\n  win<\/span>.loadURL<\/span>(url<\/span>.format<\/span>({\n    pathname:<\/span> path<\/span>.join<\/span>(__dirname<\/span>, '<\/span>index.html'<\/span><\/span>),\n    protocol:<\/span> '<\/span>file:'<\/span><\/span>,\n    slashes:<\/span> true<\/span>\n  }));\n \n \/\/ Or use this and comment above for load url\n \/\/ win.loadURL(\"http:\/\/google.com\");\n  \/\/ Open the DevTools.<\/span>\n  win<\/span>.webContents<\/span>.openDevTools<\/span>();\n\n  \/\/ Emitted when the window is closed.<\/span>\n  win<\/span>.on<\/span>('<\/span>closed'<\/span><\/span>, () =><\/span> {\n    \/\/ Dereference the window object, usually you would store windows<\/span>\n    \/\/ in an array if your app supports multi windows, this is the time<\/span>\n    \/\/ when you should delete the corresponding element.<\/span>\n    win =<\/span> null;<\/span>\n  });\n}\n\n\/\/ This method will be called when Electron has finished<\/span>\n\/\/ initialization and is ready to create browser windows.<\/span>\n\/\/ Some APIs can only be used after this event occurs.<\/span>\napp<\/span>.on<\/span>('<\/span>ready'<\/span><\/span>, createWindow);\n\n\/\/ Quit when all windows are closed.<\/span>\napp<\/span>.on<\/span>('<\/span>window-all-closed'<\/span><\/span>, () =><\/span> {\n  \/\/ On macOS it is common for applications and their menu bar<\/span>\n  \/\/ to stay active until the user quits explicitly with Cmd + Q<\/span>\n  if<\/span> (process<\/span>.platform<\/span> !==<\/span> '<\/span>darwin'<\/span><\/span>) {\n    app<\/span>.quit<\/span>();\n  }\n});\n\napp<\/span>.on<\/span>('<\/span>activate'<\/span><\/span>, () =><\/span> {\n  \/\/ On macOS it's common to re-create a window in the app when the<\/span>\n  \/\/ dock icon is clicked and there are no other windows open.<\/span>\n  if<\/span> (win ===<\/span> null<\/span>) {\n    createWindow<\/span>();\n  }\n});\n\n\/\/ In this file you can include the rest of your app's specific main process<\/span>\n\/\/ code. You can also put them in separate files and require them here.<\/span><\/pre>\n
====\nend of electron code\n\nLSE@PC7 MINGW64 \/t\/articles\/desktop-apps\/electron\/your-app\n$ ls<\/strong>\nindex.html main.js package.json<\/strong>\nLSE@PC7 MINGW64 \/t\/articles\/desktop-apps\/electron\/your-app\n$ npm install   # type only this and press enter to install dependencies<\/strong>\n> electron@1.7.10 postinstall T:\\articles\\desktop-apps\\electron\\your-app\\node_modules\\electron\n> node install.js\n....\n....\nLSE@PC7 MINGW64 \/t\/articles\/desktop-apps\/electron\/your-app\n$ npm start   # type only this and press enter to run app - in this stage a desktop app appear in your screen with Hello World!<\/strong>\n> your-app@0.0.1 start T:\\articles\\desktop-apps\\electron\\your-app\n> electron .\n\nClose app by press Ctrl + C in the CLI Terminal or by press \"X\" on the right upper corner of the app.\n\n\nLSE@PC7 MINGW64 \/t\/articles\/desktop-apps\/electron\/your-app<\/strong>\n$ npm run dist<\/strong>\n> your-app@0.0.1 dist T:\\articles\\desktop-apps\\electron\\your-app\n> build\nWarning: description is missed in the package.json (T:\\articles\\desktop-apps\\electron\\your-app\\package.json)\nNo native production dependencies\nPackaging for win32 x64 using electron 1.7.10 to dist\\win-unpacked\nWarning: Application icon is not set, default Electron icon will be used\nBuilding NSIS installer\n Packaging NSIS installer for arch x64\nLSE@PC7 MINGW64 \/t\/articles\/desktop-apps\/electron\/your-app<\/strong>\n$<\/strong>\n\n\n\/\/ here in this stage we get : \nT:\\articles\\desktop-apps\\electron\\your-app\\dist\\win-unpacked   \/\/ Run-able Windows app\nT:\\articles\\desktop-apps\\electron\\your-app\\dist\\               \/\/ Install-able Windows app\n\n\n\"2017-12-31_22-54-43\"<\/a>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n=============================\nsource code here Electron\n<\/a><\/pre>\n
https:\/\/nodejs.org\/api\/os.html<\/a>\u00a0 \u00a0 \/\/\u00a0 <<<\u00a0 you can find with Node.js the screenshot’s[the PC running App on system info] info here OS Node.js API <<<<\/p>\n
<\/h3>\n
Part 2 – NW.js Library<\/h3>\n
Get binary App using NW.js from web app<\/p>\n
Step 1.<\/strong>\u00a0Create\u00a0package.json<\/code>:<\/p>\n
\n
{\n \"name\": \"helloworld\",\n \"main\": \"index.html\",\n \"version\": \"1.0.1\",\n \"description\": \"\",\n \"scripts\": {\n\n \"start\": \"nw .\",\n \"test\": \"echo 'Error: no test specified' && exit 1\",\n \"package\": \"nwb nwbuild -v 0.27.3-sdk .\/ -o .\/dist --output-format=ZIP\",\n \"package:run\": \"nwb nwbuild -v 0.27.3-sdk .\/ -o .\/dist -p linux64,win32,osx64 -r -- --enable-transparent-visuals --disable-gpu\"\n\n },\n \"devDependencies\": {\n \"nw\": \"^0.27.3-sdk\",\n \"nwjs-builder\": \"^1.14.0\"\n }\n}\n\n<\/span><\/pre>\n<\/div>\n
main.js<\/p>\n
\/\/ initialize your app<\/span>\n\/\/ and ...<\/span>\nnw<\/span>.<\/span>Window<\/span>.<\/span>open<\/span>(<\/span>'index.html'<\/span>,<\/span> {},<\/span> function<\/span>(<\/span>win<\/span>)<\/span> {});<\/span><\/pre>\n
 <\/p>\n
Step 2.<\/strong>\u00a0Create\u00a0index.html<\/code>:<\/p>\n
\n
<!DOCTYPE html><\/span>\n<<\/span>html<\/span>><\/span>\n  <<\/span>head<\/span>><\/span>\n    <<\/span>title<\/span>><\/span>Hello World!<\/<\/span>title<\/span>><\/span>\n  <\/<\/span>head<\/span>><\/span>\n  <<\/span>body<\/span>><\/span>\n    <<\/span>h1<\/span>><\/span>Hello World!<\/<\/span>h1<\/span>><\/span>\n  <\/<\/span>body<\/span>><\/span>\n<\/<\/span>html<\/span>><\/span><\/pre>\n<\/div>\n
 <\/p>\n
Step 3.<\/strong>\u00a0Run your app<\/p>\n
<\/div>\n
LSE@PC7 MINGW64 \/t\/articles\/desktop-apps\/nwjs\/app-nwjs
\n$\u00a0npm install<\/strong>\/\/ NOTES – if you do Not know latest versions in these lines:<\/p>\n
 \"devDependencies\": {\n \"nw\": \"^0.27.3-sdk\",\n \"nwjs-builder\": \"^1.14.0\"\n }<\/span><\/pre>\n
\/\/ you do Not include them and proceed as follows<\/p>\n<\/div>\n
\n
$ npm view nw dist-tags<\/strong><\/pre>\n<\/div>\n
\n
{ latest: ‘0.27.3’,
\nalphasdk: ‘0.13.0-alpha4sdk’,
\nalpha5sdk: ‘0.13.0-alpha5sdk’,
\nalpha6sdk: ‘0.13.0-alpha6sdk’,
\nalpha7sdk: ‘0.13.0-alpha7sdk’,
\nsdk: ‘0.27.3-sdk<\/strong><\/span>‘ }<\/p>\n<\/div>\n
LSE@PC7 MINGW64 \/t\/articles\/desktop-apps\/nwjs\/app-nwjs
\n$ npm install nw@0.27.3-sdk<\/span> –save-dev<\/strong><\/p>\n
\/\/ Till here you can run app by running:<\/p>\n
LSE@PC7 MINGW64 \/t\/articles\/desktop-apps\/nwjs\/app-nwjs
\n$ npm start<\/strong><\/p>\n
To build app you run\/install the(by default – latest version):
\nLSE@PC7 MINGW64 \/t\/articles\/desktop-apps\/nwjs\/app-nwjs
\n$ npm i -D nwjs-builder<\/strong><\/p>\n
\/\/ equivalent to: npm install nwjs-builder –save-dev<\/strong><\/p>\n
LSE@PC7 MINGW64 \/t\/articles\/desktop-apps\/nwjs\/app-nwjs
\n$ npm run package<\/strong><\/p>\n
> helloworld@1.0.1 package T:\\articles\\desktop-apps\\nwjs\\app-nwjs
\n> nwb nwbuild -v 0.27.3-sdk .\/ -o .\/dist –output-format=ZIP<\/p>\n
{ version: ‘v0.27.3’,
\nflavor: ‘sdk’,
\ntargets: [ [ ‘win32’, ‘x64’ ] ],
\npath: ‘.\/’ }<\/p>\n
0: Read package.json
\n1: Prepare build directory at dist\\helloworld-win-x64
\n2: Copy binary from C:\\Users\\User\\.nwjs-builder\\caches\\binary-nwjs-sdk-v0.27.3-win-x64
\n3: Edit Windows executable
\n4: Make working directory
\n5: Copy included files to C:\\Users\\User\\AppData\\Local\\Temp\\d-11806-6336-7fj1i6.kkjkvgqfr
\n6: Compress application
\n7: Combine executable at dist\\helloworld-win-x64\\nw.exe
\n8: Rename application to helloworld.exe
\n9: Zip to dist\\helloworld-win-x64.zip
\n10: Clean up dist\\helloworld-win-x64<\/p>\n
LSE@PC7 MINGW64 \/t\/articles\/desktop-apps\/nwjs\/app-nwjs
\n$ npm start<\/strong>
\n=============================
\nsource code here NW.js<\/a><\/p>\n
https:\/\/nodejs.org\/api\/os.html<\/a>\u00a0 \u00a0 \/\/\u00a0 <<<\u00a0 you can find with Node.js the screenshot’s info here <<<<\/p>\n
\"2018-01-06_20-57-38\"<\/a><\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
Note – Cordova Hybrid\u00a0Mobile Platform<\/b><\/h3>\n
Get binary Desktop\/Mobile App using Cordova from web app<\/p>\n
https:\/\/cordova.apache.org\/docs\/en\/latest\/guide\/platforms\/win8\/index.html<\/a><\/p>\n
 <\/p>\n
 <\/p>\n
Author
\nLeonidas Savvides
\nWeb\/Mobile\/Desktop Developer
\nWww.LeonidasSavvides.com
\nTwitter @lwdlse
\nLsepolis123@gmail.com<\/p>\n
Leonidas is a Freelance Full Stack Web Developer and Hybrid Mobile\/Desktop App Developer. He likes involved in new trends like ES6\/ES7\/ES8, Electron\/NW.js and Cordova platforms, PHP 7 and Frameworks like jQuery Mobile, Ionic 2, Angular, React or CodeIgniter\/CakePHP etc. He rarely finds free time, and almost always is programming or practicing\/reading\/watching\/learning new technologies, in programming using Web Technologies.<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
The most basic example (“Hello World!”) to convert an HTML5 web app to desktop (binary) app [W10, MacOS, Linux] ================================================= I. In this tutorial I will use in the first part(Part 1) Electron Framework – http:\/\/electron.atom.io II. And in the second part(Part 2)\u00a0 I will use the NW.js (Node.js Library) for this – http:\/\/docs.nwjs.io\/en\/latest Note: … Continue reading “The most basic example (“Hello World!”) to convert an HTML5 web app to desktop (binary) app [W10, MacOS, Linux]”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[],"class_list":["post-682","post","type-post","status-publish","format-standard","hentry","category-tech"],"_links":{"self":[{"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/posts\/682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/comments?post=682"}],"version-history":[{"count":0,"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/posts\/682\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/media?parent=682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/categories?post=682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/tags?post=682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}