Why is it so difficult to make an exe from a html5 project?

[rothers]

EDIT: I'VE FOUND A WORKING SOLUTION FOR MAC, PC AND LINUX, SEE POST 4. IT'S STILL A COMMAND LINE 1990S STYLE NIGHTMARE THOUGH.

Wew lad... I've been trying to wrap up some of my games so I can upload them to steam (etc.) and I'm not getting very far.

Methods I've tried:

Macgap: - does not seem to support webaudio - just loads of errors which I don't get in Chrome.

Fluid: - builds the app fine... but crashes on loading... with webaudio errors.

Electrum: - this program is just a nightmare to set up, I can get it to run correctly but I can't actually get it to build an app, it seems you have to install loads of hacks along with bloody 10gig of Xcode.

Maybe I should just drop mac support? Move to a PC to build these?

Why is it so difficult? Every guide to it is a long terminal based nightmare, which is a shame because on the mac, via webview, the exes end up being really small, I understand when build with chromium you end up with 50meg+ exes.

How is the PC side of this? Is it more straight forward? I've read the guide posted here and it seems to be but I'd like to hear opinions.

[JackFalcon]

Hey @rothers I'm doing the same on PC atm...

Happy to report the PC version of the carnage... with <audio>. : )

I'd never heard of Macgap, fluid, or Electrum. But did that similar trifle with the Xcode.

Direction here was then,  Ionic and Electron. Idk. 

If we mixed them together, it would make great soup! Or something...

Ionic was ok. Ran some AR on it.

[rothers]

I managed to get Electrum working last night but it's working in that way where I don't know HOW I got it to work in the end.

I end up with a folder which will run the game as an app so I need to try zipping it up and seeing if it will run on another mac I guess. My main worry is the other mac might need loads of libs installed to run it. The bad news is the exe is >160MB for a 1.5MB html5 game!!!

If you're using <audio> then FLUID is by far the best way to wrap up a mac version, you literally just give it a URL and it gives you an exe of the url.

(but if you're using anything modern like proper sound it will die), Fluid also produces tiny exes, like just a little bigger than the webpage source.

[rothers]

OK to update:

I've now managed to make a stand alone exe on the mac with Electrum. It was like some DOS based nightmare from the 1990s.

Here is what I did:

Follow the Electrum quick start guide until you get something to run in a window. What you get to run is of NO USE as it isn't an exe. Then Electrum sort of just trail off about how to make that an exe. Really weird.

However someone on stackoverflow pointed to:

https://www.npmjs.com/package/electron-packager

Which is another command line nightmare but it DOES make an exe for Mac, Linux and Windows in one go.

Here is the install process (it needs admin/root access):

----

npm install electron-packager --save-dev

Then the following as sudo, you will need admin password:

sudo npm install electron-packager -g

Then follow the guide WITHIN YOUR electron-quick-start dir:

Rename the dir from 'electron-quick-start' to your app name.

Make sure electron-packager is installed globally (sudo npm install electron-packager -g should have done that)

productName in package.json has been set to your app name (edit it with a text editor)

The electron module is in the devDependencies section of package.json, and set to the exact version of 1.4.15. (edit it with a text editor)

npm install for the Foo Bar app has been run at least once (I just ran 'npm install' from the command line once)

Now run: electron-packager . (with the full stop)

-----

AND BEHOLD an exe which runs and compresses to 44MB.

Wow. Just wow. There is serious room for a desktop one click app for this, because I don't think any newbie is going to be able to do all that.

[JackFalcon]

Ah yeah

~ try 15 things and it finally works... which 12 things to remove? Hear ya. : )

~1.5MB to 160MB, big jump.

~Fluid... thx. Yep using Audio.

~ Electron-Packager: was about to suggest the same link. I'll be trying it ...

~Great Steps

~ 44MB!

Alright I'll give it a go....

[JackFalcon]

Hello World!

We are using Node.js 8.2.1, Chromium 59.0.3071.115, and Electron 1.8.3.

 

That was pretty nice. Thanks for the steps, they worked well. AND didn't have to "download the moon".

 

Now to convert the game in... and see what happens with the <audio> (also touch in my case).

 

[rothers]

Audio seems fine with it (so far).

I've now got it building Linux and Windows builds too. Going to set up my spare PC tomorrow and make sure it works.

