From e8487ae90bf9c47074bcac9d6b40fc10ec36c468 Mon Sep 17 00:00:00 2001 From: James J Balamuta Date: Thu, 21 Sep 2023 19:19:58 -0700 Subject: [PATCH] Add a link into the video walkthrough --- R-shinylive-demo.qmd | 76 ++++++++++++++++++++++++++++++++++++++-- README.md | 24 +++++++++++-- _quarto-default.yml | 2 ++ index.qmd | 19 +++++++++- template-r-shinylive.qmd | 26 ++++++++++++++ 5 files changed, 141 insertions(+), 6 deletions(-) create mode 100644 _quarto-default.yml diff --git a/R-shinylive-demo.qmd b/R-shinylive-demo.qmd index fa81d20..eea6773 100644 --- a/R-shinylive-demo.qmd +++ b/R-shinylive-demo.qmd @@ -10,7 +10,7 @@ filters: This document contains just the [Shiny App source code](https://github.com/jcheng5/posit-conf-2023-shinylive/blob/d385ad18eb0d867f25cc4721d9e8c25aeb2dfb90/slides.qmd#L299) used in Joe Cheng's [posit::conf(2023) demo](https://jcheng5.github.io/posit-conf-2023-shinylive/#/option-3-include-1) (Warning: Large file size, don't open on mobile!) -For a detailed breakdown, please see the file. +For a detailed breakdown, please see the [index.qmd](index.qmd) file. ```{shinylive-r} #| standalone: true @@ -67,4 +67,76 @@ server <- function(input, output, session) { # Create Shiny app ---- shinyApp(ui = ui, server = server) -``` \ No newline at end of file +``` + + +Document Source (minus links): + +````md +--- +title: "Joe Cheng's r-shinylive App in a Quarto document!" +format: + html: + resources: + - shinylive-sw.js +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) +``` +```` \ No newline at end of file diff --git a/README.md b/README.md index 76b0a87..863275c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # r-shinylive-demo -Interested in deploying a Shiny application for R within Quarto? This is the repository for you! Here's a summary of what you can find in the repository: +Interested in deploying a serverless Shiny application for R within Quarto? This is the repository for you! Here's a summary of what you can find in the repository: - **[index.qmd](index.qmd):** This file contains a tutorial that provides step-by-step instructions and guidance on using `r-shinylive` to embed Shiny applications in Quarto documents. @@ -8,7 +8,7 @@ Interested in deploying a Shiny application for R within Quarto? This is the rep - **[template-r-shinylive.qmd](template-r-shinylive.qmd):** This file provides a skeleton template that you can use to populate your own Shiny apps. It serves as a starting point for creating your interactive Quarto documents with Shiny applications. Please note that you will still need to install the required software as mentioned in the tutorial. -- **[_quarto.yml](_quarto.yml):** This configuration file is essential for Quarto and `shinylive` to work together effectively. +- **[_quarto.yml](_quarto-default.yml):** This configuration file is essential for Quarto and `shinylive` to work together effectively. - **[.github/workflows/publish-demo.yml](.github/workflows/publish-demo.yml):** This file contains a sample workflow configuration for creating a website that embeds R Shiny applications using GitHub Actions and deploys it to GitHub Pages. @@ -24,6 +24,14 @@ You can see the live version built from the repository here: +## Video Tutorial + +Prefer a hands-on visual guide? Check out the following YouTube video: + +[![Creating a Serverless Shiny App using Quarto with R Shinylive](https://img.youtube.com/vi/6y2FnAugP8E/0.jpg)](https://www.youtube.com/watch?v=6y2FnAugP8E) + +We'll go through every step and provide some commentary along the way! + # Using r-shinylive for Serverless Shiny Apps in Quarto Documents Are you interested in creating your own Quarto document with embedded static Shiny apps? This tutorial will guide you through the process of using the `r-shinylive` R package to achieve just that. Let's get started! @@ -49,7 +57,8 @@ quarto create project default ![Screenshot showing the Terminal tab of RStudio with the command to create a Quarto project.](images/create-quarto-r-shiny-live-project.png) -During project creation, you'll be prompted to provide a directory name. This name will also serve as the Quarto document filename. Please note that if you skip this step, a `_quarto.yml` file won't be generated, resulting in an error when you attempt to render the document. + +While creating the project, you'll be prompted to specify a directory name. This name will also serve as the filename for your Quarto document. It's crucial to note that skipping this step will result in the absence of a `_quarto.yml` file, leading to an error when you attempt to render the document. The error message will resemble the following: ```md ERROR: @@ -57,6 +66,15 @@ The shinylive extension must be used in a Quarto project directory (with a _quarto.yml file). ``` +Ensure that the contents of the `_quarto.yml` file match the following structure: + +```yaml +project: + title: "R-shinylive-demo" +``` + +Here, the `title` field should contain the name of the Quarto file up to the extension. + ## Installing the Quarto Extension for r-shinylive **Step 3:** Install the Quarto extension for `shinylive`. In the Terminal tab, run the following command: diff --git a/_quarto-default.yml b/_quarto-default.yml new file mode 100644 index 0000000..7012206 --- /dev/null +++ b/_quarto-default.yml @@ -0,0 +1,2 @@ +project: + title: "R-shinylive-demo" diff --git a/index.qmd b/index.qmd index d5737fc..3e24212 100644 --- a/index.qmd +++ b/index.qmd @@ -77,6 +77,14 @@ server <- function(input, output, session) { shinyApp(ui = ui, server = server) ``` +## Video Tutorial + +Prefer a hands-on visual guide? Check out the following YouTube video: + +[![Creating a Serverless Shiny App using Quarto with R Shinylive](https://img.youtube.com/vi/6y2FnAugP8E/0.jpg)](https://www.youtube.com/watch?v=6y2FnAugP8E) + +We'll go through every step and provide some commentary along the way! + # Using r-shinylive for Serverless Shiny Apps in Quarto Documents Are you interested in creating your own Quarto document with embedded static Shiny apps? This tutorial will guide you through the process of using the `r-shinylive` R package to achieve just that. Let's get started! @@ -102,7 +110,7 @@ quarto create project default ![Screenshot showing the Terminal tab of RStudio with the command to create a Quarto project.](images/create-quarto-r-shiny-live-project.png) -During project creation, you'll be prompted to provide a directory name. This name will also serve as the Quarto document filename. Please note that if you skip this step, a `_quarto.yml` file won't be generated, resulting in an error when you attempt to render the document. +While creating the project, you'll be prompted to specify a directory name. This name will also serve as the filename for your Quarto document. It's crucial to note that skipping this step will result in the absence of a `_quarto.yml` file, leading to an error when you attempt to render the document. The error message will resemble the following: ```md ERROR: @@ -110,6 +118,15 @@ The shinylive extension must be used in a Quarto project directory (with a _quarto.yml file). ``` +Ensure that the contents of the `_quarto.yml` file match the following structure: + +```yaml +project: + title: "R-shinylive-demo" +``` + +Here, the `title` field should contain the name of the Quarto file up to the extension. + ## Installing the Quarto Extension for r-shinylive **Step 3:** Install the Quarto extension for `shinylive`. In the Terminal tab, run the following command: diff --git a/template-r-shinylive.qmd b/template-r-shinylive.qmd index db8704f..6cee903 100644 --- a/template-r-shinylive.qmd +++ b/template-r-shinylive.qmd @@ -23,3 +23,29 @@ server <- function(input, output, session) { shinyApp(ui, server) ``` + +Full Skeletal Document Source: + +````md +--- +title: "Template for r-shinylive Quarto document" +format: + html: + resources: + - shinylive-sw.js +filters: + - shinylive +--- + +```{shinylive-r} +#| standalone: true + +ui <- ... + +server <- function(input, output, session) { + ... +} + +shinyApp(ui, server) +``` +```` \ No newline at end of file