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
Latest comments (61)
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.
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.
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.
thank tip
You are welcome.
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.
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.
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.
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.
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
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.