Sourcing external UI resources: Building external resources (from /www/) works great shinyapps.io - Shiny Server does not load them

peernisse · March 23, 2023, 4:31pm

This issue is new to me so I am hoping for some ideas from folks who know the differences between how shinyapps.io and shiny-server open build and run the app. The exact same codebase runs perfect on rstudio local launch, and on shinyapps.io. It does not work correctly on shiny-server.

My Set up

Shiny 1.7.4
R 4.2.2
Using Golem 0.3.5 CRAN
Using Auth0
AWS EC2 Linux 2 (RHEL 7+)
Nginx
AWS RDS / MySQL / Maria

Install Tries -- All Same Results: App Works! but UI elements from www/assets not loaded up by Shiny Server

Direct upload of package directory to /srv/shiny-server/
Git clone directly to /srv/shiny-server/ ; (followed by uploading /assets/ folder and a .Renviron file which I do not keep on github)
Git clone to user rstudio; (followed by uploading /assets/ folder and a .Renviron file which I do not keep on github); and simlink at /srv/shiny-server/

Symptoms

First, remember: All functionality of auth, user interactions, backend database, and RMarkdown file export works OK on both shinyapps.io AND shiny-server, it is literally just the UI for the things in www/assets when hosted on shiny-server. This is to say, I do not get any meaningful errors when the app loads, just the files in the www folder are not loaded.

Assets in www load fine when hosted on shinyapps.io, or when run with rstudio server, but are not sourced when hosting with Shiny Server
Any assets referenced in the index.html template load, any assets referenced in R do not
The package name riverPlanner appears in the paths shown in browser devtools pane for the assets that work, but not in the attempted/failed paths for those that don't work. On shinyapps.io, all assets work and all have riverPlanner in the path.
Auth0 logout button does not work in shiny-server (I am sure this is related and will be fixed by the same fix for the rest)

Setup Description and Package structure

The app is a golem package, using an HTML template in Bootstrap 5; CSS and JS are mainly provided by CDN link in index.html; and using suppressDependencies('bootstrap','javascript','jquery') in app_ui.R
##Directory Structure##

app.R
inst/
- golem-config.yml
- app/
  - _auth0.yml
  - www/
    - index.html
    - assets/ files not getting sourced from Shiny here
      - css/ ...
      - img/...
      - js/ ...
      - scss/ ...
      - vendor/ ...
R/...the app files
DESCRIPTION
NAMESPACE

Host: Shiny Server

Missing build of assets folder items:
https://apps.datatimellc.com/riverPlanner

Screenshot Shiny Server chrome dev tools 1

Folder img/menu not built in.

1 Missing images from inst/app/www/assets/img/menu/...
2 Missing icons as font awsome V4-shims.min.css is missing
3 Path attempted to image does not include "riverPlanner"

ss14205×2371 1.06 MB

Screenshot Shiny Server chrome dev tools 2

"riverPlanner" missing from attempted path to "Breakfast-158.jpg; img/menu folder missing
The images in img/resources and img/slide come in OK because they are referenced in the parent index.html template, not in shiny

Host: Shinyapps.io

All looks good
https://peernisse.shinyapps.io/riverplanner

Screenshot shinyapps.io chrome dev tools

1,2 Pictures and font-awesome icons built in correctly and shown
3 path to images includes "riverPlanner"

shinyapp_io11920×1080 186 KB

What I think is happening

Shiny server uses a different app build mechanism than shinyapps.io
Golem add_external_resources ???? Or somewhere in the shiny::addResourcePath?
Workaround with shinyAppDir()' I have not tried because I am using auth0::shinyAppAuth0()` but maybe I need to think harder about this
OR -- This is all very simple and I have to simply change how I am constructing the path to the assets???

Regardless, I am a bit stuck

Related Discussions I found

Github

app_ui.R

github.com

peernisse/riverPlanner/blob/main/R/app_ui.R

