Why I cannot get my shiny app when adding golem framework?
I am managing nevertheless to get my shiny elements without any golem framework:
Here is the shiny without golem:
library(shiny)
# Define the logo URL
ui <- fluidPage(
tags$head(
tags$style(HTML("
body {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height: 100vh;
margin: 5px 0;
background-color: navy; /* Set background color for the body */
position: relative; /* Add position relative for the logo */
}
.input-container {
width: 100%;
text-align: center;
background-color: navy; /* Set background color for the input container */
padding: 20px; /* Add padding for better visibility */
width: 600px; /* Adjust the width of the input container */
}
.input-container input[type='text'],
.input-container input[type='number'],
.input-container .btn {
width: 100%;
padding: 15px;
margin: 15px 0; /*increased from 5 to 15 for more space between inputs */
box-sizing: border-box;
font-size: 18px;
text-align: center;
color: navy; /* Text color navy */
margin-bottom: 50px; /* larger space to next element */
}
.input-container .btn {
margin-top: 20px;
color: white;
}
/* Style for Your Details text */
.details-container {
text-align: center;
width: 600px; /*larger inputs as desired */
width: 100%;
}
.details-text {
color: white;
font-size: 24px;
margin-bottom: 15px;
text-align: center;
display: inline-block;
}
,form-group {
margin-bottom: 50px; /* larger space to next element */
}
.shiny-input-container:not(.shiny-input-container-inline) {
width: 600px; /*larger inputs as desired */
max-width: 100%;
}
#nextButton, #nextButtonPage3 {
width: 300px; /* shorter than the other buttons */
background-color: green; /* like in the screenshot */
margin-top: 60px; /* larger space to above */
}
#notSureButton {
width: 295px; /* shorter than the other buttons */
margin-top: 60px; /* larger space to above */
}
#startButton {
width: 300px; /* width of the start button, separately defined */
}
div#corner-triangle {
display: block;
width: 100px;
height: 100px;
border-style: solid;
border-width: 200px 200px 0 0;
border-color: #ffffff transparent transparent transparent;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
color: white;
text-shadow: 0 0 25px 9px #fff;
}
.logo {
position: absolute;
bottom: 1px;
left: 50%;
transform: translateX(-50%);
width: 300px; /* Adjust the width of the logo */
height: auto; /* Maintain aspect ratio */
}
"))
),
titlePanel(" "),
uiOutput("page")
)
server <- function(input, output, session){
output$page <- renderUI({
if (is.null(input$currentPage)) {
tagList(
div(class = "input-container",
actionButton("startButton", "Start", style = "font-size: 35px; color: navy;") # style = "font-size: 24px;"
),
tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
)
} else if (input$currentPage == "page2") {
tagList(
div(class = "input-container",
tags$p(class = "details-text", "Your Details:"),
textInput("name", label = NULL, placeholder = "Name", style = "background-color: lightblue; color: navy;"),
textInput("nationality", label = NULL, placeholder = "Nationality", style = "background-color: lightyellow; color: navy;"),
textInput("age", label = NULL, value = "", placeholder = "Age", style = "background-color: lightgreen; color: navy;"),
textInput("email", label = NULL, placeholder = "Email", style = "background-color: lightgray; color: navy;"),
actionButton("nextButton", "Next", style = "font-size: 30px; color: navy;") # style = "font-size: 24px;"
),
div(id = "corner-triangle",
actionButton(label="Back", inputId = "bck1",
style = "top: -150px;
left: 25px;
font-size: 25px;
position: relative;
transform: rotate(-45deg);
color: navy;
border: none;
background-color: transparent;
font-weight: bold;
padding: 2em;
margin: -2em;
outline: none;")),
tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px")
)
} else if (input$currentPage == "page3") {
tagList(
div(class = "input-container",
tags$p(class = "details-text", "Teaching level:"),
actionButton("basicButton", "Basic"),
actionButton("intermediateButton", "Intermediate"),
actionButton("intermediatePlusButton", "Intermediate +"),
actionButton("notSureButton", "Not sure"),
actionButton("nextButtonPage3", "Next", style = "font-size: 30px; color: navy;") # style = "font-size: 24px;"
),
div(id = "corner-triangle",
actionButton(label="Back", inputId = "bck2",
style = "top: -150px;
left: 25px;
font-size: 25px;
position: relative;
transform: rotate(-45deg);
color: navy;
border: none;
background-color: transparent;
font-weight: bold;
padding: 2em;
margin: -2em;
outline: none;")),
tags$img(src ="www/free_english_logo.png", class = "logo", width = "400px")
)
}
})
observeEvent(input$startButton, {
output$page <- renderUI({
tagList(
div(class = "input-container",
tags$p(class = "details-text", "Your Details:"),
textInput("name", label = NULL, placeholder = "Name"),
textInput("nationality", label = NULL, placeholder = "Nationality"),
textInput("age", label = NULL, value = "", placeholder = "Age"),
textInput("email", label = NULL, placeholder = "Email"),
actionButton("nextButton", "Next", style = "font-size: 30px; color: navy;")
),
div(id = "corner-triangle",
actionButton(label="Back", inputId = "bck2",
style = "top: -150px;
left: 25px;
font-size: 25px;
position: relative;
transform: rotate(-45deg);
color: navy;
border: none;
background-color: transparent;
font-weight: bold;
padding: 2em;
margin: -2em;
outline: none;")),
tags$img(src = "www/free_english_logo.png", width = "400px")
)
})
})
observeEvent(input$nextButton, {
name <- input$name
nationality <- input$nationality
age <- input$age
email <- input$email
output$page <- renderUI({
tagList(
div(class = "input-container",
tags$p(class = "details-text", "Teaching level:"),
actionButton("basicButton", "Basic", style = "background-color: lightblue; color: navy;"),
actionButton("intermediateButton", "Intermediate", style = "background-color: lightyellow; color: navy;"),
actionButton("intermediatePlusButton", "Intermediate +", style = "background-color: lightgreen; color: navy;"),
actionButton("notSureButton", "Not sure", style = "background-color: lightgray; color: navy;"),
actionButton("nextButtonPage3", "Next", style = "font-size: 30px; color: navy;") #
),
div(id = "corner-triangle",
actionButton(label="Back", inputId = "bck2",
style = "top: -150px;
left: 25px;
font-size: 25px;
position: relative;
transform: rotate(-45deg);
color: navy;
border: none;
background-color: transparent;
font-weight: bold;
padding: 2em;
margin: -2em;
outline: none;")),
tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px")
)
})
})
observeEvent(input$bck1, {
output$page <- renderUI({
tagList(
div(
class = "input-container",
actionButton("startButton", "Start", style = "font-size: 35px; color: navy;")
),
tags$img(
src = "www/free_english_logo.png",
class = "logo",
width = "400px"
) # Adjust the width of the logo
)
})
})
observeEvent(input$bck2, {
output$page <- renderUI({
tagList(
div(class = "input-container",
tags$p(class = "details-text", "Your Details:"),
textInput("name", label = NULL, placeholder = "Name"),
textInput("nationality", label = NULL, placeholder = "Nationality"),
textInput("age", label = NULL, value = "", placeholder = "Age"),
textInput("email", label = NULL, placeholder = "Email"),
actionButton("nextButton", "Next", style = "font-size: 24px; color: navy;")
),
div(id = "corner-triangle",
actionButton(label="Back", inputId = "bck1",
style = "top: -150px;
left: 25px;
font-size: 25px;
position: relative;
transform: rotate(-45deg);
color: navy;
border: none;
background-color: transparent;
font-weight: bold;
padding: 2em;
margin: -2em;
outline: none;")),
tags$img(src = "app/www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
)
})
})
}
shinyApp(ui,server)
the above code works if you run it independently of golem.
Now, if I am adding ui and server with the golem framework does not work.
This is what I am doing:
#' mod_first_page_ui UI Function
#'
#' @description A shiny Module.
#'
#' @param id,input,output,session Internal parameters for {shiny}.
#'
#' @noRd
#'
#' @importFrom shiny NS tagList
mod_first_page_ui <- function(id){
ns <- NS(id)
tagList(
fluidPage(tags$head(
tags$link(rel = "stylesheet", type = "text/css", href = "fec/inst/app/www/styles.css")
),
titlePanel(" "),
uiOutput("page"))
)
}
#' mod_first_page_server Server Functions
#'
#' @noRd
mod_first_page_server <- function(id_fec){
moduleServer(id_fec, function(input, output, session){
output$page <- renderUI({
if (is.null(input$currentPage)) {
tagList(
div(class = "input-container",
actionButton(ns("startButton"), "Start", style = "font-size: 35px; color: navy;") # style = "font-size: 24px;"
),
tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
)
} else if (input$currentPage == "page2") {
tagList(
div(class = "input-container",
tags$p(class = "details-text", "Your Details:"),
textInput("name", label = NULL, placeholder = "Name", style = "background-color: lightblue; color: navy;"),
textInput("nationality", label = NULL, placeholder = "Nationality", style = "background-color: lightyellow; color: navy;"),
textInput("age", label = NULL, value = "", placeholder = "Age", style = "background-color: lightgreen; color: navy;"),
textInput("email", label = NULL, placeholder = "Email", style = "background-color: lightgray; color: navy;"),
actionButton("nextButton", "Next", style = "font-size: 30px; color: navy;") # style = "font-size: 24px;"
),
div(id = "corner-triangle",
actionButton(label="Back", inputId = "bck1",
style = "top: -150px;
left: 25px;
font-size: 25px;
position: relative;
transform: rotate(-45deg);
color: navy;
border: none;
background-color: transparent;
font-weight: bold;
padding: 2em;
margin: -2em;
outline: none;")),
tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px")
)
} else if (input$currentPage == "page3") {
tagList(
div(class = "input-container",
tags$p(class = "details-text", "Teaching level:"),
actionButton("basicButton", "Basic"),
actionButton("intermediateButton", "Intermediate"),
actionButton("intermediatePlusButton", "Intermediate +"),
actionButton("notSureButton", "Not sure"),
actionButton("nextButtonPage3", "Next", style = "font-size: 30px; color: navy;") # style = "font-size: 24px;"
),
div(id = "corner-triangle",
actionButton(label="Back", inputId = "bck2",
style = "top: -150px;
left: 25px;
font-size: 25px;
position: relative;
transform: rotate(-45deg);
color: navy;
border: none;
background-color: transparent;
font-weight: bold;
padding: 2em;
margin: -2em;
outline: none;")),
tags$img(src ="www/free_english_logo.png", class = "logo", width = "400px")
)
}
})
observeEvent(input$startButton, {
output$page <- renderUI({
tagList(
div(class = "input-container",
tags$p(class = "details-text", "Your Details:"),
textInput("name", label = NULL, placeholder = "Name"),
textInput("nationality", label = NULL, placeholder = "Nationality"),
textInput("age", label = NULL, value = "", placeholder = "Age"),
textInput("email", label = NULL, placeholder = "Email"),
actionButton("nextButton", "Next", style = "font-size: 30px; color: navy;")
),
div(id = "corner-triangle",
actionButton(label="Back", inputId = "bck2",
style = "top: -150px;
left: 25px;
font-size: 25px;
position: relative;
transform: rotate(-45deg);
color: navy;
border: none;
background-color: transparent;
font-weight: bold;
padding: 2em;
margin: -2em;
outline: none;")),
tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px")
)
})
})
observeEvent(input$nextButton, {
name <- input$name
nationality <- input$nationality
age <- input$age
email <- input$email
output$page <- renderUI({
tagList(
div(class = "input-container",
tags$p(class = "details-text", "Teaching level:"),
actionButton("basicButton", "Basic", style = "background-color: lightblue; color: navy;"),
actionButton("intermediateButton", "Intermediate", style = "background-color: lightyellow; color: navy;"),
actionButton("intermediatePlusButton", "Intermediate +", style = "background-color: lightgreen; color: navy;"),
actionButton("notSureButton", "Not sure", style = "background-color: lightgray; color: navy;"),
actionButton("nextButtonPage3", "Next", style = "font-size: 30px; color: navy;") #
),
div(id = "corner-triangle",
actionButton(label="Back", inputId = "bck2",
style = "top: -150px;
left: 25px;
font-size: 25px;
position: relative;
transform: rotate(-45deg);
color: navy;
border: none;
background-color: transparent;
font-weight: bold;
padding: 2em;
margin: -2em;
outline: none;")),
tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px")
)
})
})
observeEvent(input$bck1, {
output$page <- renderUI({
tagList(
div(
class = "input-container",
actionButton("startButton", "Start", style = "font-size: 35px; color: navy;")
),
tags$img(
src = "www/free_english_logo.png",
class = "logo",
width = "400px"
) # Adjust the width of the logo
)
})
})
observeEvent(input$bck2, {
output$page <- renderUI({
tagList(
div(class = "input-container",
tags$p(class = "details-text", "Your Details:"),
textInput("name", label = NULL, placeholder = "Name"),
textInput("nationality", label = NULL, placeholder = "Nationality"),
textInput("age", label = NULL, value = "", placeholder = "Age"),
textInput("email", label = NULL, placeholder = "Email"),
actionButton("nextButton", "Next", style = "font-size: 24px; color: navy;")
),
div(id = "corner-triangle",
actionButton(label="Back", inputId = "bck1",
style = "top: -150px;
left: 25px;
font-size: 25px;
position: relative;
transform: rotate(-45deg);
color: navy;
border: none;
background-color: transparent;
font-weight: bold;
padding: 2em;
margin: -2em;
outline: none;")),
tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
)
})
})
})
}
this is how my app_server file looks like:
#' The application server-side
#'
#' @param input,output,session Internal parameters for {shiny}.
#' DO NOT REMOVE.
#' @import shiny
#' @noRd
app_server <- function(input, output, session) {
# Load the modules
# callModule(mod_first_page_server_1, "id_fec")
mod_first_page_server("mod_first_page")
}
And this is how my app_ui looks like:
#' The application User-Interface
#'
#' @param request Internal parameter for `{shiny}`.
#' DO NOT REMOVE.
#' @import shiny
#' @noRd
app_ui <- function(request) {
tagList(
golem_add_external_resources(),
mod_first_page_ui("mod_first_page_1")
)
}
#' Add external Resources to the Application
#'
#' This function is internally used to add external
#' resources inside the Shiny application.
#'
#' @import shiny
#' @importFrom golem add_resource_path activate_js favicon bundle_resources
#' @noRd
golem_add_external_resources <- function() {
add_resource_path(
"www",
app_sys("app/www")
)
tags$head(
favicon(),
bundle_resources(
path = app_sys("app/www"),
app_title = "fec"
)
# Add here other external resources
# for example, you can add shinyalert::useShinyalert()
)
}
And GitHub link for this project is here: