7 Chapter 6: Advanced Shiny – Embedding Apps in Quarto

7.0.1 Key Topics

Advanced Shiny: Embedding Shiny apps into Quarto for interactive website deployment.
Customizing Shiny apps for seamless integration into a Quarto site.
Hands-on exercises to integrate a Shiny app within a Quarto website, using GitHub Pages for deployment.

7.0.2 Outcome

Participants will integrate a fully functional Shiny app into their Quarto websites.

7.1 Introduction

Integrating Shiny apps into a Quarto website allows you to add interactivity to your static pages. This can be achieved by embedding the Shiny app as an iframe within your Quarto document.

7.2 Step-by-Step Guide: Embedding Shiny Apps in Quarto

7.2.1 Step 1: Create and Deploy Your Shiny App

Develop Your Shiny App Locally:
- Use the structure from Chapter 4 to create your app.R file.
- Ensure your app runs correctly in RStudio.
Deploy Your App on shinyapps.io:
- Follow the publishing steps from Chapter 4 to deploy your app on shinyapps.io.
- Obtain the URL of your deployed app (e.g., https://yourusername.shinyapps.io/yourapp).

7.2.2 Step 2: Embed the Shiny App in a Quarto Document

Create a New Quarto Document:
- In your Quarto project, create a new .qmd file (e.g., shiny_app_embed.qmd).
Add an Iframe to Embed the App:
- Use HTML to embed the Shiny app within your Quarto document using an iframe:

---
title: "Embedded Shiny App"
format:
  html:
    page-layout: full
---

7.3 Interactive Shiny App

Customize the Appearance:
- Adjust the width and height attributes of the iframe to fit your design preferences.

7.3.1 Step 3: Deploy Your Quarto Website with Embedded App

Render Your Quarto Site Locally:
- Use RStudio to render your site and ensure that the embedded iframe displays the Shiny app correctly.
Deploy Your Site on GitHub Pages:
- Push your updated site to GitHub and enable GitHub Pages as described in previous chapters.
- Access your live site to verify that the embedded Shiny app functions as expected.

7.3.2 Exercises

Exercise 1: Modify the iframe dimensions and observe how it affects the display of your Shiny app.
Exercise 2: Add additional interactive components to your Shiny app and update the embedded version.
Exercise 3: Experiment with different page layouts in Quarto to enhance user experience.

By following these steps, participants will successfully integrate and deploy interactive Shiny applications within their Quarto websites, enhancing their web development skills with R.

7.3.3 Recap

Embedding via Iframe: Provides instructions on embedding a deployed Shiny app using an iframe in a Quarto document.
Customization: Offers guidance on adjusting iframe properties for better integration into the website.
Deployment: Details how to render and deploy the updated site with embedded content using GitHub Pages.

# Chapter 6: Advanced Shiny – Embedding Apps in Quarto ### Key Topics - Advanced Shiny: Embedding Shiny apps into Quarto for interactive website deployment. - Customizing Shiny apps for seamless integration into a Quarto site. - Hands-on exercises to integrate a Shiny app within a Quarto website, using GitHub Pages for deployment. ### Outcome Participants will integrate a fully functional Shiny app into their Quarto websites. ## Introduction Integrating Shiny apps into a Quarto website allows you to add interactivity to your static pages. This can be achieved by embedding the Shiny app as an iframe within your Quarto document. ## Step-by-Step Guide: Embedding Shiny Apps in Quarto ### Step 1: Create and Deploy Your Shiny App 1. **Develop Your Shiny App Locally:** - Use the structure from Chapter 4 to create your `app.R` file. - Ensure your app runs correctly in RStudio. 2. **Deploy Your App on shinyapps.io:** - Follow the publishing steps from Chapter 4 to deploy your app on shinyapps.io. - Obtain the URL of your deployed app (e.g., `https://yourusername.shinyapps.io/yourapp`). ### Step 2: Embed the Shiny App in a Quarto Document 1. **Create a New Quarto Document:** - In your Quarto project, create a new `.qmd` file (e.g., `shiny_app_embed.qmd`). 2. **Add an Iframe to Embed the App:** - Use HTML to embed the Shiny app within your Quarto document using an iframe: ```{markdown} --- title: "Embedded Shiny App" format: html: page-layout: full --- ``` ## Interactive Shiny App ```{=html} <iframe src="https://karlho1.shinyapps.io/nba2024/" width="100%" height="600" frameborder="0"></iframe> ``` 3. **Customize the Appearance:** - Adjust the `width` and `height` attributes of the iframe to fit your design preferences. ### Step 3: Deploy Your Quarto Website with Embedded App 1. **Render Your Quarto Site Locally:** - Use RStudio to render your site and ensure that the embedded iframe displays the Shiny app correctly. 2. **Deploy Your Site on GitHub Pages:** - Push your updated site to GitHub and enable GitHub Pages as described in previous chapters. - Access your live site to verify that the embedded Shiny app functions as expected. ### Exercises - **Exercise 1:** Modify the iframe dimensions and observe how it affects the display of your Shiny app. - **Exercise 2:** Add additional interactive components to your Shiny app and update the embedded version. - **Exercise 3:** Experiment with different page layouts in Quarto to enhance user experience. By following these steps, participants will successfully integrate and deploy interactive Shiny applications within their Quarto websites, enhancing their web development skills with R. ### Recap - **Embedding via Iframe:** Provides instructions on embedding a deployed Shiny app using an iframe in a Quarto document. - **Customization:** Offers guidance on adjusting iframe properties for better integration into the website. - **Deployment:** Details how to render and deploy the updated site with embedded content using GitHub Pages.