shiny.router – a simple routing package for Shiny

The time has come to release the first of our internal tools, which 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 to recreate 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 demo you can directly go to other page with <span http://demo.appsilondatascience.com/shiny.router/#!/other.

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

How to 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")

First 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 Root page and
2. http://your-app-url/other redirecting to Other page in your app. First passed argument is also a default redirection for all invalid links(“/” in this case). You can also specify it explicitly via “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 both “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

Now, you might be wondering, how we’ve managed to make this nice looking demo. This is a small preview of our next package using SemanticUI. You may find it already on our Github, but there is hardly any documentation at the moment.
Side Note! You will have to install it to run a second repo example.

Please stay tuned for our next blog post.