Converting basic shiny app to flex dashboard layout

Question

As a learning exercise, I'm trying to convert the basic shiny app example (Old Faithful Geyser distribution) into a flex dashboard layout. Any ideas as to why this isn't displaying the plot? Does it need to reference the functions in the server.R file separately?

Full code below:

---
title: "DistBins"
output: flexdashboard::flex_dashboard
runtime: shiny
---

```{r global, include=FALSE}
# load data in 'global' chunk so it can be shared by all users of the dashboard
library(shiny)
library(datasets)
data("faithful")

shinyServer(function(input, output) {

  output$distPlot <- renderPlot({

    # generate bins based on input$bins from ui.R
    x    <- faithful[, 2] 
    bins <- seq(min(x), max(x), length.out = input$bins + 1)

    # draw the histogram with the specified number of bins
    hist(x, breaks = bins, col = 'darkgray', border = 'white')

  })

})
```

Column {.sidebar}
-----------------------------------------------------------------------

Adjust number of bins within distribution

```{r}
sliderInput("bins",
                   "Number of bins:",
                   min = 1,
                   max = 50,
                   value = 30)

```

Column
-----------------------------------------------------------------------

### Distribution

```{r}
# Define server logic required to draw a histogram
renderPlot({
  plotOutput("distPlot")
})
```

Will continue working on this and report back if I get this working.

Answer 1

You could achieve this by just moving the histogram plotting to a separate section and removing the server code in the first chunk. This wouldn't use the separate ui and server shiny modules in @sandipan's approach.

---
title: "DistBins"
output: flexdashboard::flex_dashboard
runtime: shiny
---

```{r global, include=FALSE}
# load data in 'global' chunk so it can be shared by all users of the dashboard
library(shiny)
library(datasets)
data("faithful")
```

Column {.sidebar}
-----------------------------------------------------------------------

Adjust number of bins within distribution

```{r}
sliderInput("bins",
                   "Number of bins:",
                   min = 1,
                   max = 50,
                   value = 30)

```

Column
-----------------------------------------------------------------------

### Distribution

```{r}
# draw a histogram
renderPlot({

    # generate bins based on input$bins from ui.R
    x    <- faithful[, 2] 
    bins <- seq(min(x), max(x), length.out = input$bins + 1)

    # draw the histogram with the specified number of bins
    hist(x, breaks = bins, col = 'darkgray', border = 'white')

  })
```

Answer 2

The following modification of your code works:

    ---
title: "DistBins"
output: flexdashboard::flex_dashboard
runtime: shiny
---

```{r global, include=FALSE}
# load data in 'global' chunk so it can be shared by all users of the dashboard
library(shiny)
library(datasets)
data("faithful")

server <- function(input, output) {

  output$distPlot <- renderPlot({

    # generate bins based on input$bins from ui.R
    x    <- faithful[, 2] 
    bins <- seq(min(x), max(x), length.out = input$bins + 1)

    # draw the histogram with the specified number of bins
    hist(x, breaks = bins, col = 'darkgray', border = 'white')

  })

}
```

Column {.sidebar}
-----------------------------------------------------------------------

Adjust number of bins within distribution

```{r}
ui = fluidPage(
    sliderInput("bins",
                   "Number of bins:",
                   min = 1,
                   max = 50,
                   value = 30),
    # Define server logic required to draw a histogram
    plotOutput("distPlot")
  )
```

Column
-----------------------------------------------------------------------

### Distribution

```{r}
# run shiny app
shinyApp(ui = ui, server = server)
```