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

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-...
Website: https://coatless-quarto.github.io/r-s...

Posit::conf(2023):

Joe Cheng's Talk: https://jcheng5.github.io/posit-conf-...

The "Include" option:
https://jcheng5.github.io/posit-conf-...

Source of Joe Cheng's Shiny App:
https://github.com/jcheng5/posit-conf...

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.bsk...
🕸️ https://thecoatlessprofessor.com
📋   / jamesbalamuta  
🕊️   / axiomsofxyz