You need to have wine installed for it to build the windows exes.

[JackFalcon]

That was fast. I'll catch up.... : )

Ok, Wine...Wow, look at all these .dlls!

Its like a party: wine, heap, content_shell.pak, and node.dll? Idk...

~Like+1.

[rothers]

This is a really easy guide to installing Wine:

https://www.davidbaumgold.com/tutorials/wine-mac/

Saves all the nightmare!

[JackFalcon]

Got it:

The prototype is wrapped in the app... and worked perfectly.

Gotta say like the electron setup. Very quick, lightweight, extensible. Nice.

PC difference: no Wine, on GitBash tract: improved from what it used to be.

PC: DMG step is not required.

UPDATE: ported in full app and.. missing AUDIO as expected.

Off to tutorials... looking at this one for awhile:

https://dev.to/justinctlam/building-a-3d-application-with-electron-and-babylonjs-using-typescript-2g29

Audio still not there yet...

[rothers]

I've tested all 3 builds it produces on the mac (and via Wine) and they work

Finally a set up which produces 3 exes for Mac, Linux and Windows from one command!

[JackFalcon]

Why difficult to make .exe from HTML 5?

~ State of Audio beginning 2017...

->

Quote

In our experimenting and testing we found that we could create a new audio instance and pass it a file for the source in the format of file://filepath/song.mp3 However, even though Electron has access to the file system, chromium is still unable to access a file in this way. To get around the issue we needed to create a DataUrl and pass it to the audio element for it’s source.

- https://medium.com/@Jeff_Duke_io/working-with-html5-audio-in-electron-645b2d2202bd

~  it is not updating the renderer... ah yes. Testing... a type in the "tsc"

This looks cool, might try it:

https://electronjs.org/docs/tutorial/application-packaging

Heads up, looks like 3 packaging tools:

• electron-forge
• electron-builder
• electron-packager

Also TIP: sounds like the "builder" was build onto the "packager"... "so use builder", said someone.

Hope that is correct. Here is link to homepage.

https://electronjs.org/

Now... where's that <audio src=''> ?

 

 

[rothers]

So it turns out electron does not support cookies... which is a total disaster if you think about it.

There is apparently a solution which I'm trying now:

https://www.npmjs.com/package/electron-cookies (forget this, I've no idea what it does but it does not make cookies work)

However further testing has shown a weird bug with electron - my game seems to freeze up for a split second every 5-6 seconds. It obviously makes it jumpy to play.

Sigh. Is there ever going to be a solution to this?

[JackFalcon]

I wonder what makes it jumpy....

I'll check on my side to see if there is something similar. Still have to port the entire game.

UPDATE: got the audio working (finally). Seems good!

SOLUTION: include audio files at a local path, mine were ../../above electron. figured out how to do this:

    "include": [
      "src/**/*",
      "audio/**/*",
      "../../../audio/**/*",
      "../../../lib/**/*"

I hope these are being packaged -

SOLUTION: even if they have to all be local, can be done build time.

COOKIES!

Found docs for electron cookies (link below).

Thank you for making this thread... : )

Yes -> wrapping apps is like navigating a jungle. 

[rothers]

So cookies don't work. Forget trying to make them work. However localstorage DOES work so convert any cookies over to localstorage.

But as for the poor performance (scrolling jumpy, lag) I can't find a solution, it just seems Electrum does *something* every 6-7 second which causes the app to stutter.

I'll test it on the PC tomorrow but as far as I can see this is a dead end. I might just have to go back to C++. Boy... converting this back to C will be a nightmare.

[rothers]

This might explain the performance issues, seems it has been on going since V1.8

https://github.com/electron/electron/issues/12042

Looks like they have turned off hardware acceleration on 2D canvas! Crazy...

[JackFalcon]

#Goldmine: https://github.com/electron/electron-api-demos/blob/master/docs.md

Porting in game assets, atm.

