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: github.com/coatless-quarto/r-...
Website: coatless-quarto.github.io/r-s...
Posit::conf(2023):
Joe Cheng's Talk: jcheng5.github.io/posit-conf-...
The "Include" option:
jcheng5.github.io/posit-conf-...
Source of Joe Cheng's Shiny App:
github.com/jcheng5/posit-conf...
Shinylive
- Shinylive R Package: github.com/posit-dev/r-shinylive
- Shinylive for Quarto: github.com/quarto-ext/shinylive
---
Socials
👨‍💻 github.com/coatless
🐘 mastodon.social/@coatless
🦋 bsky.app/profile/coatless.bsk...
🕸️ thecoatlessprofessor.com
📋 / jamesbalamuta
🕊️ / axiomsofxyz

[@leonardocerliani3479]

Thank you so much for this demo! I can't stop thinking about the million possibilities that this opens :O)

[@thecoatlessprofessor7674]

I appreciate your enthusiastic response! The demonstration of R Shinylive built on top of webR is truly mind-blowing, and it's incredible to think about the endless possibilities it unlocks. It's a game-changer that's sure to inspire a revolution in how we approach things. 😊🚀

[@transportation-talk]

Cool! Thank you for putting this together.

[@thecoatlessprofessor7674]

No problem!

[@errlyt]

Thank you

[@errlyt]

how would you add a shiny app with multiple file structures that read data from .RDS in a .qmd file?

[@thecoatlessprofessor7674]

You're welcome

[@thecoatlessprofessor7674]

You can approach working with the `.RDS` data by downloading the RDS file into the application: Check out the following demo showing a CSV. tutorials.thecoatlessprofessor.com/r-shinylive-data-include/include-download-from-url.html Switch the use of read.csv() with readRDS() and you should be okay.

[@errlyt]

@@thecoatlessprofessor7674can I do this? url_data_longlat

[@krushnachChandra]

you have new sub

[@thecoatlessprofessor7674]

Welcome aboard!

[@howardbaek5413]

I was at Joe's talk and was blown away. It's nice to get a rundown of shinylive. Thanks for sharing :) Quick question: Do you know why RStudio's Terminal shows "-ne" every after command?

[@thecoatlessprofessor7674]

You're very welcome! 😊 I couldn't agree more, the future of data science is incredibly promising, especially with the vast potential of WebAssembly (WASM) enabling a multitude of exciting browser applications. Now, as for that pesky `-ne` note, it's quite possible that a comparison is being triggered less than optimally. This issue seems to arise because RStudio defaults to using `bash` as the shell on macOS instead of `zsh`. This default setting doesn't align with Apple's vigorous push towards adopting GPL-free software, which has definitely added an interesting twist to the development environment.

[@grahamplatten1580]

Thanks for this. Super useful guide. Just one question. I tried publishing to quarto pub but the file size is over ther 100mb limit. Are there any alternate hosting sites which can allow the larger size?

[@thecoatlessprofessor7674]

I'm glad you found the guide super useful! Regarding your question about publishing to Quarto Pub and the file size limit issue, you might want to consider GitHub Pages, Netlify, or even a personal webserver if you have one. These platforms often have more generous file size limits, and they can be great alternatives for sharing your content. If it helps, I've raised the issue on the `r-shinylive` repository (c.f., github.com/posit-dev/r-shinylive/issues/10 ). I should have a video out tomorrow that covers deployment.

[@mikegaunt837]

Awesome! Thanks for the effort. Quick question: I was following along with your example and get hung up in two places, with no debug options. If I add the format-grid-width-1400px YAML or if I add inputs, like a random action button that doesn't do anything in the server part, then the entire Quarto renders as an HTML and the Shinylive-r code block renders only as printed code and not as an interactive block. Have you seen Quarto do this? Seems weird that just with the addition of a simple action block the "ShinyLive-ness" would explode. :(

[@thecoatlessprofessor7674]

For the format, it should be: ``` format: html: grid: body-width: 1300px ``` Details on other grid options can be found here: quarto.org/docs/output-formats/page-layout.html#html-page-layout Regarding debug options, the best bet here is to use `print()` statements inside the shinylive app. These statements will likely end up in the web browser's JavaScript console that can be accessed via the Web Develooper tool shortcut: Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux). Alternatively, you could move more toward the "Convert" option.

[@mikegaunt837]

@@thecoatlessprofessor7674 oh awesome idea about the print suggestion, I’ll check it out, thanks!!

[@dnlkhln1692]

Thank you very much for this! When I recreate your example step by step the shiny app is rendering, but never actually shows in the browser (loads for a while then just a plain white screen). I installed the packages as instructed and have the _extension set up as well in the project. If someone could help out with this I would appreciate it very much!

[@thecoatlessprofessor7674]

