{"id":1067,"date":"2015-02-01T23:20:28","date_gmt":"2015-02-01T17:50:28","guid":{"rendered":"http:\/\/codeforgeek.com\/?p=1067"},"modified":"2021-06-19T11:58:38","modified_gmt":"2021-06-19T06:28:38","slug":"desktop-app-node-webkit","status":"publish","type":"post","link":"https:\/\/codeforgeek.com\/desktop-app-node-webkit\/","title":{"rendered":"Develop desktop app using Node-webkit"},"content":{"rendered":"<p>Node.js is built on Chrome V8 JavaScript engine. V8 is one of the fastest JavaScript engine which runs inside of your chrome browser. <\/p>\n<p>Now you can use that feature to build Desktop application like Chrome using Node.js. Node-webkit allows us to build native desktop application using Web technologies like HTML5,CSS3,JavaScript.<\/p>\n<div id=\"seperator\"><\/div>\n<h2>Installation:<\/h2>\n<p>You can install node-webkit in Linux,Windows and MacOS. Here is direct link to download node-webkit package for your system. You don&#8217;t need to install it, just place it somewhere and proceed with tutorial.<\/p>\n<blockquote><p><strong>Windows<\/strong> : Download Node-webkit for Windows <a href=\"http:\/\/dl.node-webkit.org\/v0.11.5\/node-webkit-v0.11.5-win-ia32.zip\" target=\"_blank\" rel=\"noopener\">(32 bit)<\/a> (<a href=\"http:\/\/dl.node-webkit.org\/v0.11.5\/node-webkit-v0.11.5-win-x64.zip\" target=\"_blank\" rel=\"noopener\">64 bit<\/a>).<br \/>\n<strong>Linux<\/strong> : Download Node-webkit for Linux (<a href=\"http:\/\/dl.node-webkit.org\/v0.8.6\/node-webkit-v0.8.6-linux-ia32.tar.gz\" target=\"_blank\" rel=\"noopener\">32 bit<\/a>) (<a href=\"http:\/\/dl.node-webkit.org\/v0.8.6\/node-webkit-v0.8.6-linux-x64.tar.gz\" target=\"_blank\" rel=\"noopener\">64 bit<\/a>).<br \/>\n<strong>Mac<\/strong> : Download Node-webkit for MacOS (<a href=\"http:\/\/dl.node-webkit.org\/v0.8.6\/node-webkit-v0.8.6-osx-ia32.zip\" target=\"_blank\" rel=\"noopener\">32 bit<\/a>)\n<\/p><\/blockquote>\n<div id=\"seperator\"><\/div>\n<h3>Hello Node-webkit Program !<\/h3>\n<p>To get you started let&#8217;s build sample program which prints &#8220;Hello World !&#8221; on screen using node-webkit. Hope you have downloaded and extracted the node-webkit files.<\/p>\n<div class=\"file_name\"><strong>Package.json<\/strong><\/h4>\n<\/div>\n<p><code lang=\"javascript\"><br \/>\n{<br \/>\n  \"name\" : \"nw-demo\",<br \/>\n  \"main\" : \"index.html\",<br \/>\n  \"window\" : {<br \/>\n\t\"toolbar\" : true<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\nYou don&#8217;t need to install any dependency here. Just save the file and create index.html file in same folder.<\/p>\n<div class=\"file_name\"><strong>index.html<\/strong><\/h4>\n<\/div>\n<p><code lang=\"html\"><br \/>\n<!DOCTYPE html><br \/>\n<html><br \/>\n  <head><br \/>\n    <title>Hello Node-webkit!<\/title><br \/>\n  <\/head><br \/>\n  <body><\/p>\n<h1>Node-webkit!<\/h1>\n<p>  <\/body><br \/>\n<\/html><br \/>\n<\/code><br \/>\nNow open up Terminal or Command prompt and switch to the directory where node-webkit <strong>installer<\/strong> files are present. To run above code type this :<br \/>\n<code>\/path\/to\/node-webkit-installer\/nw \/path\/to\/our-project\/ .<\/code><br \/>\nHere is the output:<br \/>\n<img decoding=\"async\" src=\"https:\/\/codeforgeek.com\/wp-content\/uploads\/2015\/01\/Screenshot-from-2015-01-27-164908.png\" alt=\"Screenshot from 2015-01-27 16:49:08\" width=\"702\" height=\"479\" class=\"aligncenter size-full wp-image-1107\" srcset=\"https:\/\/codeforgeek.com\/wp-content\/uploads\/2015\/01\/Screenshot-from-2015-01-27-164908.png 702w, https:\/\/codeforgeek.com\/wp-content\/uploads\/2015\/01\/Screenshot-from-2015-01-27-164908-300x205.png 300w\" sizes=\"(max-width: 702px) 100vw, 702px\" \/><br \/>\nI run the code using following command.<br \/>\n<img decoding=\"async\" src=\"https:\/\/codeforgeek.com\/wp-content\/uploads\/2015\/01\/Screenshot-from-2015-01-27-164932.png\" alt=\"Screenshot from 2015-01-27 16:49:32\" width=\"664\" height=\"446\" class=\"aligncenter size-full wp-image-1100\" srcset=\"https:\/\/codeforgeek.com\/wp-content\/uploads\/2015\/01\/Screenshot-from-2015-01-27-164932.png 664w, https:\/\/codeforgeek.com\/wp-content\/uploads\/2015\/01\/Screenshot-from-2015-01-27-164932-300x202.png 300w\" sizes=\"(max-width: 664px) 100vw, 664px\" \/><\/p>\n<div id=\"seperator\"><\/div>\n<h3>Our application : <\/h3>\n<p>Will develop node-webkit app with Google custom search engine. This app will allow you to search inside <a href=\"https:\/\/codeforgeek.com\/\" title=\"Home page\" target=\"_blank\" rel=\"noopener\">codeforgeek.com<\/a>. <\/p>\n<h4>Directory Structure :<\/h4>\n<p><code><br \/>\n-- index.html<br \/>\n-- package.json<br \/>\n<\/code><\/p>\n<div class=\"file_name\"><strong>package.json<\/strong><\/div>\n<p><code lang=\"javascript\"><br \/>\n{<br \/>\n  \"name\" : \"nw-demo\",<br \/>\n  \"main\" : \"index.html\",<br \/>\n  \"window\" : {<br \/>\n\t\"toolbar\" : false<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<div class=\"file_name\"><strong>index.html<\/strong><\/div>\n<p><code lang=\"html\"><br \/>\n<!DOCTYPE html><br \/>\n<html><br \/>\n  <head><br \/>\n    <title>Google search Node-web application<\/title><br \/>\n    <script>\n  (function() {\n    var cx = '003755108644811522381:v-_sebdsjeg';\n    var gcse = document.createElement('script');\n    gcse.type = 'text\/javascript';\n    gcse.async = true;\n    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +\n        '\/\/www.google.com\/cse\/cse.js?cx=' + cx;\n    var s = document.getElementsByTagName('script')[0];\n    s.parentNode.insertBefore(gcse, s);\n  })();\n<\/script><br \/>\n  <\/head><br \/>\n  <body style=\"padding:50px;\"><br \/>\n    <img SRC=\"google_custom_logo.png\" style=\"height: 95px;width: 269px;margin-left:150px;\"><\/img><br \/>\n    <gcse:searchbox><\/gcse:searchbox><br \/>\n<!--    We are using node.js <script>document.write(process.version)<\/script>. --><br \/>\n<gcse:searchresults><\/gcse:searchresults><br \/>\n  <\/body><br \/>\n<\/html><br \/>\n<\/code><br \/>\nAfter running this app you will see below output.<br \/>\n<img decoding=\"async\" src=\"https:\/\/codeforgeek.com\/wp-content\/uploads\/2015\/02\/Screenshot-from-2015-02-01-215418.png\" alt=\"Screenshot from 2015-02-01 21:54:18\" width=\"853\" height=\"683\" class=\"aligncenter size-full wp-image-1113\" srcset=\"https:\/\/codeforgeek.com\/wp-content\/uploads\/2015\/02\/Screenshot-from-2015-02-01-215418.png 853w, https:\/\/codeforgeek.com\/wp-content\/uploads\/2015\/02\/Screenshot-from-2015-02-01-215418-768x615.png 768w, https:\/\/codeforgeek.com\/wp-content\/uploads\/2015\/02\/Screenshot-from-2015-02-01-215418-300x240.png 300w\" sizes=\"(max-width: 853px) 100vw, 853px\" \/><\/p>\n<div id=\"seperator\"><\/div>\n<h3>More about Node-webkit !<\/h3>\n<p>One of the great advantage of Node-webkit is you can use any node-package you want directly in your desktop app ! Yes it&#8217;s right. Now all the awesome node-package will be available for Desktop app.<\/p>\n<p>For more information about Node-webkit Windows,Menu&#8217;s, Events please visit Wiki of Node-webkit from <a href=\"https:\/\/github.com\/nwjs\/nw.js\/wiki\" title=\"Node webkit\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<div id=\"seperator\"><\/div>\n<h3>Conclusion:<\/h3>\n<p>Node-webkit is revolutionary works. If this things keeps going like the way it is going now then within some years old desktop technologies can be replace by JavaScript. Stay tuned for more deep tutorial on this topic. This is just beginning !<\/p>\n<p>Requesting you to provide any ideas of building node-webkit app in comments ! I&#8217;ll surely look over it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Node.js is built on Chrome V8 JavaScript engine. V8 is one of the fastest JavaScript engine which runs inside of your chrome browser. Now you can use that feature to build Desktop application like Chrome using Node.js. Node-webkit allows us to build native desktop application using Web technologies like HTML5,CSS3,JavaScript. Installation: You can install node-webkit [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1116,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_surecart_dashboard_logo_width":"180px","_surecart_dashboard_show_logo":true,"_surecart_dashboard_navigation_orders":true,"_surecart_dashboard_navigation_invoices":true,"_surecart_dashboard_navigation_subscriptions":true,"_surecart_dashboard_navigation_downloads":true,"_surecart_dashboard_navigation_billing":true,"_surecart_dashboard_navigation_account":true,"_uag_custom_page_level_css":"","footnotes":""},"categories":[14,18],"tags":[],"class_list":["post-1067","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nodejs","category-tutorial"],"blocksy_meta":[],"uagb_featured_image_src":{"full":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2015\/02\/banner.png",828,288,false],"thumbnail":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2015\/02\/banner-150x150.png",150,150,true],"medium":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2015\/02\/banner-300x104.png",300,104,true],"medium_large":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2015\/02\/banner-768x267.png",768,267,true],"large":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2015\/02\/banner.png",828,288,false],"1536x1536":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2015\/02\/banner.png",828,288,false],"2048x2048":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2015\/02\/banner.png",828,288,false]},"uagb_author_info":{"display_name":"Shahid","author_link":"https:\/\/codeforgeek.com\/author\/shahid\/"},"uagb_comment_info":0,"uagb_excerpt":"Node.js is built on Chrome V8 JavaScript engine. V8 is one of the fastest JavaScript engine which runs inside of your chrome browser. Now you can use that feature to build Desktop application like Chrome using Node.js. Node-webkit allows us to build native desktop application using Web technologies like HTML5,CSS3,JavaScript. Installation: You can install node-webkit&hellip;","_links":{"self":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/posts\/1067","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/comments?post=1067"}],"version-history":[{"count":0,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/posts\/1067\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/media\/1116"}],"wp:attachment":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/media?parent=1067"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/categories?post=1067"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/tags?post=1067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}