How to deploy existing wasp app to Electron for desktop application ?
HI, I have built a react app by using wasp SaaS method. I can run and use it by using browser and wasp commands. However, i have to deploy this application to desktop environment to make it downloadable and local. There are multiple feature such as AWS lambda calls in my app. I have install and create basic electron app but I don't know how to combine or move my app into this electron app. The folder structure and other stuffs are different than the vanilla react app and electron app therefore i am not able to integrate it with electron.Thanks. Best
6 Replies
Hi @caqlarreizz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I'm sorry, but the provided knowledge sources do not contain information on how to deploy a Wasp app to Electron for desktop applications. Wasp is a framework designed for building web applications and the deployment guides provided are focused on deploying to web servers or cloud hosting providers like Fly.io, Netlify, Railway, and Heroku.
For deploying a Wasp app, the general steps involve generating deployable code with
wasp build, deploying the API server (backend), deploying the web client (frontend), and deploying a PostgreSQL database. The built web client is a bunch of static files that can be deployed to any static hosting provider.
However, integrating a Wasp app with Electron to create a desktop application involves a different process that is not covered in the provided sources. You might need to look into Electron's documentation or seek advice from the Wasp community or other resources for guidance on this.
For more information on deploying a Wasp app, you can refer to the Wasp deployment documentation (https://wasp-lang.dev/docs/advanced/deployment/overview).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @caqlarreizz, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?@caqlarreizz , Wasp is made for building web apps, not desktop apps -> while Electron does enable you to build desktop apps in JS, there are some inherent differences, and there is no documented / supported way to port Wasp app into Electron app. We do have ambitions to look into this in the future and add some kind of support, but at this moment we can't help you out much. You could look at the code Wasp generates in .wasp and try to port that to Electron, possibly automatically so that it becomes a part of the development/build step, but that would be quite involved and I am not sure what hurdles you might on the way.
I am curious, why do you have to make this app downloadable and local?
@martinsos hi martin, The user side request that this application must be local for security purposes. They also have own seperate database servers. Besides, i also want to provide web based solution for others. Therefore i want to use electron for desktop environment and normal server + web-app files for web environment. I need both local and web solutions. In this purpose, when we build the app there are server and web-app directories inside the .wasp/build/ one of them is server and other is client side. Which files do you thing i should focus on by copying pasting to electron app?
I don't know enough about electron app I am afraid to be able to help out with that!
So you would have a single instance of a web app, hosted publicly, with its database, and then multiple local/desktop instances of a web app that have their own databases? Local database, on the same machine as desktop web app? So these apps are per one person, not collaborative at all? Then the auth doesn't make any sense, but you will have auth in web app? Sounds like these are not really the same apps any more then.
If clients needs a web app to be internal, inside their private network, and not accessible from the outside, so for example only their employees can use it and it is not open to any kind of attacks from the outside, then it would make much more sense to instead just deploy it to their internal network / server and that is it -> it is accessible via browser but only to those who have access to the internal network. This is usually called "on-prem" / "on premises" deployment and is typical strategy for this kind of stuff, and is something you can do with Wasp.
Thanks for your reply, I will think about that. I currently be able to open electron in my project and If I can deploy it I will replay here. thanks
Take a look at Capacitor by Ionic. It may be possible to create a cross platform app from the build folder of your wasp app. You can ask ChatGPT to help you out. The reason I looked into this is because when I use the mobile version of my app my phone auto locks (this is a general issue with using a web browser in general on mobile) and cant have it doing that so I want to convert my existing app to a native app so I can prevent the auto lock. I don't know what issues I might run into, but Capacitor seems promising since it's taking the static client output of the wasp app, in theory at least.