Deploy Shiny App on Github Pages

Shinylive is a serverless version of Shiny, which enables running Shiny applications in a web browser without needing a backend server. It was first introduced to Python during the RStudio Conf 2022 keynote by Joe Cheng (I recommend watching this talk!). The Pythonic version leverages WebAssembly and Pyodide to launch the app on the browser without a server on the backend. Joe Cheng introduced the Shinylive R version during the Posit Conf 2023, and it leveraged WebR to run the app on the browser.

Last update: Jan 16, 2024

Figure 1 — Forecasting Sandbox Shiny app deployed on Github Pages

The app is available here, and all the code in this article is available below:

GitHub - RamiKrispin/shinylive-r: A guide for deploying Shinylive R application into Github Pages

Currently, there are three methods (or formats) to use Shinylive applications:

• Render a Shiny app into HTML static file using the shinylive package
• Host a Shiny app in Fiddle — a built-in web application to run Shiny R and Python applications
• Embed Shiny app in Quarto documentation using the quarto-shinylive extension for Quarto

In this tutorial, we will focus on the first option above, using the shinylive package to render the app into an HTML file and deploy it as a static website to Github Pages. We will use the Forecasting Sandbox Shiny app (see Figure 1 above) to demonstrate the deployment process. The app provides a sandbox for three simple forecasting models — Linear regression, ARIMA, and Holt-Winters, enabling the user to modify the model’s parameters and explore the change in the output interactively.

Prerequisites

The main prerequisite for this tutorial is the shinylive and httpuv packages, which can be installed directly from CRAN:

install.packages(c("shinylive", "httpuv"))

Those are the package versions used in this tutorial:

 packageVersion("shinylive")
[1] ‘0.1.1’

packageVersion("httpuv")
[1] ‘1.6.13’

And, of course, you will have to have a Shiny app file. In this tutorial, we use a simple Shiny app located under the myapp folder:

.
└── myapp
    └── app.R

Using Docker

If you use VScode, the repository contains the Dev Containers settings for running this tutorial inside a dockerized environment. That includes the following files:

.devcontainer
├── devcontainer.json
├── Dockerfile
├── Dockerfile.dev
├── install_packages.R
├── packages.json
└── requirements.txt

Where the devcontainer.json is the Dev Containers setting file, the Dockerfile.dev and Dockerfile are the dev and prod dockerfiles. The install_packages.R and packages.json files define the R requirements (e.g., packages to install), and the requirements.txt file defines the Python requirements (which are needed to run R with radian). For more details on setting up an R dockerized development environment with VScode and the Dev Containers extension, please check the following tutorial:

GitHub - RamiKrispin/vscode-r: A Tutorial for Setting R Development Environment with VScode, Dev…

Render the Shiny App

Once the above prerequisites are set, it is straightforward to deploy the app on Github Pages. First, let’s render the app into an HTML file using the export function:

shinylive::export(appdir = "myapp", destdir = "docs")

The appdir argument defines the app folder (in this case, under the myapp folder). The destdir argument defines the output of the rendered site (in this case, defined as docs).

The function will render the app into a website structure, setting the index.html file and its assets into the docs folder.

Why do we use the docs folder? We set the destdir argument to docs as the Github Pages' setting required the website files to either be in the repository root folder or the docs folder. The latter, having the site under a folder, is a cleaner option than having it under the root folder.

You should expect to have under the docs folder the edit and shinylive folders:

.
└── docs
    ├── edit
    └── shinylive

You can check if the rendering process was successful using the runStaticServer function from the httpuv package:

httpuv::runStaticServer("docs/", port=8008)

That should launch the app on your default browser:

Figure 2 — Testing the app on your local browser using the runStaticServer function from the httpub package

Note: The runStaticServer required the latest version from CRAN. Make sure you have the version 1.6.13 installed or above.

Alternatively, you can test that your code works as expected on the browser using the Shinylive code editor.

Deploy the App on Github Pages

Before deploying the app to Github Pages, commit and push the changes (e.g., the rendered website). You can verify on the Github repository that you have the docs folder.

Last but not least, we will set up the Github Pages website. On the repository main menu, go to settings (pink rectangle on the screenshot below), select the Pages option (blue rectangle), and select the branch you want to use and the folder website files are located. In this case, we will select the docs folder (yellow rectangle). Once you complete those steps, you should get the link for the Github Pages website (brown rectangle). It might take a few minutes until the website is ready and accessible.

Figure 3— Steps for deploying a Shiny app on the Github Pages website

That’s it! The website is now ready!

https://ramikrispin.github.io/shinylive-r/

Resources

• Code and example available here
• Joe Cheng’s Running Shiny without a server presentation at the Posit Conf 2023
• Shinylive R and Python dev version packages
• Shinylive web R and Python code editor
• Shinylive examples R and Python examples