That's a bit odd. What happens if you click on: quarto.thecoatlessprofessor.com/r-shinylive-demo/ Do you see the shiny app loaded?

[@dnlkhln1692]

@@thecoatlessprofessor7674thanks for the quick response - this works. I will try my example on a different computer to see if that's causing the issue.

[@ekonomist61]

Thank you ! I completely repeated you video! All the best! Just a little question? Ok then? Simply, How I visualize “R-shinylive-demo.html” with out of RStudio? I.e. my friend computer with out R Studio. Hoping able to explain my problem.

[@thecoatlessprofessor7674]

You can't click on the `R-shinylive-demo.html` to launch it without changing the browser environment to allow for local files to be detected. Specifically, the shiny service worker. See the troubleshoot note over in {quarto-webr}: quarto-webr.thecoatlessprofessor.com/qwebr-troubleshooting.html#directly-accessing-rendered-html

[@Jamiewharton]

Not sure if I have misunderstood the process? When I render the doc in R-Studio, everything runs as it does in this video. When I open the html file it produces separately of the rendering process in a web browser it just shows text of the Shiny code and not the app.

[@thecoatlessprofessor7674]

The reason everything "works" in RStudio is because the Shinylive application is being run through a local server. If you directly double-click on the shinylive rendered .html, the app will not load in a browser without it being launched with permissions to look at the local file system, c.f. quarto-webr.thecoatlessprofessor.com/qwebr-troubleshooting.html#directly-accessing-rendered-html So, you will need to either publish it using any ol' web server (GitHub Pages, Netlify, Quarto Pub, ...) and share the link or setup the necessary local modifications.

[@basic808]

Thanks for taking the time to make this video. I am getting some errors on render of the qmd filer: Unzipping to C:\...AppData\Local\shinylive\shinylive\Cache/ Error: object 'cli_progress_bar' is not exported by 'namespace:cli' In addition: Warning messages: 1: replacing previous import 'lifecycle::last_warnings' by 'rlang::last_warnings' when loading 'tibble' 2: replacing previous import 'ellipsis::check_dots_unnamed' by 'rlang::check_dots_unnamed' when loading 'tibble' 3: replacing previous import 'ellipsis::check_dots_used' by 'rlang::check_dots_used' when loading 'tibble' 4: replacing previous import 'ellipsis::check_dots_empty' by 'rlang::check_dots_empty' when loading 'tibble' 5: replacing previous import 'lifecycle::last_warnings' by 'rlang::last_warnings' when loading 'pillar' 6: replacing previous import 'ellipsis::check_dots_unnamed' by 'rlang::check_dots_unnamed' when loading 'pillar' 7: replacing previous import 'ellipsis::check_dots_used' by 'rlang::check_dots_used' when loading 'pillar' 8: replacing previous import 'ellipsis::check_dots_empty' by 'rlang::check_dots_empty' when loading 'pillar' Execution halted and also: Error running 'Rscript' command. Perhaps you need to install / update the 'shinylive' R package? I've installed from CRAN as well as by this method: # Install the 'pak' package manager if you haven't already install.packages("pak") # Install 'r-shinylive' using 'pak' pak::pak("posit-dev/r-shinylive") is there a way to update the pak installation of shinylive?

[@thecoatlessprofessor7674]

Try installing directly from CRAN using: install.packages("shinylive") You may also need to update the Quarto shinylive extension with: quarto add quarto-ext/shinylive

[@yosepdwik]

Thanks a lot for this! However, after I followed your instructions (from step 1 to 6) and rendered the Quarto document, I got this message: ERROR: Error running 'Rscript' command. Perhaps you need to install the 'shinylive' R package? ERROR: expected argument of type string, got nil. Do you have any suggestions for me?

[@thecoatlessprofessor7674]

So, two things: 1. Is the `shinylive` package installed? ```r install.packages("pak") pak::pak("posit-dev/r-shinylive") ``` 2. What happens when you run in Terminal (where we created the Quarto project & downloaded the Shinylive Quarto extension) ``` quarto check ```

[@Ronaldmoura1989]

@@thecoatlessprofessor7674 same error here. I've tried both options but somehow Quarto does not find shinylive installation. Here is the complete error message: Error running filter C:/PROGRA~1/RStudio/RESOUR~1/app/bin/quarto/share/filters/main.lua: ...Web Sites\_extensions\quarto-ext\shinylive\shinylive.lua:40: Error running 'Rscript' command. Perhaps you need to install / update the 'shinylive' R package?

[@gtalckmin]

I wonder if it would be possible to embed that into a RevealJS presentation or if it would be best to host that on a different server and call it from the presentation.

[@thecoatlessprofessor7674]

100% works within a RevealJS presentation. In fact, the demo app that was created in this video was from Joe Cheng's Keynote slides that were generated with the `revealjs` format in Quarto: github.com/jcheng5/posit-conf-2023-shinylive/blob/main/slides.qmd

