DEV Community

The Jared Wilcurt
The Jared Wilcurt

Posted on • Updated on

Holy shit NW.js is so easy

Okay, so like.... you ready for this. Don't blink

1. Make an HTML5 file, it can even just be an empty file, called index.html
2. Make a package.json, you only need these 3 lines:

{
  "name": "my-first-desktop-app",
  "main": "index.html",
  "scripts": { "start": "nw" }
}
Enter fullscreen mode Exit fullscreen mode

3. npm install --save-dev --save-exact nw@sdk && npm start

That's it. You just made a desktop app. πŸŽ‰ 🎊 ✨

Seriously, that was it. 2 files, 3 lines of code, and like 1-ish? maybe that's two commands? I don't know, it's freaking easy though.

Time yourself, see if you can do it in under 60 seconds. Post your times below. Always speedrun your hello worlds.


Oh, and you can also just do any Node stuff from the DOM directly. And the nw api is pretty easy-peasy.

<!DOCTYPE html>
<html>
  <head>
    <title>My first desktop app</title>
  </head>
  <body>
    <script>
      const fs = require('fs');
      console.log(fs.readdirSync('.'));
      nw.Window.get().showDevTools();
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

The Node and Chromium version it comes with is always the latest. Gets updated within 24 hours of a new release of either. So, you probably don't need Babel.


"But the filesize is gigantic?"

I gotchu homie


Any other downsides I should know about?

Why you gotta be so negative, can't you just be happy for me


For a more in-depth and beginner friendly tutorial on NW.js:

Top comments (2)

Collapse
 
tmblog profile image
tmblog

How can I create a shortcut to run the app without command line each time? I tried to run the nw.exe file but that doesn't load the actual program just the NW splash screen.

Collapse
 
thejaredwilcurt profile image
The Jared Wilcurt • Edited

You can create a windows desktop shortcut that points to the nw.exe file followed by a space, and then in quotes the path to the folder that contains your package.json file.

C:\nw\0.60.0\nw.exe "C:\projects\cool-project"

You can also right-click the shortcut after creation, go to properties and change the icon to your own .ico file, and rename the shortcut to whatever you want. You can even point to the nw.exe in the node_modules of your project if you want.

C:\projects\cool-project\node_modules\nw\nwjs\nw.exe "C:\projects\cool-project"