Creating a Serverless R Shiny App using Quarto with R Shinylive ("Include" method)

Video Description

Video Timeline 00:00 - Video Intro 00:05 - Introduction to R Shinylive development, showcased at posit::conf(2023), enabling serverless R Shiny Apps (no Shiny Server needed!) 00:30 - Delving into the reactivity of the serverless Shiny app 01:06 - Highlighting the three available options (Convert, Fiddle, Include) from Joe's talk, with a focus on "Include" 01:30 - The "Convert" option's comprehensive documentation available on the R-shinylive GitHub repository 02:13 - Examination of the example in the repository for crafting a Shinylive application 02:50 - Transition to RStudio to install the 'pak' package manager and the development version of the `r-shinylive` package 03:49 - Creation of a new Quarto project within RStudio using the terminal command `quarto create project default` 04:25 - Opening the new RStudio project window dedicated to the Quarto project 04:41 - Discussion of the various files housed within the Quarto project 05:25 - Installation of the Shinylive Quarto extension from `quarto-ext/shinylive` via the terminal using `quarto add quarto-ext/shinylive` 06:03 - Emphasis on the project-specific installation of the Quarto extension (no global library installation) 06:46 - Immersion into the Quarto document 'R-shinylive-demo.qmd' and removal of extraneous document skeleton 06:55 - Integration of the 'shinylive' filter into the Document's YAML 07:36 - Explanation of the skeletal structure for a Shiny app, within a code cell, employing `{shinylive-r}` instead of `{r}` 08:54 - Acquisition of the code used in Joe Cheng's Shiny App demo 09:16 - Replacement of the skeletal code cell with Joe's Shiny App code 09:35 - Initiation of the document rendering process in RStudio (using keyboard shortcuts) 09:57 - Discussion regarding the disappearance of the loading symbol for the Shiny application in RStudio's Viewer Panel 10:25 - Opening the demo in a web browser via the "Show in new window" option in RStudio's Viewer Panel 10:48 - Successful loading of the Shiny app utilizing R Shinylive, ready for exploration 11:58 - Addressing partial cutoff of the Shinylive app in the default HTML document and increasing grid space via the modification of the `grid` key in the document 13:02 - Verification of the Shiny app's width in the browser window, confirming its adequacy 13:27 - Discussion of the files added to the rendered directory 13:57 - Inclusion of the `resources` key in the document's YAML to ensure retention of the `shinylive-sw.js` file when publishing the document 14:58 - Concluding remarks on the remarkable achievement 15:30 - Outro --- Summary During this walkthrough video, we accomplished the following: 1. Installed the "r-shinylive" package from GitHub in R Console 2. Created a Quarto project using the terminal, which opened a new RStudio project. 3. Installed the "shinylive" Quarto extension via the Terminal in the new RStudio Project. 4. Modified the Quarto document to utilize the "shinylive" filter. 5. Switched the code cell type from `{r}` to `{shinylive-r}` to execute the Shiny app. 6. Utilized Joe Cheng's example Shiny app and then rendered the document. 7. Explored the serverless Shiny app experience Voila! --- Links: Repo: https://github.com/coatless-quarto/r-shinylive-demo Website: https://coatless-quarto.github.io/r-shinylive-demo/ Posit::conf(2023): Joe Cheng's Talk: https://jcheng5.github.io/posit-conf-2023-shinylive/#/title-slide The "Include" option: https://jcheng5.github.io/posit-conf-2023-shinylive/#/option-3-include Source of Joe Cheng's Shiny App: https://github.com/jcheng5/posit-conf-2023-shinylive/blob/d385ad18eb0d867f25cc4721d9e8c25aeb2dfb90/slides.qmd#L299 Shinylive - Shinylive R Package: https://github.com/posit-dev/r-shinylive - Shinylive for Quarto: https://github.com/quarto-ext/shinylive --- Socials 👨‍💻 https://github.com/coatless 🐘 https://mastodon.social/@coatless 🦋 https://bsky.app/profile/coatless.bsky.social 🕸️ https://thecoatlessprofessor.com 📋 https://linkedin.com/in/jamesbalamuta/ 🕊️ https://twitter.com/axiomsofxyz