Packed App does not work

[gerwinbrunner]

I have a application that works very nicely in development (it plays plays videos) but when I pack it with https://github.com/mllrsohn/nw-builder it stops at "buffering 0%"

I can extract this app (unzip) and it works normally.

Do you have an idea what the reason for this could be?

[Haraldson]

I’m trying to understand how I would go about building and packing my Electron app – so I guess this isn‘t what wcjs-prebuilt takes care of? You still have to copy in the binaries manually, or make a ‘post build’ script for doing that?

[jaruba]

@Haraldson you are partially correct.. if you wanna use webpack or asar, then yes, you have to make sure that the binaries are all outside the packaged app, otherwise webchimera.js won't work, but.. if you don't pack your modules in some crazy way, it will work out of the box with wcjs-prebuilt or the native build procedure of webchimera.js

[Haraldson]

And it will always resolve correctly if I extract the matching binary into *.app/Contents/Resources/app/node_modules/webchimera.js/build/Release using unzip like in @Calderis’ code?

[jaruba]

i don't know how well the above code works, but keep in mind that the code is for OSX, the OSX package from the webchimera.js releases are the only ones that include the VLC binaries too (as those need some special changes in order to work, you can't just use the VLC binaries for the VLC site on OSX as they don't work) all other packages (Win / Linux) don't include the VLC binaries, and thus need to be downloaded and added too for webchimera.js to work

[jaruba]

But you might be overcomplicating things, why not just make an automated script (Grunt / Gulp) that simply moves the binaries from wcjs-prebuilt's folder outside of node_modules to a custom bin folder that won't be packaged.

As wcjs-prebuilt handles all of this.. including the download of the VLC binaries for Win / Linux. :)

[Haraldson]

That’s clever, at least I won’t have to download it all over again. But, I don’t feel like I have enough insight into the whole setup. How do I make that copied binary resolve correctly? Do I need to set any environment variables?

[jaruba]

There is an issue (only on Windows) that you fix by setting the exact path to the VLC plugins folder in an env var. See this page for more info.

Otherwise, I guess it depends on what you're using, if you're using WebChimera.js directly, then you just require() the WebChimera.js.node file from the binaries folder directly, like any other module, and it's enough.. If you're using WebChimera.js Renderer (wcjs-renderer), then you do:

var renderer = require("wcjs-renderer");
var vlc = require([[PATH-TO-WEBCHIMERA.JS.NODE]]).createPlayer();
var options = { /* Add renderer options here */ }
renderer.bind(document.getElementById("canvas"), vlc, options);
vlc.play("http://archive.org/download/CartoonClassics/Krazy_Kat_-_Keeping_Up_With_Krazy.mp4");

and in HTML, just <canvas id="canvas"/>

And if you're using WebChimera.js Player (wcjs-player), you do:

var wjs = require("wcjs-player");

var player = new wjs("#player").addPlayer({
  autoplay: true,
  wcjs: require([[PATH-TO-WEBCHIMERA.JS.NODE]])
});

player.addPlaylist("http://archive.org/download/CartoonClassics/Krazy_Kat_-_Keeping_Up_With_Krazy.mp4");

And in HTML: <div id="player"/>

So, as you can see.. there is a lot of flexibility to adding the webchimera.js path in all the WebChimera.js Team's Official Modules

[Haraldson]

This setup works beautifully in develop mode for me;

import wcjsPlayer from 'wcjs-player'
import wcjs from 'wcjs-prebuilt'

this.player = new wcjsPlayer('#main-player').addPlayer({
    wcjs,
    vlcArgs: ["--network-caching=0"]
})

this.player.vlc.play('http://archive.org/download/CartoonClassics/Krazy_Kat_-_Keeping_Up_With_Krazy.mp4')

<div id='main-player'></div>

But both wcjs-player and wcjs-prebuilt needs to be added to webpack’s externals config in order to work in development. In the packaged version, I get Uncaught Error: Cannot find module 'wcjs-player', but I guess this is where the archive thing comes into play? As in, I need to load those binaries not with webpack, but with some other mechanism? At this point I get really unsure and usually lost, and give up.

[jaruba]

this.player = new wcjsPlayer('#main-player').addPlayer({
    wcjs,
    vlcArgs: ["--network-caching=0"]
})

This works? would of expected it to need wcjs: wcjs,... anyway, in your case, you would just need to change import wcjs from 'wcjs-prebuilt' to import wcjs from [[path-to-webchimera.js.node]]

As for wcjs-player not working with webpack.. i guess it makes sense.. as it includes fonts, images and css from external files that it probably can't find with webpack.. you can also just move wcjs-player outside of node_modules too and include index.js from it's folder with either an absolute path or a relative path..

[Haraldson]

That’s ES6 for you; it gets expanded to { wcjs: wcjs } automagically. I’ll have a further look at your suggestions and investigate more, and probably come back here with more questions later – packaging the app isn’t the highest priority just yet, but it is eating on me nonetheless. :)

[jaruba]

That’s ES6 for you; it gets expanded to { wcjs: wcjs } automagically.

nice to know, live and learn.. :)

[Haraldson]

@jaruba So, I finally got around to the packaging again. I made the following ‘post package’ script; cp -R ./node_modules/wcjs-{prebuilt,player} ./release/darwin-x64/MyApp-darwin-x64/MyApp.app/Contents/Resources/app/node_modules

This, however, is a rabbit hole. Now it isn’t complaining about the wcjs dependencies anymore, but wcjs’ dependencies (it seems like) – I kept on expanding my blobbing to include jquery, then request, extend etc. before I gave up. Copying the entire node_modules folder makes the app work, kiiiind of, but this isn’t the solution I want; besides the impact on the app’s file size, it also messes up its CSS.

Any ideas?