Where to store ccs file when packaging a shiny app

Question

I’m packaging a shiny app with R. I have five files

The ui.R

    ui <-
    div(
        class = "navbar1",
navbarPage(
    div(tags$b("Test"), style = "color:#dcaaaa"),
           theme = "custom.css",
           tabPanel("Plot",
                    sidebarLayout(
                        sidebarPanel(
                            radioButtons("plotType", "Plot type",
                                         c("Scatter"="p", "Line"="l")
                            )
                        ),
                        mainPanel(
                            plotOutput("plot")
                        )
                    )
           ),
           tabPanel("Summary",
                    verbatimTextOutput("summary")
           ),
           navbarMenu("More",
                      tabPanel("Table",
                               DT::dataTableOutput("table")
                      ),
                      tabPanel("About",
                               fluidRow(
                                   # column(6,
                                   #        includeMarkdown("about.md")
                                   # ),
                                   column(9,
                                          img(class="img-polaroid",
                                              src=paste0("http://upload.wikimedia.org/",
                                                         "wikipedia/commons/9/92/",
                                                         "1919_Ford_Model_T_Highboy_Coupe.jpg")),
                                          tags$small(
                                              "Source: Photographed at the Bay State Antique ",
                                              "Automobile Club's July 10, 2005 show at the ",
                                              "Endicott Estate in Dedham, MA by ",
                                              a(href="http://commons.wikimedia.org/wiki/User:Sfoskett",
                                                "User:Sfoskett")
                                          )
                                   )
                               )
                      )
           )
)
)

The server.R

server <- function(input, output, session) {
    output$plot <- renderPlot({
        plot(cars, type=input$plotType)
    })

    output$summary <- renderPrint({
        summary(cars)
    })

    output$table <- DT::renderDataTable({
        DT::datatable(cars)
    })
}

The launchApp.R

#' launches the test shiny app
#'
#' @export launchApp
#'
#' @return shiny application object
#'
#' @example \dontrun {launchApp()}
#'
#' @import shiny 
#'


# wrapper for shiny::shinyApp()
launchApp <- function() {
  shinyApp(ui, server)
}

The custom.css

.navbar1 .navbar{background-color: #2C6D26;}

.navbar1 .navbar-default .navbar-brand{color: white;}


.navbar1 .navbar-nav li a:hover, .navbar1 .navbar-nav > .active > a 
  {
    color: #fff !important;
    background-color:#2C6D26 !important;
    background-image: #fff !important;
  }

The objective is to package this app into MyPackage. Following http://r-pkgs.had.co.nz/inst.html, I created a folder www under inst. I organized the files like:

| MyPackage/
    | R
        | ui.R
        | server.R
        | launchApp.R
    | inst
        | www
            | imgName.jpg
            | custom.css

The image is available on http://upload.wikimedia.org/wikipedia/commons/9/92/1919_Ford_Model_T_Highboy_Coupe.jpg -- to be renamed as imgName.jpg

Could get the package built. But cannot get the css and jpg files working in the package.

There is Including an image in a shiny app package. But still can’t figure it out.

What’s the best way to achieve this? Many thanks!

Please share an [example](https://stackoverflow.com/help/mcve) so that we may help you, including the code for your shiny app and the names and locations of your css and png files. Without this information it will be difficult to help you. — Wil, May 08 '19 at 13:49
Thank you @Will. I edited the question and share the codes (ui.R, server.R and custom.css) and indicated the location of the jpg file. — Gaston, May 08 '19 at 15:06

score 2 · Accepted Answer · answered May 09 '19 at 08:33

2

You should use addResourcePath for that (like in the answer you link to). Create a function in your package like this :

.onLoad <- function(...) {
  shiny::addResourcePath(
    prefix = "custom-assets", # custom prefix that will be used to reference your directory
    directoryPath = system.file("www", package = "MyPackage") # path to resource in your package
  )
}

After you'll be able to refer to the custom prefix to find your files in your app :

tags$link(href="custom-assets/styles.css", rel="stylesheet")

tags$img(class="img-polaroid", src = "custom-assets/imgName.jpg")

theme is an argument of navBarPage, it's not in the right place in your code.

answered May 09 '19 at 08:33

Victorp

13,636
2
51
55

Thank you @Victorp for your response. Then I have the .onLoad function in a zzz.R file with under the R folder. But still can't render with the css and jpg – Gaston May 09 '19 at 13:43
It worked when I refer to the css file with theme = "custom.css". Indeed thank you very for .onLoad function that solved it! – Gaston May 09 '19 at 14:40

Where to store ccs file when packaging a shiny app

1 Answers1