Convert Bubble App to Windows/Linux/Mac/Chrome application or Chrome pop-up Plugin

[nomadkelley]

I was looking for a way to easily create a Chrome extension for certain function of my app and found this.

https://mikethedj4.github.io/WebDGap/

Convert any website to a native Windows/Linux/Mac/Chrome application.

Super cool and easy to use. I’m using this to “install” a version of my app. Make sure you tweak your app version so it doesn’t feel like a website opened in a wrapper. (which is exactly what it is.)

Hope someone enjoys this or finds it useful.

Uploaded an example of the ToDo app as a Chrome App.

[supernaturally]

Very, very nice.

@nomadkelley - Do you know of any boilerplates for a desktop app (similiar to photon kit)? It would be nice to replace my web app’s slider menu with a native sidebar.

[supernaturally]

Anyone having luck with this? I’ve followed his tutorial (changed the .plist file, etc.), but the app just shows this:

However, if I show package contents on OSX and go into Contents --> MacOS --> nwjs.exec …it works:

You can see the demo website working. I must be missing something very basic, did anyone else have any luck launching the .app directly?

[mikethedj4]

A little late (just recently joined the Bubble forums) Anyway I’m the developer of WebDGap. It has been updated several times since this post. Is this problem still persistent? If so anyway you can share the source code that way I can properly debug the problem?

[mikethedj4]

Nice I didn’t know about Photonkit! NOTE: The reason why WebDGap uses nwjs and not Electron is because electron runs ONLY on 64bit processors. I wanted my application to be cross-platform while still supporting 32bit processors and still giving you desktop notifications as well.

I like Electron but you have to adapt your code to run with it. Majority of the time your regular web app will run right out of the box with nwjs.

[gurun]

@mikethedj4 I like your initiative, but it seems to not work properly with the ones I tested, a little buggy like @supernaturally stated.

I recommend Electron - using nativefier. Ive built multiple bubble apps using it, even Im using it with some custom JS and CSS for a desktop version of the bubble builder.

To built for 32 bit make sure you use the following parameter when compiling " --target_arch=ia32"

Read more at: Mobile app live version

[JustinBallou]

When do you think you will have the desktop version of bubble ready to test? Interested in giving it a try if option is available

[mikethedj4]

Can you explain your process (or record it) that way I can properly assess and fix whatever error occurred?

[gurun]

It`s more or less the same as running it in the browser, but I wanted to have it open for a specific app I was editing.

As for CSS/JS i just made my own stylesheet to make bubble be a little darker interface (like a code editor), and some JS for keyboard shortcuts.

Use the following guide, but use the URL to your app if you want it to be app specific, if not just use the bubble main URL. ( https://bubble.io/page?type=page&name=yourpagename&id=yourappname&tab=tabs-1 ). First time you need to log in.
Mobile app live version

@mikethedj4 I opened some webdgap app on windows and got stuck at the nw.js screen. I¨ll try to have a look at it at a later point.

[alejandrowunderlich]

Wow… 4 year post! Going out on a limb here but, could you write a quick tutorial on how to accomplish this?

[johnwilliams]

I know there are other options out there but I found one that seems to be pretty straightforward for creating native desktop apps and menu bar apps.

I haven’t tried it yet since my bubble app isn’t finished yet so I can’t really speak to it’s success/disadvantages.

ToDesktop - Convert your Web App to a Desktop App in 2 minutes

[003sukumaran]

Hi, I just created an app on Bubble, I’m not very sure which URL is the apps URL, I copied the URL of the preview mode on live view with debug set to false. WebDgap generated a zip file, but upon extraction the nw.exe just shows NW.JS. I use windows not mac, so I’m not sure if I missed a step since your tutorial is tailored for mac. I pasted the URL, it generated the zip file and I extracted it. Is there anything I missed? Perhaps the URL I chose was wrong, but I’m not very sure where the app URL is, as couldnt really find a launch option, the closes being preview in live mode. Thank you.

[003sukumaran]

Did you find a solution to the nw.js screen?

[HappyBuilder]

Has anyone been successful with using this tool for bubble?