DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Blogger and Programmer
Blogger and Programmer

Posted on • Updated on • Originally published at freetechnologyhelp.com

πŸ‘‹How to convert ANY website into a desktop application(In 30 Seconds)

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).

Windows Terminal

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
Enter fullscreen mode Exit fullscreen mode

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 (62)

Collapse
 
christiankozalla profile image
Christian Kozalla

nativefier wraps 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!

Collapse
 
freebeliever profile image
Blogger and Programmer Author

good point.

Collapse
 
patricktingen profile image
Patrick Tingen

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.

Collapse
 
freebeliever profile image
Blogger and Programmer Author

OH! I am very sorry, I forgot to mention that you'll need to install npm first, I'll add that in immediatly.

Collapse
 
joelbonetr profile image
JoelBonetR

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 😁

Thread Thread
 
freebeliever profile image
Blogger and Programmer Author

Thanks! I'll add that in now!

Collapse
 
carehart profile image
Charlie Arehart • Edited on

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".)

Collapse
 
freebeliever profile image
Blogger and Programmer Author

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.

Collapse
 
thumbone profile image
Bernd Wechner

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.

Collapse
 
freebeliever profile image
Blogger and Programmer Author

I am sorry that I made that mistake about the exe file. Just that I am a windows user and I got carried away. :)

Collapse
 
thumbone profile image
Bernd Wechner • Edited on

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 ;-).

Thread Thread
 
freebeliever profile image
Blogger and Programmer Author

Good Point!

Collapse
 
rillus profile image
Riley

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:
Image description

Collapse
 
freebeliever profile image
Blogger and Programmer Author

4* more than the expected time. :D

Collapse
 
oleg26dev profile image
Oleg26Dev • Edited on

Great!

  1. I have built Blazor site app, then converted the site to a Desktop app - it works fine!
  2. I work in windows and have converted the site to the windows desktop app. How to convert it to Linux desktop app? Can I do it in Windows?
  3. 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?

  4. I have made my Blazor site in VS 2022.

    nativefier 'localhost:7062'
    If I run in the VS the site, Opera appears with site then I run the Desktop app it can be run repeatedly, not always but can be
    If VS is closed then I cannot run app.exe : it appears as an app with blank window
    I run VS again and run the site. Now app.exe can be run

Collapse
 
freebeliever profile image
Blogger and Programmer Author

I tested the tool on Windows, so it should work on windows, I am not so sure about Linux.

Collapse
 
oleg26dev profile image
Oleg26Dev

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

Thread Thread
 
freebeliever profile image
Blogger and Programmer Author

good point.

Collapse
 
obakesan profile image
Tor • Edited on

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

Collapse
 
freebeliever profile image
Blogger and Programmer Author

By desktop app, I mean an executable file. And that's exactly what has been produced.

Collapse
 
atomdevelops profile image
Atom

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.

Collapse
 
freebeliever profile image
Blogger and Programmer Author

Thanks for your tip Atom.

Collapse
 
oleg26dev profile image
Oleg26Dev

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?

Collapse
 
freebeliever profile image
Blogger and Programmer Author

I am pretty sure the tool I based my post from also uses electron. However, it does require internet access.

Collapse
 
lunaisakh profile image
Luna Isakh

Why we need web apps?

Collapse
 
joelbonetr profile image
JoelBonetR

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? 😁

Collapse
 
freebeliever profile image
Blogger and Programmer Author

Good Point! But for those who want to do it by themselves, I believe the method I posted might be benificial. But Thanks anyway!

Thread Thread
 
joelbonetr profile image
JoelBonetR

Oh sure, I was just answering the question above

Collapse
 
freebeliever profile image
Blogger and Programmer Author

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.

Collapse
 
jwp profile image
John Peters • Edited on

1st link broken. 2nd link is not helpful.

Collapse
 
freebeliever profile image
Blogger and Programmer Author

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.

Collapse
 
oleg26dev profile image
Oleg26Dev

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.

Collapse
 
freebeliever profile image
Blogger and Programmer Author

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.

Collapse
 
drhyde profile image
David Cantrell

That tool can't even convert a single page into a desktop application, never mind a whole website.

Collapse
 
freebeliever profile image
Blogger and Programmer Author

Sir, I am not the developer of the tool. When I tested it, it worked fine.

Collapse
 
dangus21 profile image
angus

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

Collapse
 
freebeliever profile image
Blogger and Programmer Author

Thanks angus for the tip!

Collapse
 
codeknight profile image
Uthman Abdurrahman

Can work for mobile as well

Collapse
 
freebeliever profile image
Blogger and Programmer Author

You're right

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›