[@FantasizingHere]

I'm unable to get shinylive R with Quarto working! I ported an existing (working) shiny app into a .qmd file, and it shows the loading hexagon on the rendered website, but it never actually loads and in the console it says "preload error:Downloading webR package: ..." for essentially every R package (that was imported through library(...) calls). How do I fix this? I really want shiny live to work without having to resort to uploading to the shiny website :(

[@thecoatlessprofessor7674]

Analyzing the situation without access to the app source can be a bit challenging. However, it's worth mentioning that the "preload error: Downloading webR package" message is a normal part of the app startup process. It involves downloading around 50MB of data, so if your internet connection is slow, it might take a little time. When working with the current Shinylive version, there are a few limitations to keep in mind: 1. **Package Compatibility:** Not all packages are supported, and some that are may have reduced features. You can check whether your package is supported by visiting this link: [repo.r-wasm.org/](repo.r-wasm.org/) (Please note, it may take some time to load). 2. **Local Folder Support:** The "include" method doesn't support local folder access, which might pose challenges when using data stored on disk. To address this, you can use the "Convert" method to store data into the `app.json` file. 3. **Access to HTML:** It's not feasible to directly access the HTML of the `r-shinylive` app (e.g., clicking on rendered output) without serving it from somewhere or adjusting browser sandboxing settings to access the data. If you're able to provide an example, I'd be more than happy to take a closer look and offer further assistance. Your engagement in troubleshooting is highly appreciated!

[@user-ug3xe2zr7j]

Amazing video! I have been trying to create a shinylive quarto document in which the data comes from a csv. However, every time I try it, it fails. Do you have any idea how to make it happen?

[@thecoatlessprofessor7674]

You can approach the `.csv` from two ways: 1. Embedding file contents into the cell tutorials.thecoatlessprofessor.com/r-shinylive-data-include/include-file.html 2. Downloading the CSV into the application: tutorials.thecoatlessprofessor.com/r-shinylive-data-include/include-download-from-url.html I would suggest using the latter approach as it allows the file to remain separate.

[@masonlowery9600]

I am having a hard time understanding the benefit of this, as this still requires a live r session to run the app? Right? As soon as the user closes R the webpage is no longer available

[@thecoatlessprofessor7674]

The existing Shiny paradigm requires: 1. an installed version of R, 2. a licensed copy of Shiny Server, and 3. a managed server to host a Shiny application. In comparison, Shinylive for R only requires a server capable of hosting a "static" web page, serving HTML without server-side processing. Thus, with Shinylive for R, you can host your R application on any platform where a web server is available, such as GitHub Pages, Netlify, or Quarto Pub. These platforms function as static web hosts. So, R and its associated {shiny} packages are directly downloaded into the user's browser, creating a dynamic "pseudo-web" app that is accessible without the need for traditional server infrastructure.

[@Randomwayz]

Can you source the shiny app in the chunk? I tend to like to keep my qmd file as clean as possible and store scripts elsewhere

[@thecoatlessprofessor7674]

Unfortunately, you cannot source the shiny app into the chunk. This is one of the limitations of how the `{shinylive-r}` custom code was implemented. I've already filed an issue ticket over here: github.com/quarto-ext/shinylive/issues/37

[@santiagosotelo6881]

seems like using your own data (.csv, .xlsx) is really hard. examples use sample data or data from packages....

[@thecoatlessprofessor7674]

Not necessarily. To use your own data in like a CSV, you'll need to "download it" into the Shiny app using base R functions that do not depend on the `curl` package. For example, we can load data from my raw-data repository via: ```r # Location of data data_url = "coatless.github.io/raw-data/pima.csv" ``` Loading the downloaded data via CSV: ```r download.file(data_url, "pima.csv") pima_csv = read.csv("pima.csv") # Or directly download data to temporary: pima_csv_v2 = read.csv(data_url) ``` Another option would be to use the combination of: ```r pima_rl = readLines(url(data_url)) ```

[@santiagosotelo6881]

@@thecoatlessprofessor7674 thanks for the answer.

[@thecoatlessprofessor7674]

So, I ended up writing out the process of using external data, e.g. CSV, into a quick guide: tutorials.thecoatlessprofessor.com/r-shinylive-data-include/include-download-from-url.html Hope it helps!

[@JOHNSMITH-ve3rq]

My gosh yaml is a ridiculous format for this stuff. The team needs to come up with a much better ux for declaring preferences. Breaking with no explanation on a missing space? We shouldn’t be dealing with this stuff in 2023…4

[@thecoatlessprofessor7674]

YAML is only really needed for embedding in a quarto document and error messages are a bit better in VS code vs Rstudio. That said, creating shinylive apps directly (e.g without Quarto) requires only a series of R commands.