Create a Desktop App via Electron

Hi, Just had a go at making a desktop app firstly with the example (Weather App) which works fine. Then I had a go at trying to make a Desktop app out of one of my own apps which is not fine :slight_smile:

The only thing I did differently to my app was not to include any code in the properties window for Package.json as I don’t have any dependencies like the example weather app.
I included an Icon (Icon.png) in a folder called build in my project folder and included the folder name (build) in extra headers in the properties window. The size of my forms are coincidentally the same size as stated in ElcetronMain.js

When I try to run the app via electron from the run menu, I get a message in the left hand corner saying setting up Electron. That’s as far as it gets. An empty folder named Electron is created in my project folder.
Can somebody tell me what I’m missing just to get app running on screen.

What is in your Package.json property?

Hi George, I left that as is. Do I need to change?

  "name": "{title}",
  "version": "{version}",
  "description": "{description}",
  "main": "electronMain.js",
  "scripts": {{
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  "author": "",
  "license": "ISC",
  "repository": "",
  "devDependencies": {{
    "electron": "^7.1.0",
    "electron-builder": "^22.0.0",
    "npm": "^6.13.0"
  "dependencies": {{
  "build": {{
    "appId": "{id}",
    "mac": {{
      "category": ""

If you left it as is, you should be fine.

Can you zip your project folder and send it to me? I’ll give it a try.

Hi George, sent that to your email address via Google drive



Thanks - we are able to reproduce this. We’ll get to work.

Fixed in 8.0.4.

Hi, George that’s great. For some reason I only get a fraction of my icon in the top tool bar?
Also, is there a way of getting rid of those pesky scroll bars ?

Check that your icon is actually the right size.

Can you include a screen shot of the scroll bars?

Vertical and Horizontal Scroll bars present when app is launched

Look at the electronMain.js property. You set the initial form size there in lines 11 and 12.


Yes I did that George

function createWindow() {{
  // see for all options
  mainWindow = new BrowserWindow({{
    width: 645,
    height: 890,
    title: '{title}',
    webPreferences: {{nodeIntegration: true}},

Hi George, with regards to the icon size I can see that the Electron build sources the icon from the Phone Gap build properties (Size 1024x1024). So I looked up the icon size for a windows build from here : and the size no less than 256x256 is recomended. I exchanged this in the PG build properties but got the same result as shown in the top left corner of the screen shot. Builds the launch Icon fine with both sizes.

So are the scrollbars OK now?

Yes, it uses the icon (1024). It has to be at least 256x256 for Windows (512 for MacOS), so a 1024x1024 is fine. I just ran a test here - I’m seeing my full icon. Can you try a different icon and see if the same happens?

Scrollbars are still there, I can pull the app out vertically and horizontally and they’ll disappear. I tried another icon, one of yours from the Weather app (512x512) and it worked fine? The only difference I can see between yours and mine is the size, mine at 330KB at 512x512 and yours at 57.2KB.


Could you try this in CSS code?:

overflow-y: hidden; /* Hide vertical scrollbar /
overflow-x: hidden; /
Hide horizontal scrollbar */

I didn’t test. Hope this helps.

Best regards,

Adrian Nicolaiev

1 Like

Thanks, I did try that in styles (Properties Window) but it didn’t work for me.

What happens if you use really big values for the size?

My guess is that your icon isn’t formatted properly. Try displaying it on your screen and making a screenshot of it, then using the screenshot.

Ignore my last reply to you. That did actually get rid of the scroll bars :slight_smile: -) originally I put the code in the styles properties for the Form when I should have put the code in the styles properties window for Project properties and global code.

1 Like

Hi, tried taking a screenshot of the icon and making a new one in paint but with the same results. Went bigger (3354x4181 pix) still had same results. Used online png compressing software ( to see if I could make smaller and still have the same result. The strange thing is that when the installer is going it’s showing the exact icon in the top tool bar that I want in the tool bar of my app :slight_smile: The icon works in everything else but that top tool bar?