Discuss

Creating Desktop Apps

On this page

You can build standalone Desktop Apps with Wappler, thanks to the Electron integration. Building Desktop Apps is as easy as building a website in Wappler. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application.


Setup Desktop App Project

The first thing we need to do is to create a Desktop App Project in Wappler. Click the Projects icon:

Screenshot_1|690x381

Open the New Project tab (1), select Desktop (2) and click Blank (3):

Screenshot_2|690x381

Add a name for your project and select a local folder, where it should be saved:

Screenshot_3|690x381

Your desktop project has been created. You will see a blank HTML page, where App Connect, Freamework7 and Cordova are included by default. Framework 7 includes a Desktop Theme, which is designed to look, feel and behave great in desktop apps. You can however, open the project settings and set Bootstrap 4 as a default framework if you like it better.

Screenshot_5|690x382

Add Electron to Your Project

Now as we have already set up our project, let's add the Electron platform to it. Open the Platform menu:

Screenshot_6|690x382

Select Electron:

Screenshot_7|690x382

A dialog asking you if you want to install Electron in your project appears. Select Yes:

Screenshot_8|690x382

You will see the progress of Electron installation in the terminal. Once it's completed you will see a successful message:

Screenshot_9|690x382

Electron Settings

You can adjust the settings for your app, by clicking the Project Settings menu:

Screenshot_11|690x382

Select Electron:

Screenshot_12|690x382

Here you will find the settings for your app - from App and Installer Icons to App Window options:

Screenshot_13|690x382 Screenshot_5|690x382

You can customize the following options:

Width and Height: Set the initial Width and Height of your App

Resizable: Select whether the app window should be resizable or not

Full Screen: Whether the window should show in fullscreen. When turned off the fullscreen button will be hidden or disabled on macOS.

Kiosk: Enables the kiosk mode - a full-screen mode, which hides the window size controls

Always on top: Whether the window should always stay on top of other windows

Frame: Enables or Disables the frame around your App

Node Integration: Enables or Disables NodeJS integration

Emulating and Building Apps

When you finish working on your app design you can preview your app by clicking the Emulate button:

Screenshot_1|690x382

This will open your App directly so you can preview it:

Screenshot_2|690x382

In order to build your app, click the Build button:

Screenshot_18|690x382

You can see the build progress in the terminal. A success message appears, when it finishes:

Screenshot_19|690x382

Debugging Apps

You can use the Debug option in order to debug your apps, using the Dev Tools (the same ones as in the Chrome browser). Just click the Debug button:

Screenshot_3|690x382

Then when you emulate or run your app, you will have the Dev Tools enabled and open by default. There you can inspect your layout or check for errors:

Screenshot_4|690x382