I can't think of any better way to start the day than by creating a desktop app. Can you? Today, I will be giving you the ✊power to convert any website into a desktop application.
Step 1:
Download the LTS of Node JS: https://nodejs.org/en/
Then open command prompt(On windows) or the equivalent on your operating system(terminal for mac).
Note: It does not matter what OS you are using.
Step 2:
Now we will need to install a github tool called nativefier to your device globally.
To do so, type in the following script into the command prompt(or the equivalent) and hit enter:
npm install -g nativefier
Give it a minute to install.
Step 3:
After nativefier has been installed, type the following code, replacing the words your website with the website domain you want to convert into an app.
nativefier 'your website'
Here is an example:
nativefier 'dev.to'
After that, hit enter and wait for it to load. This time, it might take several minutes.
Step 4:
Finally, when it has finished loading, all that is left to do is to test out your own desktop app.
To do so, open the path that has been shown on the command prompt. You can do so from the file opener of your OS. File explorer for windows or finder for MacBook's.
Once you are in the path provided, open up the executable file and your app should pop up.
Conclusion:
Thanks for finishing this post, I hope it helped you. If you have any questions, please comment below. I will respond ASAP.
Note: This post was first published on https://freetechnologyhelp.com/how-to-convert-any-website-into-a-desktop-applicationin-30-seconds/
You can read another post a wrote here:
https://dev.to/freebeliever/you-can-build-anything-with-these-6-characters--3623
Oldest comments (61)
Probably better - and less resource draining - to just use the built in functionality in Chrome for this. It will take less than 30 seconds
That is a good point, this post is for educational purposes only.
Hey, can you share the chrome's built-in function that generates desktop app out of a web app?
I am curious as I wasn't aware of this feature!
When on the page you want to make app for, open the main Chrome menu and select "More tools... > Create shortcut". Follow the prompt and be sure to check "open as window". Voilà, you have a 'standalone' app!
For sites that are installable PWAs, just click the 'install' icon that appears in the address bar
Thanks for the tip!
Thanks! Really apprecaite that!
But there must be a difference, yea? I haven't given the "nativefier" process a try, but I imagine what is being described in the post isn't "just" a shortcut or/and "just" a web app - there has to be some "local app" utility to what is being described. I am assuming - I haven't done the nativefier thing, yet, but I am going to check it out :)
Thanks!
Step 1: Open command prompt
Note: It does not matter what OS you are using.
Step 2: npm install -g nativefier
Result:
'npm' is not recognized as an internal or external command,
operable program or batch file.
OH! I am very sorry, I forgot to mention that you'll need to install npm first, I'll add that in immediatly.
Just put a note on downloading the LTS version of node (which already comes with npm) and not the experimental one, which comes stand alone 😁
Thanks! I'll add that in now!
If it matters not what OS you are using, why do you reference an exe file? Seems to me, to be a very Windows- centric term, or? Just curious.
I am sorry that I made that mistake about the exe file. Just that I am a windows user and I got carried away. :)
No problem. Just checking really ;-). Easy to do as a Windows user. Given Windows has the lion's share of the desktop market it's all too easy to forget the rest of them.
If you change "exe" to "executable file" it's more system agnostic. Small change.
It's almost a mini version of what US culture does when it comes to media ;-).
Good Point!
Why we need web apps?
We can use a PWA (Powered Web Application) to build from a single source code something that can be installed in every device (desktop -any-, android, ios...) Which is pretty convenient don't you think? 😁
Good Point! But for those who want to do it by themselves, I believe the method I posted might be benificial. But Thanks anyway!
Oh sure, I was just answering the question above
Web apps are apps you can use on the web without installation, however, this tutorial teaches you how to convert a web app into a desktop app.
Good post, it was a nice read!
Thanks a lot!
"In 30 Seconds"
"Step 2: Give it a minute to install."
fail
I guess it's a bit of a clickbait. :( Sorry about that.
1st link broken. 2nd link is not helpful.
I am very sorry, it should work now.
freetechnologyhelp.com/how-to-conv...
And I am pretty sure the second link works too! It's a really good read.
Thanks for sharing
You are the most welcome!
just found out you can spin your local node project, point the nativefier to the localhost url of your app and it will build, so, do with that what you will
Thanks angus for the tip!
Thanks, indeed, for the heads-up on this. As you've both appreciated and been responsive to feedback, I'll share a couple other suggestions as well as observations for readers.
First, you could really help many by offering a link to the github page for the tool itself, which has more detail such as what it's about, why it can be helpful, etc.
For me, a key value for the tool was shown in that author's noting that "I built this because I grew tired of having to Alt-Tab to my browser and then search through numerous open tabs" to find some frequently used app.
I can relate to that, but let's not start a debate over "too many tabs". :-) And yes, as others have noted, shortcuts are another option--whether in the browser or on the desktop. The github page on the tool indicates how it builds an electron app from the page you point it to, so this is indeed a very different result, for better or worse to some tastes.
Anyway, that page also shows how to run it via docker rather than installing it, which may appeal to some--and could be worth you noting. (Some folks won't see this comment.)
It even indicates the specific npm and node versions currently supported ("Node.js ≥ 12.9 and npm ≥ 6.9") , though I appreciate Joel's point was not to use an experimental version.
Back to your article here, rather than refer to it as "a github tool called nativefier" (which implies it's a tool made BY github), it seems better wording might be "the open-source tool called nativefier, available via github".
Finally, and this is a minor quibble: that's pointed to (in your Step 2) as something to "install"... "to your device globally". That can also be perhaps confusing to some. What "device" do you mean? This is for desktop apps, but device can imply mobile.
Maybe "machine" would avoid that, while being generic enough to apply to laptop, workstation, server, etc. Also, why refer to "globally"? Again, some could be left to misinterpret what that may mean.
Just trying to help. Again, thanks for the article and heads-up on the tool.
(And yes, apologies to those who may complain that this article and these comments are all as long as the github page, so "why not just point to that, ffs?!" Fair point. Again, that was a motivation of my first suggestion here. Some could see that and be served entirely by that. The rest I offer is about this article as-is, for those who may read on here...and how it can be tweaked for those who may well NOT read "all these comments".)
Thanks for your feedback. I am sure it took you a lot of time to write that, I really do apreciate it. I am sorry for the minor misunderstandings, and I'll work on them as soon as possible.