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.
Thanks
Will.

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": "public.app-category.developer-tools"
    }}
  }}
}}

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

Will.

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 ?
Thanks
Will.

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.

33%20PM

Yes I did that George

function createWindow() {{
  // see https://electronjs.org/docs/api/browser-window 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 : https://www.electron.build/icons 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.
Thanks
Will.

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.
Thanks
Will.

Hi!

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

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

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.