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 web...
For further actions, you may consider blocking this person and/or reporting abuse
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.
I have built the Desktop app, run it - it works fine.
Then: run, exit, run, exit, run and see "Loading..." only in the main window and cannot run the app again asa full functional app.
If you are encountering problems, please contact the developer of the tool. When I tried the tool, it worked fine. It generated an excecutable file which is what I needed.
That tool can't even convert a single page into a desktop application, never mind a whole website.
Sir, I am not the developer of the tool. When I tested it, it worked fine.
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!
Can work for mobile as well
You're right
Thanks a ton. I was looking for something like this 🥲❤️🙌
You are the most welcome!
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.
Good post, it was a nice read!
Thanks a lot!
Probably better - and less resource draining - to just use the built in functionality in Chrome for this. It will take less than 30 seconds
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!
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!
That is a good point, this post is for educational purposes only.
thank tip
You are welcome.
Why do you complicate everything you do?
Bonus :) I suggest checking the "Open as Window" option.
Ohh No! For an event where you will spend so much energy, set up a node, search for npm, go on an interstellar journey.
You seriously don't need such things.
First of all, this post is wrote for educational purposes only. Second of all, what you did was you created a shortcut that basically is the same as a website. What I created was an excecutable file.
The title looked like a Click Trap. In less than 30 seconds, we saved our developer friend with this solution.
Almost any online article can be referred as a clickbait. It is logically possible to do it in 30 seconds.
Thanks for sharing
You are the most welcome!
"In 30 Seconds"
"Step 2: Give it a minute to install."
fail
I guess it's a bit of a clickbait. :( Sorry about that.