Serving Static Resources over CDN

shiny
1

Hello,

Is it possible to host the static files for my shiny apps at a CDN?

Examples of the type of files I'm referring to:
shiny.min.js, bootstrap.min.js, bootstrap.min.css, shiny-server.css...

:slight_smile:

2

This thread and post might be helpful!

3

Thanks for your reply.
I used that code snippet (with no errors) but the shiny app (Rmarkdown) is still loading the .js file from the server rather than the cdn.

I used this code:

htmltools::htmlDependency(name = "bootstrap.min.js", version ="3.3.7", 
src = c(href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"), script = "bootstrap.min.js")

Any idea why it's not loading the js resource?

4

No idea, but I would suggest posting a minimal reproducible example so that more knowledge people might be able to help

5

Check your browser developer tools - that dependency URL actually resolves to something like https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js/bootstrap.min.js

I fixed up the URL and also added the stylesheet:

library(shiny)

bootstrapDep <- htmltools::htmlDependency("bootstrap", "3.3.7",
  src = c(href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/"),
  script = "js/bootstrap.min.js", stylesheet = "css/bootstrap.min.css"
)

ui <- tagList(
  bootstrapDep,
  fluidPage(
    actionButton("btn", "btn")
  )
)

server <- function(input, output) {}

shinyApp(ui, server)
2 Likes
6

We've been trying to make this work but haven't been able to.

Does this code (@greg's) override loading bootstrap.min.js and bootstrap.min.css from a local source with loading them from MaxCDN?
Would it work with, for example, the hello sample app?

7

Do you have an example of what you've tried that doesn't work?

The bootstrapDep in my example would work in the hello sample app in similar fashion, placed somewhere in the static UI. To confirm it's working, you can open your browser's developer tools and inspect network requests or look at the page source. For the example I posted, this is the generated HTML:

<!DOCTYPE html>
<html>
<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="application/shiny-singletons"></script>
  <script type="application/html-dependencies">json2[2014.02.04];jquery[1.12.4];shiny[1.0.5];bootstrap[3.3.7]</script>
<script src="shared/json2-min.js"></script>
<script src="shared/jquery.min.js"></script>
<link href="shared/shiny.css" rel="stylesheet" />
<script src="shared/shiny.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>
  <div class="container-fluid">
    <button id="btn" type="button" class="btn btn-default action-button">btn</button>
  </div>
</body>

</html>

Without bootstrapDep, it looks like


<!DOCTYPE html>
<html>
<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="application/shiny-singletons"></script>
  <script type="application/html-dependencies">json2[2014.02.04];jquery[1.12.4];shiny[1.0.5];bootstrap[3.3.7]</script>
<script src="shared/json2-min.js"></script>
<script src="shared/jquery.min.js"></script>
<link href="shared/shiny.css" rel="stylesheet" />
<script src="shared/shiny.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="shared/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="shared/bootstrap/js/bootstrap.min.js"></script>
<script src="shared/bootstrap/shim/html5shiv.min.js"></script>
<script src="shared/bootstrap/shim/respond.min.js"></script>

</head>

<body>
  <div class="container-fluid">
    <button id="btn" type="button" class="btn btn-default action-button">btn</button>
  </div>
</body>

</html>

I just noticed Shiny also includes html5shiv and respond.js with Bootstrap, for legacy browser support (IE 9 and below?). You may want to add these too.