Build web app as local standalone executable

Help & Support
1

Hi!

Do you have support for, or would you know a simple tool that can help build a web app from playcanvas into a standalone executable for eg. Windows? I’m envisioning something that takes a miniature web server and packages the entire lot into an .exe?

Regards

  • Björn
2

Try this: https://electron.atom.io/

1 Like
3

We should probably mention Electron in the User Manual:

https://developer.playcanvas.com/en/user-manual/publishing/desktop/

Currently it just recommends NW.js.

4

Hi, thanks both. Just looking at these sites It will take an artist like me the whole day because of the technical threshold these frameworks come with.

This is the kind of thing that would be great if you built into playcanvas as an export option.

5

Followup, I’ve tried the electron path now, but I’m completely lost on what to put in main.js. Please give me a shout if anyone of you’ve tried it. What I get so far, is when I try the code from their quick start page: https://electron.atom.io/docs/tutorial/quick-start/,

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // Open the DevTools.
//  win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

However, this doesn’t work all the way. I see my content, but mouse interaction is nowhere, also I don’t see all the content.

Comparison:

  1. Local web server hosting app, or hosted at playcanvas:
    image.png972×724 320 KB
  2. launched via Electron using their main.js demo code.
    image.png1024×768 392 KB

Best regards

  • Björn
6

ah, This post helped me get it sorted!

Was using Hammer.js

7

Also, ended up using this https://www.npmjs.com/package/electron-packager

Now I have a folder with lot’s of files and an .exe that works. yeah!

Next step if to see if I can bundle that into a single .exe

4 Likes