Creating a Basic Shinylive Application (R)

Introduction

Shinylive enables you to run Shiny applications entirely in the browser using WebAssembly. In this tutorial, you’ll build a simple Shiny app and then export it as a Shinylive app. This serverless approach allows you to share interactive Shiny apps on static hosting platforms like GitHub Pages.

1. Building Your Shiny App

Copy and paste the following code, into the app.r file, to create a basic Shiny app. The code creates a simple Shiny app with a slider and a histogram:

library(shiny)
library(bslib)

# Define the UI using a sidebar layout.
ui <- page_sidebar(
  title = "Hello Shiny!",
  sidebar = sidebar(
    sliderInput("bins", "Number of bins:", min = 5, max = 30, value = 10)
  ),
  plotOutput("distPlot")
)

# Define server logic to generate a histogram.
server <- function(input, output) {
  output$distPlot <- renderPlot({
    x <- mtcars$mpg
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    hist(x, breaks = bins, col = "#75AADB", border = "white",
         main = "Histogram of MPG", xlab = "Miles Per Gallon")
  })
}

# Create and run the Shiny app.
shinyApp(ui = ui, server = server)

Note

You can test this app locally in RStudio by running the code.

2. Exporting Your Shiny App with Shinylive

Once your Shiny app is working, use the {shinylive} package to export it as a static, serverless application.

Step-by-Step Export Process

1. Prepare Your App Directory:
   Save your Shiny app files (e.g., app.R) in a directory. For example, create a folder named myapp.

2. Export the App:
   Use the shinylive::export() function to convert your Shiny app into static files that run in the browser. For example:

   # Replace "myapp" with the path to your app directory.
   # Replace "site" with the target directory for the exported files.
   shinylive::export("myapp", "site")

   This command creates a new folder (site/) containing HTML, JavaScript, CSS, and WASM files necessary to run your app as a static website.

3. Preview Your Exported App:
   You can use httpuv::runStaticServer() to serve the exported app locally:

   library(httpuv)
   httpuv::runStaticServer("site/")

   Open your browser and navigate to the URL provided by the command to see your Shinylive app running.

3. Deploying to Static Hosting Services

After verifying that your exported app works locally, deploy the contents of the site/ folder to a static hosting service.

Here are the general steps for deploying your Shinylive app on GitHub Pages:

1. Create a Repository:
   Initialize a GitHub repository and add the site/ folder to it.

2. Configure GitHub Pages:
   In your repository settings, enable GitHub Pages and select the branch/folder containing your exported app (e.g., the root of the repository or a docs/ folder).

3. Push and Publish:
   Commit and push your changes. Your app should be accessible via the GitHub Pages URL provided in the repository settings.

4. Access Your App:
   Once GitHub Pages is enabled, your app will be accessible via a URL like https://yourusername.github.io/your-repo/.

Note

Other static hosting options like Netlify follow similar steps: simply upload the contents of the site/ folder and configure the deployment settings.

4. Tips for a Successful Export

• Check Asset Versions:
  Use shinylive::assets_info() to verify that the correct web assets are installed and cached.

• Update Packages if Needed:
  If you encounter issues with asset versions, try running shinylive::assets_download() to update your assets.

• Clean Up Old Assets:
  Periodically, run shinylive::assets_cleanup() to remove outdated asset versions from your cache.

4. Further Reading

• Introduction to Shinylive for R
  Get an overview of Shinylive, its components, and its benefits.
• Installing and Setting Up Shinylive (R)
  Learn how to install the {shinylive} package and configure asset management.
• Creating a Basic Shinylive Application (R)
  Build and export your first Shinylive app.
• Embedding Shinylive Apps in Quarto Documents (R)
  Learn how to integrate Shinylive apps directly into your Quarto documents.

Conclusion

By following this tutorial, you’ve learned how to create a simple Shiny app and export it as a Shinylive application—transforming your Shiny code into a serverless, browser-based interactive experience. With these tools, you can easily share your Shiny apps on static hosting platforms, expanding the reach of your interactive R content.

Explore More Articles

Note

Here are more articles from the same category to help you dive deeper into the topic.