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
Top comments (61)
nativefierwraps a single website in a big heavy electron app! Electron comes with an installation of chromium in order to render the page and a bunch of more dependencies. It is a massive overhead just for having a shortcut to your favorite sites on the desktop.If you want to offer installing a website that you author as a developer, just make the website a PWA and voila!
good point.
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!
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.
Seems to have done the trick - maybe took 2 minutes, but I was on a mobile data connection. I can see this perhaps being useful for controlling the website experience e.g. if you're running a kiosk and don't want users opening new tabs etc. Or if you want to make your site available to staff/clients via a desktop link rather than making them remember a url...
Here's an example of the result with one of my projects:
4* more than the expected time. :D
Great!
My test Web app uses Logger and I see log records when I run the app.
Is it possible to view Log records in the desktop app?
I have made my Blazor site in VS 2022.
I tested the tool on Windows, so it should work on windows, I am not so sure about Linux.
The big disadvantage of this tool is: you create a wrapper for a site but the site should be available too(!). For example, if I run VS2022 with ASP.NET site and create a wrapper it works while VS2022 is running. If I stop the VS the app does not work. The idea of Electron.Net is better: it can create really desktop app
good point.
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!
This is smoke and mirrors, it's just wrapping a website under electron, how is this any different to running chrome with a website in kiosk mode? Is it going to download all the CSS, js, HTML and back end code from the server compile it into a native machine coded binary that runs natively on the desktop ? When I have no internet will the app still work etc?
Its a neat app sure but saying it converts a website into a desktop is misleading. Its like me installing some skin on Windows and saying hey it turned my computer into a mac
By desktop app, I mean an executable file. And that's exactly what has been produced.
Oh, I thought it works like Electron.NET - builds Desktop app independent on the source web site.
I want to create Desktop app from my web site and provide it to my customer.
He has the app-> db server, i.e. all what he needs to work. I should provide site too?
I am pretty sure the tool I based my post from also uses electron. However, it does require internet access.
The package installed just takes the website source inside an Electron app.
I've seen a couple of people trying to port their React web applications to desktop using nativefier, and that's honestly not a good idea. Firstly, it's quite resource intensive because it isn't optimized for each operating system. Secondly, you will encounter a lot of build issues.
If you want to make a desktop application with JavaScript, then just make an Electron app from scratch instead of porting it over using nativefier. Or, you can use something much better (not biased) like Tauri instead of Electron which doesn't absolutely chug your RAM.
Thanks for your tip Atom.
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.