Deploying a Shiny app as a desktop application with Electron

In developing the DSM2 HYDRO Viz Tool, we were faced with deciding how to deploy a Shiny app that required interaction with large local files. I first heard about the possibility of using Electron to deploy Shiny apps as standalone desktop applications in this talk by Katie Sasso, but it wasn’t until I discovered the R Shiny Electron (RSE) template that I decided to take the plunge.

R Shiny Electron Build Process

The R Shiny Electron (RSE) template includes only very basic instructions for how to get started with this process (and they clearly specify that it is not ready for production). There were considerable gaps in my understanding that left me flailing while trying to get things to work (especially on Windows). Below I am describing what I did to get up and running but I make no argument that this process represents best practices.

Basic setup

The RSE template doesn’t mention anything about the arguably obvious steps of installing Node, Electron, and Electron Forge. Node can be installed with pre-built installers from the Node website. After installing Node, Electron and Electron Forge are installed using npm from the command line. On Windows, Node installs a Node.js command prompt that I used for any npm and electron-forge commands (rather than the default Windows command prompt). The Node installer asks Windows users if they want to install Chocolatey. It is not necessary to install Chocolatey, but it helped me figure out one piece below (which might be obvious to Windows users). If you didn’t install Chocolately as part of the Node installation, you can download an installer from the Chocolatey website.

Run the following command to install Electron globally.

npm install -g electron

Then run this command to install Electron Forge globally.

npm install -g electron-forge

Next, clone or download the GitHub repository for the RSE template.

Build process on Mac

The RSE template repository includes a simple Shiny app. As a first step, I recommend following the steps below to confirm that you can build the executable with the simple app before trying your own app. At the end of this post, I will write more about extra steps required to build the executable for the DSM2 Viz Tool.

  1. Open the terminal and change the directory to the location of r-shiny-electron or r-shiny-electron-master (see how to use terminal).

  2. Run npm install in the terminal to set up the project in the r-shiny-electron directory.

You will get lots of warnings about outdated packages. I played around a bit with trying to update dependencies but was quickly out of my depths and broke the RSE template (but easy enough to start over).

  1. Download R binary for Mac by running ./get-r-mac.sh.

  2. Identify and download packages used in Shiny app by running Rscript add-cran-binary-pkgs.R.

  3. Run npm start to test if app launches (and works correctly).

  4. If the app works correctly, run electron-forge make to build the Mac executable.

The build process will create a folder called Out in the r-shiny-electron directory. In Out/r-shiny-electron-darwin-x64, you will have an executable (r-shiny-electron.app) that you can run to test that the app is working correctly. In Out/make, you will have a zip file that contains the executable but is better for distributing because of the smaller file size.

It is possible to build a Windows installer on a Mac, but it “takes forever.” I tried going down this road, but bailed after the process had run for 2 hours without finishing because I had access to a Windows machine for building the app.

Build process on Windows

If you haven’t picked up on it yet, I’m a Mac user. I struggled to figure out how to get set up on a Windows machine and I might not be remembering correctly a few of the details. Hopefully, these instructions are close enough to help you figure it out for yourself.

  1. Install Cygwin and the wget package, which is not installed by default. The wget function is used in ./get-r-win.sh. If you have wget from another installation process, then you might be able to skip this step.

  2. Install innoextract with Chocolatey by running choco install innoextract

As it turns out, the Chocolatey version of innoextract (for unpacking installers created by Inno Setup) will not work with the R installer. We need the development version: innoextract-1.8-dev-2018-09-09-windows.zip. After extracting the development version of innoextract from the zip file, you can move it to where Chocolatey installs packages. The main point of Chocolatey for me was that it made it easy to find the location of innoextract (and ./get-r-win.sh found it, too).

  1. Open the Node.js command prompt and change the directory to the location of r-shiny-electron or r-shiny-electron-master.

  2. Run npm install in the Node.js command prompt to set up the project in the r-shiny-electron directory.

  3. Download R binary for Windows by running ./get-r-win.sh in the Cygwin Terminal.

  4. Identify and download packages used in Shiny app by running Rscript add-cran-binary-pkgs.R.

I unsuccessfully tried to run this line in the default command prompt, the Node.js command prompt, and the Cygwin Terminal. I don’t know what I was missing to make that work and I didn’t try very hard because I was able to successfully run this line in the RStudio Terminal. Remember to change the directory to r-shiny-electron.

  1. Run npm start in the Node.js command prompt to test if the app launches (and works correctly).

  2. If the app works correctly, run electron-forge make in the Node.js command prompt to build the Windows executable.

The build process will create a folder called Out in the r-shiny-electron directory. In Out/make/squirrel.windows/x64, you will have an installer executable called r-shiny-electron-1.0.0 Setup.exe.

Customizing build process for DSM2 Viz Tool

After working through the build process on the r-shiny-electron example app, I downloaded a fresh version of the RSE template, renamed the r-shiny-electron directory to DSM2-Viz-Tool, removed the app.R file from DSM2-Viz-Tool/shiny, and replaced it with the files for the DSM2 Viz Tool Shiny app. I also opened package.json in a text editor and changed a few fields (e.g., name, productName, version, description, author).

Next, I started working through the build process described above. However, before running npm start I needed to add the binary files for the rhdf5 and Rhdf5lib packages because Rscript add-cran-binary-pkgs.R doesn’t find Bioconductor packages. The binary files for Mac and Windows are available at the package websites (linked above) and need to be placed in DSM2-Viz-Tool/r-mac/library and DSM2-Viz-Tool/r-win/library, respectively. Then, I was able to finish the build process.

Working through this process involved plenty of frustration (because of my knowledge gaps), but it was extremely satisfying to arrive at the end goal of packaging the DSM2 Viz Tool as a standalone desktop application.

Avatar
Travis Hinkelman
Ecological Modeler

Related