Quarto all the things Workshop

R Shiny in a browser/ Serverless Shiny Apps in Quarto Documents

• Install the r-shinylive R package. It’s currently hosted on GitHub and can be obtained from the R console using 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")

• Create a new Quarto project.
• In your terminal

quarto create project default

• Ensure to name your directory when prompted {.smaller}

demo-quarto-shinylive

• Ensure that the contents of the _quarto.yml file match the following structure {.smaller}

project:
  title: "demo-quarto-shinylive"

Here, the title field should contain the name of the Quarto file up to the extension.{.smaller}

• Install the Quarto extension for shinylive. In the Terminal,

  quarto add quarto-ext/shinylive

• Add a filter key: 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. Add the following YAML header:

  filters:
    - shinylive

• Insert the code in a code chunk:

  ---
  title: "Our first r-shinylive Quarto document!"
  filters:
    - shinylive
  ---
  
  ```{shinylive-r}
  #| standalone: true
  #| viewerHeight: 600
  library(shiny)
  library(bslib)
  
  # Define UI for app that draws a histogram ----
  ui <- page_sidebar(
    sidebar = sidebar(open = "open",
      numericInput("n", "Sample count", 100),
      checkboxInput("pause", "Pause", FALSE),
    ),
    plotOutput("plot", width=1100)
  )
  
  server <- function(input, output, session) {
    data <- reactive({
      input$resample
      if (!isTRUE(input$pause)) {
        invalidateLater(1000)
      }
      rnorm(input$n)
    })
  
    output$plot <- renderPlot({
      hist(data(),
        breaks = 40,
        xlim = c(-2, 2),
        ylim = c(0, 1),
        lty = "blank",
        xlab = "value",
        freq = FALSE,
        main = ""
      )
  
      x <- seq(from = -2, to = 2, length.out = 500)
      y <- dnorm(x)
      lines(x, y, lwd=1.5)
  
      lwd <- 5
      abline(v=0, col="red", lwd=lwd, lty=2)
      abline(v=mean(data()), col="blue", lwd=lwd, lty=1)
  
      legend(legend = c("Normal", "Mean", "Sample mean"),
        col = c("black", "red", "blue"),
        lty = c(1, 2, 1),
        lwd = c(1, lwd, lwd),
        x = 1,
        y = 0.9
      )
    }, res=140)
  }
  
  # Create Shiny app ----
  shinyApp(ui = ui, server = server)
  ```

  • filter, code chunk type, code chunk options

    Warning

    In the future, Quarto will hopefully support Shiny applications with parts spread throughout the document.

• Render the document

  • Render button in RStudio or

  • on command line quarto preview demo-quarto-shinylive.qmd --no-browser --no-watch-inputs

• Publish. Once you are satisfied with your shinylive app and Quarto document, it’s time to publish your work. There are multiple options for publishing with Quarto, top 2 being github pages and quarto-pub.