Create Desktop Apps With Web Technologies – NW.js
Create Desktop Apps With Web Technologies – NW.js
In this video I will show you how to use the NW SDK (Node-Webkit) to create a desktop app with web technologies (HTML/CSS/JS, React, Node, etc). We will take a vanilla JS app and create a desktop version of it in about 10 minutes.
Code: https://github.com/bradtraversy/breakout_desktop_nw
Vanilla Web Projects Course: (FEBRUARY1399)
https://www.udemy.com/course/web-projects-with-vanilla-javascript/?referralCode=F9B7C7FED834F91ADE75
💖 Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia
Website & Udemy Course Links:
https://www.traversymedia.com
Follow Traversy Media:
Tweets by traversymedia
https://www.instagram.com/traversymedia
https://www.facebook.com/traversymedia
Hello! Thanks for this amazing guide! Really neat and nice! But, will this app work with a filesystem as node js does? For example, i’d write a tiny app for myself via node js + robotjs (to press some keys automatically depending on whether mouse moves or stands steel), and would be the nice to build it from the .js file as "pkg" does. But if not, the i will use a npm’s pkg thing to compile an app for mac from .js with robotjs.
When installing nw-builder it shows this error "nw-builder depends on request which is deprecated".
I get this error when I type _npm init -y_ :
_npm : The term ‘npm’ is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again._
_At line:1 char:1_
_+ npm init -y_
_+ ~~~_
_+ CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException_
_+ FullyQualifiedErrorId : CommandNotFoundException_
Okay, i solved almost all problems now… I mean, it runs as a dev, but, i can’t npm run prod, because has problem with symlink on windows, someone know how to fix this? thanks
I prefer NW, the electron with IPC crap drive me nuts
why anyone use windows ,_, ?
Which one is better electron or NW ?
Just stumbled on this project and enjoyed your tutorial thoroughly. I was wondering, since I do open and closed source projects, is there any tutorial on using NWjs with V8 compile snapshot and bundling the resulting project? Mainly for Linux and Windows and cross compiling for both on a Linux machine? I’m finding much more information on Electron and that is what I have been using, just for some projects, I would need that source protection for and the docs haven’t been able to help me all that much. You know of a tutorial on that subject that I could watch or where there would be a more in depth written tutorial? I appreciate the help. Thanks!
Wait wot Why tf Do u sound So similar to Stefan Salvatore From Vampire Diaries
Hey man, I found complicated making desktop apps with NW.js and frameworks like react.
Can you make some tutorials on this area? By the way love your videos!Great job! 😃
For all those who are having issues installing "nw-builder -D" :
Please install Git on your machine and then restart your machine. Once restarted, please install "nw-builder -D" again and it should work immediately. I had the same issue. The above step worked for me. I have Windows 10.
2:14 Please note that nw installation takes a pretty good amount of time(around 10-15 mins), so be patient.
How do you make a web app like youtube
Hi Brad. I really like your videos got so much to learn from it. Can you please create a tutorial on electron js vs neutralino js and nw js??? Which is the best one, have good community and support etc. Thank you 🙏
Hello, awesome video! I am stuck with something though and that is including a script when it builds, as my node project builds client sided react code and needs multiple scripts to run at once. How can I include this in the build so that it executes my "start" script when you open it?
Actually NW is way better for a production build than Electron since NW provides much better production support like stripped off debugging tools and code protection support via full compilation. Planning on switching all my Electron projects to NW.
I followed all the steps but I get this exception. Please help
Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode" index.js :7
What do you think about NWjs vs Electron? in terms of security? ease of building? and updates? I’ve been dealing with Electron lately and it was really tough.. I hope to get an answer from you! Thank you 🙂
Now i can run it and create build, but, if i copy and paste on desktop it not will run, windows OS here, for windows only works with shortcuts? if i want distribute the application to a friend test, i need to zip the entire folder and send to him?
Brad Traversy’s daily schedule:
Wake up: no need. I never slept.
Eat breakfast: Coding is my nourishment.
Code: 10 am – 10 am the next day
Shoot videos: 10 am – 10 am the next day
Edit those videos:10 am – 10 am the next day
Brad is an alien 👽 confirmed!!!!
What are your views about NeutralinoJS? Is it production ready?
Thanks! I ran across LDtk, which is a level editor. Its implementation for linux currently requires nw to run it. This got me wondering how I might use in for one of my own apps in the future.
is it faster than electron
Electron is a pain in the ass to work with but has better documentation then nw.js. I tried learning electron and its just so error prone without being clear on whats causing the error think i’m going to stick with learning nw.js but would need more tutorials or even a course anyone know of any uptodate courses that help you learn nw.js?
More NW.js tutorials <3
Have anyone tried appjs since it’s smaller and uses Node.JS only
YOU ARE A HERO
downloading [====================] 100% 0.0s
PLSS HELP ME wHAT is how to fix i am begginer
(node:3592) UnhandledPromiseRejectionWarning: Error: EPERM: operation not permitted, symlink ‘VersionsCurrentHelpers’ -> ‘D:devnode_modulesnw-buildercache .51.0-sdkosx64nwjs-sdk-v0.51.0-osx-x64nwjs.appContentsFrameworksnwjs Framework.frameworkHelpers’
(Use `node –trace-warnings …` to show where the warning was created)
(node:3592) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `–unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:3592) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Electron?
when i build my app i try to use executable on my dektop it can’t find specific files.
Can you make a video about Tauri?
Why do you make two package.json files? I put everything in one and it works as intended
Thanks a lot
Nw.js allows you to convert all of your javascript into a binary which makes it much harder for users to screw around with your code. That way you don’t expose your code base to the world. Can Electron do that?
Thanks this looks great. Does it work for ReactJS and Angular apps as well ?
: ) My mentor congrats on 1M subs …. Brad just wanted to ask can you build desktop-database applications with this technology…thanks
when i run "npm i nw@0.44.1-sdk nw-builder -D" it fails due to a not found file, since 2020 something changes to work?
OBS: i tried 0.62.0 as well
Hello sir , can you make a video in which you integrate reactjs ?
I get an npm error doing this (npm i nw@0.44.1-sdk nw-builder -D)
my game on my Chanel is actuality use nwjs, i love it. Also you forget you can connect the vscode debugger to live debug with break point.
“`
"runtimeExecutable": "${workspaceRoot}/node_modules/nw/nwjs/nw.exe",
"runtimeArgs": [
"–remote-debugging-port=9222",
],“`
Nice tutorial — really clear and concise. I ran through your process, but encountered a bug (Attribute ‘program’ does not exist (‘/Breakout/index.js’)) What tools do you recommend for debugging?
I could follow and created an app for win & linux, but not osx (error below), any idea? (I am on win10, my html is just 1 text, no css, no script):
> nwbuild –platforms osx64 –buildDir dist/ src/
Latest Version: v0.52.0
Using v0.52.0 (sdk)
Create cache folder in C:HPNJSNWjsnode_modulesnw-buildercache .52.0-sdk
Downloading: https://dl.nwjs.io/v0.52.0/nwjs-sdk-v0.52.0-osx-x64.zip
downloading [====================] 100% 0.0s
(node:10556) UnhandledPromiseRejectionWarning: Error: EPERM: operation not permitted, symlink ‘VersionsCurrentHelpers’ -> ‘C:HPNJSNWjsnode_modulesnw-buildercache .52.0-sdkosx64nwjs-sdk-v0.52.0-osx-x64nwjs.appContentsFrameworksnwjs Framework.frameworkHelpers’
(Use `node –trace-warnings …` to show where the warning was created)
(node:10556) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `–unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:10556) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Hey, would you please explain/cover Electron/NW.js alternatives like NeutralinoJS or Tauri?
Due to Apple making everything 64bit we had to make an NW.js app for a client. It HAS to run from a DVD or Flash drive. The app has 4GB of videos and thousands of thumbnails. NWJS take forever and a day to launch on OSX. Uncompressed btw. Spotlight seems to be doing something? Windows launch times seems "ok"… I’ve seen other devs posting similar issues about slow disc launches but nothing seems to be done about it. Shame but it’s a non-starter if the apps won’t load fast.
At 1:54 I don’t understand what you are doing. What coding program are you using? Thanks for your help 🙂 My coding program doesn’t have anything that says, "Terminal" at the bottom for typing.
This is what I love about this channel @TraversyMedia. Take any problem, and Brad is here to solve it with ease. 😎
do i install the sdk or the actuall app
the app just doesnt run for me. When i do npm run dev, it gives the messages seen in the video, but after that nothing…
Thank you for the great video. I tried to build application with ‘create-react-app’ and it’s generating applications for windows and mac without any error, but not for linux. My platform is Ubuntu 19.10. Any idea?
Error: nw.js appears to have failed to download and extract. Attempting to download and extract again…