Shiny 04: Deploying Shiny App

Deploying Shiny App using ShinyLive .

Welcome to our shiny app development class! We are now fully prepared to deploy our shiny app to our website.

There are several options available for deploying a shiny app, and we will utilize our knowledge of using the quarto website to accomplish this task.

1 Deploying Shiny App using Quarto with R Shinylive

We are going to use the following tutorial: Using r-shinylive for Serverless Shiny Apps in Quarto Documents

• Creating a Serverless R Shiny App using Quarto with R Shinylive
• Links:
  • Github Repo
  • R-shinylive app in Quarto!

1.1 Step 1

To begin, you’ll need to install the r-shinylive R package. This package is currently hosted on GitHub and can be easily obtained from the R console by executing the following command:

# Install the 'pak' package manager if you haven't already
install.packages("pak")
# Install 'r-shinylive' using 'pak'
pak::pak("posit-dev/r-shinylive")

1.2 Step 2

To install the Quarto extension for shinylive, follow these steps:

1. Open the Terminal tab.
2. Run the following command:

# quarto add quarto-ext/shinylive

1.3 Step 3

To include a Shiny app directly in your Quarto file (.qmd), you need to add a filter key for shinylive at the top of the desired Quarto file. Open your Quarto file and insert the following YAML header:

filters:
  - shinylive

1.4 Step 4

You can include the code for a Shiny application in a code block indicated by {shinylive-r}. Here is an example of how your code block could appear:

---
title: "Our first r-shinylive Quarto document!"
filters:
  - shinylive
---

```{shinylive-r}
#| standalone: true

#library(shiny)

# Define your Shiny UI here
#ui <- fluidPage(
  # Your UI components go here
)

# Define your Shiny server logic here
#server <- function(input, output, session) {
  # Your server code goes here
}

# Create and launch the Shiny app
#shinyApp(ui, server)

1.5 Step 5

If you have encountered issues with the quarto publish function, you can easily resolve them by adding the following steps:

format:
  html:
    resources: 
      - shinylive-sw.js

2 Here is an example of a ‘shiny’ app deployed on our website!

#| standalone: true
#| viewerHeight: 600

library(shiny)

# Define UI for app that draws a histogram ----
ui <- fluidPage(

  # App title ----
  titlePanel("Hello Shiny!"),

  # Sidebar layout with input and output definitions ----
  sidebarLayout(

    # Sidebar panel for inputs ----
    sidebarPanel(

      # Input: Slider for the number of bins ----
      sliderInput(inputId = "bins",
                  label = "Number of bins:",
                  min = 1,
                  max = 50,
                  value = 30)

    ),

    # Main panel for displaying outputs ----
    mainPanel(

      # Output: Histogram ----
      plotOutput(outputId = "distPlot")

    )
  )
)

# Define server logic required to draw a histogram ----
server <- function(input, output) {

  # Histogram of the Old Faithful Geyser Data ----
  # with requested number of bins
  # This expression that generates a histogram is wrapped in a call
  # to renderPlot to indicate that:
  #
  # 1. It is "reactive" and therefore should be automatically
  #    re-executed when inputs (input$bins) change
  # 2. Its output type is a plot
  output$distPlot <- renderPlot({

    x    <- faithful$waiting
    bins <- seq(min(x), max(x), length.out = input$bins + 1)

    hist(x, breaks = bins, col = "#75AADB", border = "white",
         xlab = "Waiting time to next eruption (in mins)",
         main = "Histogram of waiting times")

    })

}

# Create Shiny app ----
shinyApp(ui = ui, server = server)