Including a Shinylive app in an R package and displaying it on a pkgdown website hosted via GitHub Pages is indeed possible, but it requires integrating several tools together. Here's a step-by-step guide to help you set this up:
1. Create the Shiny App :
Start by creating your Shiny app as a standalone app. For example:
# inst/shinyapp/app.R
library(shiny)
ui <- fluidPage(
titlePanel("Shiny App Example"),
sidebarLayout(
sidebarPanel(
sliderInput("obs", "Number of observations:", min = 1, max = 100, value = 50)
),
mainPanel(
plotOutput("distPlot")
)
)
)
server <- function(input, output) {
output$distPlot <- renderPlot({
hist(rnorm(input$obs))
})
}
shinyApp(ui = ui, server = server)
2. Convert the App for Shinylive :
Shinylive uses WebAssembly to run Shiny apps in the browser. To convert your Shiny app:
- Install the Shinylive CLI tool from RStudio:
pip install shinylive
- Convert your app to Shinylive:
shinylive export inst/shinyapp --output docs/shinyapp
This command generates the necessary files (including HTML, JavaScript, and WebAssembly) in the docs/shinyapp directory, which can be hosted as a static webpage.
3. Add the App to a pkgdown Article :
Pkgdown articles are R Markdown-based vignettes that you can customize to include your Shinylive app.
- Create an R Markdown article (e.g., vignettes/shinyapp.Rmd):
---
title: "Shiny App Article"
output: rmarkdown::html_document
---
Include the following HTML snippet in the body to embed the Shinylive app:
<iframe src="shinyapp/index.html" width="100%" height="600" frameborder="0"></iframe>
- Build the pkgdown site to confirm the app appears in the article:
pkgdown::build_site()
4. Host the Site on GitHub Pages :
- Add the docs/ folder to your GitHub repository.
- Enable GitHub Pages in your repository settings and set the
source to the docs/ folder.
- Push the repository to GitHub.
5. Access the App :
The app will be embedded in the pkgdown website as part of the article. Navigate to the appropriate article URL to see the Shinylive app running seamlessly.
Troubleshooting :
Path issues: Ensure the relative path in the
(shinyapp/index.html) matches the docs/ directory structure.
Cache invalidation: If changes don’t reflect immediately,
clear the browser cache or append a version string (e.g.,
shinyapp/index.html?v=1.0).
This workflow should integrate your Shinylive app into the R package and its corresponding pkgdown site. Let me know if you run into any specific issues!
-----------------------------------------Your Answer-----------------------------------------------------------------
You're on the right track. The GitHub Action you’ve configured (deploy-app.yaml from the r-shinylive examples) is designed to build and deploy Shinylive apps to your GitHub Pages. Since you've created the app and set up the necessary infrastructure, here’s how to integrate your app seamlessly into your pkgdown site:
Key Steps to Finalize Your Setup
1. Organize App Files :
UI and Server Functions in R/: Since you’ve already modularized your app by placing the UI and server logic in R/, make sure your app.R (in the root folder) sources these functions and constructs the app.
Example for app.R:
library(shiny)
source("R/ui.R") # Assuming ui.R defines `ui`
source("R/server.R") # Assuming server.R defines `server`
shinyApp(ui = ui, server = server)
Ensure app.R Works Locally: Test the app by running:
shiny::runApp("app.R")
2. Shinylive GitHub Action :
The action you’re using (deploy-app.yaml) will automatically convert the app into a Shinylive-compatible format and deploy it to GitHub Pages.
Make sure your repository’s gh-pages branch (or the branch configured for GitHub Pages) is set up to serve content from the docs/ directory.
3. Embed the App in Your pkgdown Site :
Create a vignette/article (vignettes/shiny-app.Rmd) in your package.
- Use an
<iframe> to embed the app:
---
title: "Shiny App Example"
output: rmarkdown::html_document
---
<iframe src="shiny-app/index.html" width="100%" height="600" frameborder="0"></iframe>
- Rebuild the pkgdown site to include the article:
pkgdown::build_site()
4. GitHub Pages Configurations :
5. Troubleshooting Tips :
GitHub Action Logs: Check the logs of the GitHub Action to confirm
the app is successfully converted and deployed.
Path Adjustments: Verify the iframe path (shiny-app/index.html) works
relative to your site URL.
6. Final URL Integration :
After deployment, your app should be embedded at: https://capellett.github.io/scpopulation/articles/shiny-app.html
And the app itself should be available at: https://capellett.github.io/scpopulation/shiny-app/
