shiny app not running on shinyapps.io: Related to fonts?

Question

I developed a shiny app and it is running well in the browser of my device. However, when I upload the app on shinyapps.io, I get the error "disconnected from server". From shinyapps.io I get this app log:

2021-04-27T04:11:08.075959+00:00 shinyapps[4036798]: Running on host: 8c947af8f6fc
2021-04-27T04:11:08.084768+00:00 shinyapps[4036798]: Server version: 1.8.6.1
2021-04-27T04:11:08.084799+00:00 shinyapps[4036798]: LANG: de_DE.UTF-8
2021-04-27T04:11:08.084811+00:00 shinyapps[4036798]: shiny version: 1.6.0
2021-04-27T04:11:08.084811+00:00 shinyapps[4036798]: R version: 4.0.2
2021-04-27T04:11:08.084845+00:00 shinyapps[4036798]: rmarkdown version: (none)
2021-04-27T04:11:08.084822+00:00 shinyapps[4036798]: httpuv version: 1.5.4
2021-04-27T04:11:08.084857+00:00 shinyapps[4036798]: jsonlite version: 1.7.1
2021-04-27T04:11:08.084857+00:00 shinyapps[4036798]: knitr version: 1.30
2021-04-27T04:11:08.084870+00:00 shinyapps[4036798]: RJSONIO version: (none)
2021-04-27T04:11:08.297255+00:00 shinyapps[4036798]: Using jsonlite for JSON processing
2021-04-27T04:11:08.301048+00:00 shinyapps[4036798]: 
2021-04-27T04:11:08.301050+00:00 shinyapps[4036798]: Starting R with process ID: '73'
2021-04-27T04:11:08.084879+00:00 shinyapps[4036798]: htmltools version: 0.5.1.1
2021-04-27T04:11:08.085019+00:00 shinyapps[4036798]: Using pandoc: /opt/connect/ext/pandoc/2.11
2021-04-27T04:11:08.330665+00:00 shinyapps[4036798]: 
2021-04-27T04:11:08.330667+00:00 shinyapps[4036798]: Listening on http://127.0.0.1:39137
2021-04-27T04:11:08.426988+00:00 shinyapps[4036798]: Attache Paket: ‘shinydashboard’
2021-04-27T04:11:08.426986+00:00 shinyapps[4036798]: 
2021-04-27T04:11:08.426988+00:00 shinyapps[4036798]: 
2021-04-27T04:11:08.427714+00:00 shinyapps[4036798]: The following object is masked from ‘package:graphics’:
2021-04-27T04:11:08.427715+00:00 shinyapps[4036798]: 
2021-04-27T04:11:08.427715+00:00 shinyapps[4036798]:     box
2021-04-27T04:11:08.427716+00:00 shinyapps[4036798]: 
2021-04-27T04:11:08.443079+00:00 shinyapps[4036798]: 
2021-04-27T04:11:08.442706+00:00 shinyapps[4036798]: 
2021-04-27T04:11:08.442707+00:00 shinyapps[4036798]: Attache Paket: ‘DT’
2021-04-27T04:11:08.442707+00:00 shinyapps[4036798]: 
2021-04-27T04:11:08.443079+00:00 shinyapps[4036798]: The following objects are masked from ‘package:shiny’:
2021-04-27T04:11:08.443080+00:00 shinyapps[4036798]:     dataTableOutput, renderDataTable
2021-04-27T04:11:08.443080+00:00 shinyapps[4036798]:

So, I don't see anything helpful inside, but within the browser-log I get:

GEThttps://user.shinyapps.io/webapp_example/_w_77b8af3e/AdminLTE-2.0.6/fonts/Source_Sans_Pro_700.ttf
[HTTP/2 404 Not Found 1446ms]

downloadable font: download failed (font-family: "Source Sans Pro" style:normal weight:700 stretch:100 src index:2): status=2147746065 source: https://user.shinyapps.io/webapp_example/_w_77b8af3e/AdminLTE-2.0.6/fonts/Source_Sans_Pro_700.ttf

In the ui of the app I'm using html tags and icons. Here is the beginning of the ui:

ui <-  dashboardPage(
  dashboardHeader(title = "Example"
  ),
  
  dashboardSidebar(sidebarMenu(id = "menu1",
                               sidebarMenuOutput("menu"))
  ),
  dashboardBody(
    tabItems(
      tabItem(tabName="title",
              fluidRow(
                box(
                  tags$br(),
                  tags$dt(list(icon("pen"), "Project Title")),
                  tags$ol(
                    tags$br(),
                    tags$li(
                      list(
                        "Give your project a title under ",
                        icon("pen"), tags$b("Project Title")),
                        " in the ",
                        icon("bars"),
                        tags$b(" Menu"),
                        " on the left-hand side"
                    ),
                    tags$br(),
                    tags$li(
                      list(
                        "Continue with",
                        icon("database"),
                        tags$b("Data Preparation")
                      )
                    )
                  ),
                  width = 12,
                  collapsible = TRUE,
                  title = list(icon("info-circle"), "INSTRUCTIONS"),
                  status = "primary",
                  solidHeader = TRUE,
                )
              )
      ),
...............

Do you have an idea how to solve this "disconnected from server" error? Is this because I'm using fonts/icons that are working on my local windows machine but not on the shinyapps.io server because it is running on linux?

Please let me know whether you need more code of the app. Just tried to keep it minimal...

Thanks, Jan

Andrew McCartney Andrew McCartney · Accepted Answer · 2021-04-28T15:57:22

I haven't tried this in a few years but I think this should work.

(1) Create a folder in your directory called "www". Upload that folder with your rsconnect when you upload your app to shinyapps.io. INSIDE that folder, include the .ttf file of your font.

(2) in your shiny app, but outside the ui / server calls, include library(extrafont); loadfonts() in your app as well.

(3) Include this in your code outside of your ui/server as well.

dir.create('~/.fonts') 
file.copy("www/xkcd.ttf", "~/.fonts")  
system('fc-cache -f ~/.fonts')

this is from my old example, where I was using the font: xkcd.ttf. You'll replace xkcd with your font name.

Let me know if this doesn't work.

shiny app not running on shinyapps.io: Related to fonts?

1 Answers