{"id":2564,"date":"2016-02-11T14:04:42","date_gmt":"2016-02-11T14:04:42","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=2564"},"modified":"2016-02-11T14:17:27","modified_gmt":"2016-02-11T14:17:27","slug":"wrap-your-web-application-into-an-executable-with-single-command","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/javascript\/nodejs\/wrap-your-web-application-into-an-executable-with-single-command\/","title":{"rendered":"Wrap your web application into an executable with nativefier in a single command"},"content":{"rendered":"<blockquote><p>In this post I&#8217;ll show you how you can quickly turn any website into an executable with nativefier in a single command.<\/p><\/blockquote>\n<p>I just stumbled upon an awesome npm package called <a href=\"https:\/\/www.npmjs.com\/package\/nativefier\">nativefier<\/a> that lets you (as stated by the author):<\/p>\n<blockquote><p>to easily create a desktop application for any web site with succinct and minimal configuration. Apps are wrapped by Electron in an OS executable (.app, .exe, etc.) for use on Windows, OSX and Linux.<\/p><\/blockquote>\n<p>At first I must admit I was a bit sceptical, but I tried it immediately and installed it with:<\/p>\n<pre class=\"lang:default decode:true \">npm install nativefier -g<\/pre>\n<p>And, then I tried it out on my <a href=\"http:\/\/carcassonne-scoring-board.com\/\">Carcassonne Scoring Board<\/a> web application (run the command from the command line, OFC):<\/p>\n<pre class=\"lang:default decode:true\">nativefier http:\/\/carcassonne-scoring-board.com\/<\/pre>\n<p>And sure enough, after just a few seconds I got a response:<\/p>\n<pre class=\"lang:default decode:true\">C:\\Users\\Nikola\\Desktop&gt;nativefier http:\/\/carcassonne-scoring-board.com\/\r\nPackaging app for platform win32 x64 using electron v0.36.4\r\nApp built to C:\\Users\\Nikola\\Desktop\\Nikola Bre\u017enjak's Carcassonne Scoring Board-win32-x64<\/pre>\n<p>The contents of the created folder looks like this:<\/p>\n<p><a href=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2016\/02\/nativefier.jpg\" rel=\"lightbox[2564]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2565\" src=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2016\/02\/nativefier.jpg\" alt=\"nativefier\" width=\"662\" height=\"568\" srcset=\"https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2016\/02\/nativefier.jpg 662w, https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2016\/02\/nativefier-300x257.jpg 300w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/a><\/p>\n<p>The app (just double click the Application file &#8211; has the nice electron logo) looks like this when run:<\/p>\n<p><a href=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2016\/02\/nativefier-run.jpg\" rel=\"lightbox[2564]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-2567\" src=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2016\/02\/nativefier-run.jpg\" alt=\"nativefier-run\" width=\"604\" height=\"403\" srcset=\"https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2016\/02\/nativefier-run.jpg 909w, https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2016\/02\/nativefier-run-300x200.jpg 300w\" sizes=\"auto, (max-width: 604px) 100vw, 604px\" \/><\/a><\/p>\n<p>and like this in action:<br \/>\n<a href=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2016\/02\/nativefier-action.jpg\" rel=\"lightbox[2564]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2566\" src=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2016\/02\/nativefier-action.jpg\" alt=\"nativefier-action\" width=\"901\" height=\"360\" srcset=\"https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2016\/02\/nativefier-action.jpg 901w, https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2016\/02\/nativefier-action-300x120.jpg 300w\" sizes=\"auto, (max-width: 901px) 100vw, 901px\" \/><\/a><\/p>\n<p>I&#8217;m truly impressed with this and my thanks to the <a href=\"https:\/\/github.com\/jiahaog\">author<\/a>!<\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"550\">\n<p lang=\"en\" dir=\"ltr\">Wrap your <a href=\"https:\/\/twitter.com\/hashtag\/web?src=hash\">#web<\/a> application into an executable with <a href=\"https:\/\/twitter.com\/hashtag\/nativefier?src=hash\">#nativefier<\/a> in a single command <a href=\"https:\/\/t.co\/Y01YDfokGr\">https:\/\/t.co\/Y01YDfokGr<\/a> <a href=\"https:\/\/t.co\/9iP7AfUrkL\">pic.twitter.com\/9iP7AfUrkL<\/a><\/p>\n<p>&mdash; Nikola Bre\u017enjak (@HitmanHR) <a href=\"https:\/\/twitter.com\/HitmanHR\/status\/697786381351919616\">February 11, 2016<\/a><\/p><\/blockquote>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this post I&#8217;ll show you how you can quickly turn any website into an executable with nativefier in a single command. I just stumbled upon an awesome&hellip;<\/p>\n","protected":false},"author":1,"featured_media":2568,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,4],"tags":[],"class_list":["post-2564","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codeproject","category-nodejs"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/2564","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=2564"}],"version-history":[{"count":3,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/2564\/revisions"}],"predecessor-version":[{"id":2571,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/2564\/revisions\/2571"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/2568"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=2564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=2564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=2564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}