shiny.router – a simple routing package for Shiny Dashboards

Update 22nd of October, 2018. We have updated shiny.router package and realeased it on R Cran and GitHub. Full post on shiny.router update with plenty of examples.

The time has come to release the first of our internal tools we use on a regular basis when developing Shiny apps for our customers.

In just a few lines of code added to your project, you get a helpful routing mechanism that allows recreating a particular state of your app.

make_router(
  route("<your_app_url>/main",  main_page_shiny_ui),
  route("<your_app_url>/other", other_page_shiny_ui)
)

If you’re in a hurry just go directly to the project’s page:
https://appsilon.github.io/shiny.router/

Benefits of routing

Routing has been around in web frameworks for a while. Since this was something we were missing in Shiny so much we developed this package to simplify our development.

Firstly, it’s possible to share a link like http://your-app-url/stats/dashboard and redirect a user to the specific state in-app.
For instance, in our shiny.router demo, you can directly go to another page.

Secondly, it’s easier to write clean code by separating UI into meaningful code blocks.

How do you integrate it?

First, make sure you have shiny.router dependency installed. This package is not yet available on CRAN, so you have to install it with devtools:

# install.packages("devtools")
devtools::install_github("Appsilon/shiny.router")

Second, you have to define a routing.

# Creates router. We provide routing path and UI for this page.
router <- make_router(
  route("/", root_page),
  route("/other", other_page)
)

This will create 2 reactive links:

1. http://your-app-url redirecting to the Root page and
2. http://your-app-url/other redirecting to Other pages in your app.

The first passed argument is also a default redirection for all invalid links(“/” in this case). You can also specify it explicitly via the “default” argument.

# Creates router. We provide routing path and UI for this page.
router <- make_router(
  default = route("/home", home_page),
  route("/", root_page),
  route("/other", other_page)
)

Next, make sure you bind and run your “router” object properly in your Shiny app source code.

# Creat output for our router in main UI of Shiny app.
ui <- shinyUI(fluidPage(
  
  # This line is important! 
  router_ui()
))

# Plug router into Shiny server.
server <- shinyServer(function(input, output) {
  
  # This line is important! 
  router(input, output)
})

Now it’s time for a live demo. Try clicking “Page” and “Other” menu links:

Here’s the complete code, if you want to try it out by yourself:

library(shiny)
#devtools::install_github("Appsilon/shiny.router")
library(shiny.router)

# This generates menu in user interface with links.
menu <- (
  tags$ul(
    tags$li(a(class = "item", href = "/", "Page")),
    tags$li(a(class = "item", href = "/other", "Other"))
  )
)

# This creates UI for each page.
page <- function(title, content) {
  div(
    menu,
    titlePanel(title),
    p(content)
  )
}

# Both sample pages.
root_page <- page("Home page", "Welcome on sample routing page!")
other_page <- page("Some other page", "Lorem ipsum dolor sit amet")

# Creates router. We provide routing path and UI for this page.
router <- make_router(
  route("/", root_page),
  route("/other", other_page)
)

# Creat output for our router in main UI of Shiny app.
ui <- shinyUI(fluidPage(
  router_ui()
))

# Plug router into Shiny server.
server <- shinyServer(function(input, output) {
  router(input, output)
})

# Run server in a standard way.
shinyApp(ui, server)

Next steps

You might be wondering how we managed to make this nice-looking demo. This is a small preview of our next package using SemanticUI. You can find it on our Github.

Side Note! You will have to install it to run a second repo example.

Please stay tuned for our next blog post.