Creating Desktop Apps

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:

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

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

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.

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:

Select Electron:

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

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

Electron Settings

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

Select Electron:

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


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:

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

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

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

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:

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:

3 Likes

@Teodor thanks for this.

Does the Node integration allow me to add npm packages to my app?

1 Like

A post was split to a new topic: Electron not visible as option for Desktop Apps

Are there actions that allow us to save files to the desktop’s file system?

Examples:

  1. Allow a user to upload an mp4 that gets attached to a record (e.g. task or client record) in the Electron app.
  2. Data from an API that has related attachments that need retrieval and storage on local system.