Cannot link to CSS file in Shiny apps

[AlbertRapp]

I'm not sure whether this is a bug for here or REditorSupport/vscode-R but it seems like a link issue than an editor problem. In any case here's the problem.

Description

Linking to CSS files in Shiny apps do not work, i.e. I cannot use:

tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "style.css")
  )

The file style.css cannot be found. I've already tried multiple different versions of the path like www/style.css or the complete path on my file system. Never worked. The code and the file location should be correct. The exact same code renders fine in RStudio.

At first I thought this is related to RStudio projects, but even if I open a different workspace that does not contain an RStudio project, the problem persists.

[renkun-ken]

Would you like to provide a minimal reproducible example (including the code of a minimal shiny app that uses an external css file) so that we could reproduce it easily?

[AlbertRapp]

Hi @renkun-ken,

sorry for the incredibly late reply. I believe I loaded CSS files in R and included them with includeCSS() and then forgot about this issue. Now I run into a similar issue where local links to a PDF seem to be broken when using VSCode instead of RStudio. Here's an reprex that tries linking to different file types. Specifically, the app links to

• a dummy pdf file
• a gif (a cute bear 🐻), and
• a CSS file (makes headlines bold and red-ish)

All files can be found at reprex.zip. Alternatively, if you don't want to use a zip-file from a random dude on the internet, I have provided the links to the files above. Also, here's the code part.

Reprex

app.R

library(shiny)
#> Warning: Paket 'shiny' wurde unter R Version 4.3.2 erstellt

ui <- fluidPage(
  tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "style.css")
  ),
  h1('Include pdf via uiOutput() and iframe'),
  uiOutput('pdf'),
  h1('Include Image via uiOutput() and img tag'),
  uiOutput('img_ui'),
  h1('Include Image via imageOutput()'),
  imageOutput('img')
)

server <- function(input, output, session) {
  output$pdf <- renderUI({
    htmltools::tags$iframe(
      src = 'dummy.pdf'
    )
    
  })
  output$img_ui <- renderUI({
    htmltools::tags$img(
      src = 'hello-bear-waving.gif'
    )
  })
  output$img <- renderImage({
    list(
      src = 'www/hello-bear-waving.gif', ## Needs www/ path
      width = '400px',
      height = '200px',
      alt = "This is alternate text"
    )
  }, deleteFile = FALSE)
}

shinyApp(ui, server)

Shiny applications not supported in static R Markdown documents

^{Created on 2024-02-16 with reprex v2.1.0}

Session info

sessionInfo()
#> R version 4.3.1 (2023-06-16 ucrt)
#> Platform: x86_64-w64-mingw32/x64 (64-bit)
#> Running under: Windows 11 x64 (build 22621)
#> 
#> Matrix products: default
#> 
#> 
#> locale:
#> [1] LC_COLLATE=German_Germany.utf8  LC_CTYPE=German_Germany.utf8   
#> [3] LC_MONETARY=German_Germany.utf8 LC_NUMERIC=C                   
#> [5] LC_TIME=German_Germany.utf8    
#> 
#> time zone: Europe/Berlin
#> tzcode source: internal
#> 
#> attached base packages:
#> [1] stats     graphics  grDevices utils     datasets  methods   base     
#> 
#> other attached packages:
#> [1] shiny_1.8.0
#> 
#> loaded via a namespace (and not attached):
#>  [1] cli_3.6.2         knitr_1.45        rlang_1.1.3       xfun_0.41        
#>  [5] promises_1.2.1    jsonlite_1.8.8    xtable_1.8-4      glue_1.7.0       
#>  [9] htmltools_0.5.7   httpuv_1.6.14     sass_0.4.8        rmarkdown_2.25   
#> [13] evaluate_0.23     jquerylib_0.1.4   ellipsis_0.3.2    fastmap_1.1.1    
#> [17] yaml_2.3.8        lifecycle_1.0.4   compiler_4.3.1    fs_1.6.3         
#> [21] Rcpp_1.0.12       rstudioapi_0.15.0 later_1.3.2       digest_0.6.34    
#> [25] R6_2.5.1          reprex_2.1.0      magrittr_2.0.3    bslib_0.6.1      
#> [29] tools_4.3.1       withr_3.0.0       mime_0.12         cachem_1.0.8

style.css

h1 {color: #f75990;font-weight:600;}

Expected Output (which I get with RStudio)

Actual Output (in VSCode)

Comments

I've noticed a couple of things:

1. Using imageOutput() works in both cases. This is due to the fact that renderImage() includes the image via base64 encoding and doesn't link to the file in the www directory. It seems that VSCode can find the file so that renderImage() can do its thing but linking is an issue.
2. In VSCode the last image is only displayed if I make sure to set my working directory to the one that contains the app.R file. But my R project file structure is actually R_project_directory/reprex/<here is where app.R and the www directory are>. In RStudio this wasn't an issue. Executing app.R in whatever directory immediately made that directory as the working directory while running the Shiny app. I'm not particularly sure what to make out of this but maybe it will give you a hint.