@rothers if no performance workaround for electron, what do you see as next steps? 

  "devDependencies": {
    "electron": "^1.7.10",

Hey Look: Cookies!

https://electronjs.org/docs/api/cookies

Found in Electron Docs:

https://electronjs.org/docs

questions or requests for general help using Electron should be directed at the community slack channel or the forum.

~

[rothers]

That's interesting but I may have found something better.

What I did last night and this morning was try nw.js which is an alternative to electron.

AND... It's much better. Firstly the performance is 'right' no difference between it and Chrome... secondly you don't have to 'build' anything with nw.js.

Just download it, test your game by dragging your game folder on to nw.exe (on PC) and if the game runs then just zip it up in the nw.exe folder and THAT'S IT.

Cookies work, sound works, no judder or performance issues, everything can be set from a text file (screen res etc.)

Wow. NW.JS is the answer.

[JackFalcon]

Ok, cool.

 ~ I look at NW...

Quote

call all Node.js modules directly from DOM and enables a new way of writing applications with all Web technologies.

Yeah, well look at that....

Dev-Cycle: it would be nice if web-dev and app-dev were seamless.

What is this (intel webkit) how old? v0.29.1. Says 2 years before electron..

Interesting...

Update: got app working in electron w/ <audio>

Had this little mishap with jquery (use it for UI animations).

    <!-- jQuery -->
    <script>
      window.$ = window.jQuery = require("jquery");
    </script>

... everything else worked. whew!

Testing...

I'll look at NW again if ... unexpected pitfall. : )

[JackFalcon]

On 3/20/2018 at 7:24 AM, rothers said:

test your game by dragging your game folder on to nw.exe (on PC) and if the game runs then just zip it up in the nw.exe folder and THAT'S IT.

... would like to know more. Check this out...

COMMON-ISSUE: Backward-Incompatibility.

~ After porting WebApp to MobileApp -  backward-incompatible?

https://medium.com/@ccnokes/how-to-create-a-hybrid-electron-app-53553ece0889

[JackFalcon]

check out "Quasar"...

http://quasar-framework.org/

https://github.com/quasarframework/quasar

Desktop and Web, code in one place.

For me solution was: port-every-time-to-make-app.

 

[mattstyles]

I'm surprised you're having difficulty with Electron, I've created quite a few (toy) projects, it used to be a little tricky to run builds but became super easy about 6-9 months ago (maybe longer). Having said that, not sure if I hooked up audio with any of those projects and that seems to be one of your pain points.

[JackFalcon]

The myriad choices make it difficult.

So how best navigate the many choices around HTML to .EXE? 

The goal is reproducible app-to-market-pipeline.

Which gives many surprises, for example 'dips':

Relating to work from Paul Irish (matchMedia).

CONTEXT: Need to sense device-width with JavaScript, for advanced Text-Animations?

SOLUTION: Here are some variations on stackoverflow:

 var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

...

if (window.matchMedia('(max-device-width: 960px)').matches) {}

...

if (window.innerWidth*window.devicePixelRatio <= 960 
    && window.innerHeight*window.devicePixelRatio <= 640) { 
    ... 
}

...

for (var i = 100; !window.matchMedia('(max-device-width: ' + i + 'px)').matches; i++) {}
var deviceWidth = i;

...


var width = Math.max(window.screen.width, window.innerWidth);

...


const mq = window.matchMedia( "(min-width: 500px)" );

if (mq.matches) {
  // window width is at least 500px
} else {
  // window width is less than 500px
}

...

One example. Simple, but... one of many ... that is what is difficult. Beware the zombie-edge-cases!

Really like Electron btw(performance issue: not-in-context). Probably going with it over Ionic, NW, Quasar, and myriad others....

Hope this helps someone.

[rothers]

12 hours ago, mattstyles said:

I'm surprised you're having difficulty with Electron, I've created quite a few (toy) projects, it used to be a little tricky to run builds but became super easy about 6-9 months ago (maybe longer). Having said that, not sure if I hooked up audio with any of those projects and that seems to be one of your pain points.

Electron is the worst choice as far as I can see, no cookie support, poor performance (jerky unpredictable frame rate), riddled with issues, performance does not match Chrome, cross platform issues.

[mattstyles]

@rothers I haven't found any of those issues, cross platform worked fine and I did some (very basic) performance load tests and found it was fine (as it is just Chromium I'm surprised you've found different). I didn't really get too far with a project though, so likely I just didn't go far enough so I'll definitely look out for those issues in the future, thanks. There are an awful lot of Electron apps out there though, a few of which I use every day without too much issue (these don't really push rendering perf or animations too much though).