Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Electron packaged core Webviz as stand-alone app #120

Closed
edufford opened this issue Apr 3, 2019 · 7 comments
Closed

Electron packaged core Webviz as stand-alone app #120

edufford opened this issue Apr 3, 2019 · 7 comments

Comments

@edufford
Copy link

edufford commented Apr 3, 2019

Not sure if this is useful for others, but I thought it might be handy to be able to package the core Webviz ROS bag analyzer app into a stand-alone Electron application.

I made a "webviz-electron" branch on my fork with mods to do this, but it has only been tested for Mac and Ubuntu Linux so far. Electron-builder should be able to package for Windows too, but I'm not sure if it works.

Thanks to the Cruise team for open-sourcing this interesting project.
@janpaul123
Copy link
Contributor

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

@edufford
Copy link
Author

edufford commented Apr 4, 2019

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
Copy link
Contributor

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
Copy link
Author

edufford commented Apr 4, 2019 •
edited
Loading

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.

  1. 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
Copy link
Contributor

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.

janpaul123 pushed a commit that referenced this issue May 11, 2020
Add option to build just Webviz
3e0abb9 
+ a Docker image that has just Webviz installed in it.

There have been multiple requests for something like this, especially
from people who want to use Webviz in situations with limited internet
connectivity. See e.g. #120, #267, and #406.

I’ve also renamed the current Dockerfile.

I’ll follow up with another PR that updates the README to explain how to
use the new Docker image once I’ve figured out how to set up automated
Docker builds.

Test plan: tested this locally. There’s some risk of this getting out of
sync since we don’t run this in CI, but hopefully with the automated
Docker build which I’ll set up later we’ll at least get some coverage on
this flow.
@janpaul123 janpaul123 mentioned this issue May 11, 2020
Merged
janpaul123 added a commit that referenced this issue May 12, 2020
@janpaul123
Add option to build just Webviz (#426)
ccd6acc 
+ a Docker image that has just Webviz installed in it.

There have been multiple requests for something like this, especially
from people who want to use Webviz in situations with limited internet
connectivity. See e.g. #120, #267, and #406.

I’ve also renamed the current Dockerfile.

I’ll follow up with another PR that updates the README to explain how to
use the new Docker image once I’ve figured out how to set up automated
Docker builds.

Test plan: tested this locally. There’s some risk of this getting out of
sync since we don’t run this in CI, but hopefully with the automated
Docker build which I’ll set up later we’ll at least get some coverage on
this flow.
@snyk-bot snyk-bot mentioned this issue Jul 8, 2020
Open
@amacneil
Copy link
Contributor

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
Copy link
Contributor

Shameless 😂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@janpaul123 @amacneil @edufford