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: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
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:

Posit::conf(2023):

The "Include" option:

Source of Joe Cheng's Shiny App:

Shinylive

---

Socials

[leonardocerliani]

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

[transportation-talk]

Cool! Thank you for putting this together.

[howardbaek]

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?

[basic]

Thanks for taking the time to make this video.

I am getting some errors on render of the qmd filer:
Unzipping to
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 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 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'



is there a way to update the pak installation of 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?

[dnlkhln]

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!

[celebrando_a_vida]

Thank you very much for the explanation. I cannot read .csv from local folder to plot figure or table. I added in _quarto.yml [static-dir: data] but in shinylive it does not found the file.

[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.

[GB-gujz]

I have issues on height of the shinylive window, any way to size it?

[grahamplatten]

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?

[kocakalpay]

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.

[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 :(

[mikegaunt]

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. :(

[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.

[RafaelLópez-ee]

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?

[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

[masonlowery]

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

[santiagosotelo]

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

[JOHNSMITH-verq]

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