Electron packaged core Webviz as stand-alone app

[cruise-automation]

Electron packaged core Webviz as stand-alone app

[janpaul123]

Cool stuff! What’s your use case for an electron app exactly?

[edufford]

I'm new to Node/React and Electron so mainly I was just curious to learn about how the projects are structured, built, and deployed/packaged.

From previous work in automotive development though, a few potential use cases for offline stand-alone data analysis that I was thinking about are:

1. On-road testing in development vehicles using laptops without online access
2. Lab PCs that might be isolated from the internet for data/source code confidentiality
3. Keeping a local stable build version to use vs the latest deployed online release

It's definitely nice to have a central server-based, continuously updated distribution option for this kind of app, but maybe an offline packaged option could also fill some use case gaps since Electron makes it fairly easy to add on this capability for Node/React projects.

[janpaul123]

Ah that makes sense! Since Webviz is just a static page I'd recommend downloading the gh-pages branch (or going to the website and using the "Save as" feature of most browsers) and then opening webviz-core.html in a browser.

That said, we might revisit using an Electron app in the future, since it would allow us to use some more powerful local APIs. In that case we'd definitely use your contribution, so thanks! Definitely a good learning experience though I bet. :) Closing for now.

[edufford]

Ah, I see. Thanks for the feedback.

Actually, before using Electron, I had tried just loading the webviz-core.html file from the gh-pages branch pack but it fails to load a bag file when dropped onto the page (Chrome, Firefox, and Safari, Mac and Linux), so I figured there was something dynamic that needed a web server to load.

I looked into it some more, and it seems there are a couple issues with just loading a local file version:

1. Chrome throws the error:
   webvizCoreBundle.js:8077 Uncaught (in promise) DOMException: Failed to construct 'Worker': Script at 'file:///webviz/dist/BagDataProvider.worker.js?c96bbc24cbd8fb74039a' cannot be accessed from origin 'null'.
   By default, Chrome doesn't allow loading web workers from local files. There is a possible workaround by launching Chrome from the command line with the --allow-file-access-from-files flag, but then this results in a file path error:
   GET file:///webviz/dist/BagDataProvider.worker.js?c96bbc24cbd8fb74039a net::ERR_FILE_NOT_FOUND

I ran into this when packaging the Electron app, and I patched it by changing the webpack.config.js publicPath from "/webviz/dist/" to the relative "dist/" and deploying the files into a "webviz" base folder.

2. Patching the publicPath and allowing Chrome to access local files still leads to another error:
   Fetch API cannot load file:///home/student/Downloads/webviz/dist/wasm-lz4.wasm. URL scheme "file" is not supported.

I'm not sure the root cause or patch for this, but switching to Firefox (with default options) instead of Chrome and the patched publicPath finally does allow working from the local html file directly.

Anyways, from this it seems that one more advantage to Electron is avoiding these direct local file access permission issues and different browser discrepancies!

[janpaul123]

Ah good points! And thanks for the writeup! For now the simple workaround for most of this is running a http server, which can be done by running python -m SimpleHTTPServer 8000 in the root of the gh-pages branch, or by running npm run docs in the master branch.

[amacneil]

I know this is an old/stale issue, but for anyone who comes across it searching for how to run webviz inside electron, we are doing that over at https://github.com/foxglove/studio

[janpaul123]

Shameless 😂