#' The application User-Interface
#' @param request Internal parameter for `{shiny}`.
#'     DO NOT REMOVE.
#' @import shiny
#' @importFrom shinyFeedback feedback feedbackWarning feedbackDanger feedbackSuccess useShinyFeedback
#' @importFrom htmltools css
#' @noRd
app_ui <- function(request) {
  suppressDependencies('bootstrap','javascript','jquery')
  #suppressDependencies('bootstrap','javascript')

  golem_add_external_resources()
  htmlTemplate(
      filename = './inst/app/www/index.html',
        trip = mod_trip_ui('trip'),
        menu = mod_menu_ui('menu'),
        userName = mod_data_ui('data_gs'),
        gear = mod_gear_ui('gear'),
        travel = mod_travel_ui('travel')
  )

This file has been truncated. show original

run_app_auth0

github.com

peernisse/riverPlanner/blob/main/R/run_app_auth0.R

#' run_app_auth0
#' @param ... arguments to pass to golem_opts.
#' See `?golem::get_golem_options` for more details.
#' @inheritParams shiny::shinyApp
#' @export
#' @importFrom shiny shinyApp
#' @importFrom golem with_golem_options
run_app_auth0 <- function(
        onStart = NULL,
        options = list(),
        enableBookmarking = NULL,
        uiPattern = "/",
        ...
) {
    with_golem_options(
        app = auth0::shinyAppAuth0(

            ui = app_ui(),
            server = app_server,
            onStart = onStart,

This file has been truncated. show original

app.R

github.com

peernisse/riverPlanner/blob/main/app.R

# Launch the ShinyApp (Do not remove this comment)
# To deploy, run: rsconnect::deployApp()
# Or use the blue button on top of this file

pkgload::load_all(export_all = FALSE,helpers = FALSE,attach_testthat = FALSE)
options( "golem.app.prod" = TRUE, "golem.pkg.name" = "riverPlanner")
riverPlanner::run_app_auth0() # add parameters here (if any)

app_config.R

github.com

peernisse/riverPlanner/blob/main/R/app_config.R

#' Access files in the current app
#'
#' NOTE: If you manually change your package name in the DESCRIPTION,
#' don't forget to change it here too, and in the config file.
#' For a safer name change mechanism, use the `golem::set_golem_name()` function.
#'
#' @param ... character vectors, specifying subdirectory and file(s)
#' within your package. The default, none, returns the root of the app.
#'
#' @noRd
app_sys <- function(...) {
  system.file(..., package = "riverPlanner")
}


#' Read App Config
#'
#' @param value Value to retrieve from the config file.
#' @param config GOLEM_CONFIG_ACTIVE value. If unset, R_CONFIG_ACTIVE.
#' If unset, "default".

This file has been truncated. show original

Code that makes the menu cards with the missing images (`mealCard()`)

github.com

peernisse/riverPlanner/blob/main/R/ui_helpers.R


#' Trip card
#' @description The UI card displays saved trip info
#' @param session The Shiny session object
#' @param tripID The Unique saved trip ID
#' @param tripName The saved trip name
#' @param days The max number of days in the saved trip
#' @param noAdults The max number of adults in the saved trip
#' @param noKids The max number of kids in the saved trip
#' @param tripDesc The saved trip description
#' @param upTime The last modified date of the saved trip
#' @noRd
tripCard <- function(session, data, tripID, tripName, days, noAdults, noKids, tripDesc, upTime){
  ns <- session$ns
  LOCAL <- data
  loadButtonID <- paste0('load-tripID-',tripID)
  killButtonID <- paste0('kill-tripID-', tripID)
  copyButtonID <- paste0('copy-tripID-', tripID)

    if(length(LOCAL$tripID) == 0){

This file has been truncated. show original

Please Help

Sorry it is hard to do a reprex because of the database backend and the auth0. If you want to clone my github, I can provide you the remaining necessary files you would need to run this. peernisse@gmail.com
I am looking for any ideas on structuring the app differently, working around the loading mechanism etc.
If auth0 is a pinch point here, I could abandon it and find a different auth method
Any help is greatly appreciated!

peernisse · March 24, 2023, 10:44pm

I figured this out. I had a piece of JS that was altering the site URL 2 seconds after start up. This time was insufficient for larger resources to load. I removed this code and all works fine now.

system · March 31, 2023, 10:44pm

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.

My Set up

Install Tries -- All Same Results: App Works! but UI elements from www/assets not loaded up by Shiny Server

Symptoms

Setup Description and Package structure

Host: Shiny Server

Screenshot Shiny Server chrome dev tools 1

Screenshot Shiny Server chrome dev tools 2

Host: Shinyapps.io

Screenshot shinyapps.io chrome dev tools

What I think is happening

Related Discussions I found

Github

app_ui.R

run_app_auth0

app.R

app_config.R

Code that makes the menu cards with the missing images (mealCard())

Please Help

Code that makes the menu cards with the missing images (`mealCard()`)