csstwitter-bootstrapbrandingrcloud

Can I use Bootstrap with RCloud?

Although Shiny is great, I would really like to make my own responsive dashboard and use custom branding, so can I use Bootstrap in RCloud?

Solution

  • There are several methods of adding CSS in RCloud, including:

    Method 1.

    In a edit.html/view.html notebook (standard notebook interface), add the CSS as an RCloud Asset and use:

     rcloud.install.css(paste0("/notebook.R/",rcloud.session.notebook.id(),"/simple.css"))

    Note: This assumes the RCloud Asset is in the same notebook. If not, the notebook.R path would need to be specified. notebook.R serves two purposes, 1. serve notebooks as "scripts" processing REST API, serve static assets from notebooks (e.g., the CSS).

    Method 2.

    In a mini.html notebook:

    library(rcloud.web) 
html.main <- rcloud.get.asset("method1.html", notebook =rcloud.session.notebook.id())
rcw.result(body=html.main)

    where method1.html:

    <html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="/notebook.R/236f9f7e41045780d00f9dbd08b8a890/simple.css">
</head>
<body>
etc.

    Method 3.

    In a mini.html notebook, use the body parameter of rcw.result to add direct HTML:

    library(rcloud.web) 
rcw.result( 
body="<script language='javascript' type='text/javascript' src='/notebook.R/e8c8df5eff2161b309213b8f7e7cafd6/simple.js'></script>
<link rel='stylesheet' type='text/css' href='/notebook.R/e8c8df5eff2161b309213b8f7e7cafd6/simple.css' media='screen'/>
<div id=left-margin>A very simple notebook.
<p id=demo>It worked!</p>
<button class=intro type='button' onclick='myFunction()'>Click me</button></div>"
)

    Note: The inner quotes must be single quotes. There are other permutations of this and you can also add Javascript and JS libraries (e.g., D3 and JQuery) the same way - which is nice, especially since mini.html can register callbacks and has a running RCloud session available as long as the page is open.