RShiny encountering issues while trying to load external HTML file along with CSS file

I've been working on a Shiny app, where I put together the UI code using HTML, CSS, and JavaScript within the www sub-folder, while keeping the app.R file in the main folder.

The code in my app is structured as follows:

runApp(
shinyApp(
    ui = shinyUI(
        htmlTemplate("www/index.html")  
    ),  
    server = shinyServer(function(input, output) {
    })
))

However, I've encountered an issue where the app is adding CSS and JavaScript files when I try to run it.

I would appreciate any assistance in resolving this problem. Thank you.

javascripthtmlcssrshiny

Answer №1

I have created my own unique template.html

<!DOCTYPE html>
<html>
  <head>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    {{ headContent() }}
  </head>
  <body>
    <!-- Custom JavaScript code using D3 goes here -->

    {{ d3heatmap::d3heatmap(mtcars, scale="column", colors="Blues") }}
  </body>
</html>

and the corresponding app.R file

shinyApp(
    ui = shinyUI(
        htmlTemplate("template.html")  
    ),  
    server = shinyServer(function(input, output) {
    })
)

The template.html should be placed inside the app folder along with the app.R file!

Hopefully this information is useful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

tips on locating the next immediate downloadable cell in a table

My table includes cells with colspan and rowspan attributes. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <table border=1 id="mytable" > <tr><td>A1</td> <td> A2 < ...

javascriptjqueryhtmldomhtml-table

Delivering HTML Email

I want to send an HTML email with images using Google's SMTP servers. Here is the HTML code with inline CSS that I have generated: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type& ...

htmlscalaemailmime

What is the best way to play a random song when the user clicks a button?

My goal is to develop a website where users can click on an image and have a random song play from a playlist. I currently have a functioning code that activates one song, but it fails when adding multiple songs to the mix. <html> <head> ...

javascriptjqueryhtmlrandomaudio-player

Position the <i> element to the right side of the <div> element in an HTML document

I am trying to make this <i> element align to the right within my <div>. Here is the HTML code I have so far: <div class="container-fluid p-1 bg-primary text-white d-flex align-items-center justify-content-center"> <h2&g ...

htmlbootstrap-5

When interacting with the iframe in an Ionic3 app, it suddenly crashes

Greetings! I have integrated a flipping book URL inside an iframe: <ng-container> <iframe [src]="eUrl" id="flipping_book_iframe" frameborder="0" allowfullscreen="allowfullsc ...

javascriptangulartypescriptiframeionic3

Trouble with refreshing button after resolving routes in Angular UI Router

My Angular UI router is giving me trouble. When I navigate to the state below, everything works smoothly. However, if I refresh the page, the resolve function retrieves the data, injects it into the controller, but the view does not load. Essentially, th ...

javascriptangularjsangular-ui

Creating a PHP-enabled HTML button that spans multiple lines

Currently, I am working on creating a list of buttons with h5 text. The issue I'm facing is that all the buttons have the same width, but when the text exceeds this width, the button expands. I would like the text to span multiple lines without affect ...

phphtmlcss

Guide to using a Selector in a mixin in VUE

I'm attempting to create a Mixin that will help me calculate the offsetWidth of an element. Here is my Mixin: export const boxWidth = (selector) => ({ mounted() { selector.addEventListener( 'resize', this.setBoxWidth ); ...

javascriptvue.jsmixins

Determine the amount of time that can be allocated based on the attributes contained within the object

I am faced with a JSON structure like the one below: var meetings = [ { id: '1', start_time: "2020-11-15T08:30:00+00:00", end_time: "2020-11-15T14:15:00+00:00" }, { id: '2', start_time: &quo ...

javascriptangulartypescript

Generate a sparse array using only a single line of code

Is it possible for JavaScript to create a sparse array similar to what Bash can do in one line? names=([0]="Bob" [1]="Peter" [20]="$USER" [21]="Big Bad John") § Creating Arrays Can JavaScript achieve the same with sparse arrays? ...

javascriptarrayssparse-array

What is the best way to create a dynamic hyperlink that leads to a detailed information page based on the specific link clicked?

I'm currently working on a web page that displays a list of users, and I want each user's name to be clickable, leading to a page with specific details about that user. I'm new to this field, so I'm unsure where to start. My idea is to ...

javascripthtmlnode.jsmongodbexpress

Exploring fixed format document with dual width structures

Looking to import data from a large fixed-width file into R? The file contains two types of rows: those starting with "A" have variables defined by one set of widths, while those beginning with "B" have variables defined by another set of widths. Here&apos ...

rreadr

I wonder what the response would be to this particular inquiry

I recently had an angular interview and encountered this question. The interviewer inquired about the meaning of the following code snippet in Angular: code; <app-main [type]="text"></app-main> ...

javascriptangulartypescriptsingle-page-applicationangular8

What causes the discrepancy in the output of `document.documentElement.childNodes` in JavaScript?

While working on my code exercise today, I came across a special case regarding the "document.documentElement.childNodes" property. Originally, I believed it to represent all child nodes within a tag as before. However, when implementing my code, I noticed ...

javascriptdomdocument

Center and align pictures within a stationary container

I am working on a simple webpage that has a fixed footer. In this footer, I want to have 5 images centered with equal distances between them. Below is my HTML/CSS : Footer div : div.fixed { position: fixed; bottom: 0; right: 0; width: ...

htmlcss

The function val() will not extract the present input value

Can't seem to retrieve the updated value of an input field in my ajax log-in form. Here's the code snippet: <form method="post" id="contactform"> <label for="name">Username</label> <input type="text" id="un" placeho ...

jqueryhtml

Creating a sticky popup feature for your Chrome extension

Just starting out with chrome extensions and looking to create one that appends an external class to a selected tag. For example, let's say we have the following tag: <h1>extension</h1> When the user clicks on this element, I want to ad ...

javascriptjqueryhtmlcssgoogle-chrome-extension

You need to pass a function as the first parameter when using passport-local-mongoose as a schema plugin

I've been struggling with implementing passport-local-mongoose in my server. I followed a tutorial video but encountered an issue that wasn't addressed in the video - even though my database is connected to mongodbatlas. The error message "First ...

javascriptnode.jsexpressmongoosepassport-local

Send in 3 sets of HTML forms along with a single JavaScript button to save all data in a single row within

I'm facing an issue with submitting multiple forms on a page without submit buttons. I have a script that submits all three forms at the same time, but it's creating separate rows in the database instead of one combined row. Any suggestions on ho ...

htmlforms

What is the best way to split a Bootstrap row into five equal-sized columns?

Trying to divide a Bootstrap row into five columns can be tricky when you only have 12 units available on the device. How can this division be achieved successfully? ...

htmlcssbootstrap-4