What is the best way to add a .js file to an html file being served by a compojure server?

I'm facing a challenge with including a script file in one of my html files. Despite trying various methods, the browser doesn't seem to recognize it.

After reading this solution: How to include css files into compojure project?

I decided to create a public folder within my resource directory. Here is how the structure looks like:

resources
|-public
  |-views
  |   |-myview.html
  |-scripts
     |-my.script.js

The inclusion of the script file in myview.html appears as follows:

<head>
    <script src="/scripts/my.script.js"></script>
</head>    

Upon requesting myview.html from the server, everything loads fine except for the fact that none of the functions in my.script.js are recognized. Strangely enough, when I directly load the html in the browser (adjusting the path to the script file accordingly), it works perfectly fine. This issue persists even when accessing it through the server.

So my question is, how can I make sure that my script files (and later on, css files) can be detected by the html in a standard compojure setup?

Answer №1

It seems that all I was lacking

(route/resources "/")

was including this line in my routing setup. It's funny how such a simple oversight can lead to hours of troubleshooting. Lesson learned: always pay attention to both the question and the answer when debugging code.

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

Guidelines for creating animation for a single point in SVG Polygon

Is there a way to animate the movement of a single polygon point within an SVG using velocity.js? Your assistance is greatly appreciated! <p>Changing...</p> <svg height="250" width="500"> <polygon points="0,0 200,0 200,200 00,20 ...

ajax fails to send the variables, instead sending undefined values

In my HTML code, I have inputs and checkboxes. The JavaScript code collects the data from the inputs, and through AJAX, it should send the information to PHP where it is received and stored in the session. However, when sending the array to the PHP file v ...

In React JS, the page pagination is designed to consistently display the initial element

I've been working on implementing page pagination using Material UI in a React project, but I'm running into an issue where it always redirects back to the first page after 1 second of displaying the correct element. When I console log, I can see ...

How does the AngularJS Dependency Injection system determine the names of the arguments it needs to inject?

Here is an example directly from the official website: function PhoneListCtrl ($scope, $http) { $http.get('phones/phones.json').success(function(data) { $scope.phones = data; }); $scope.orderProp = 'age'; } The $s ...

Unable to encode file data as form-data and submit it through an express endpoint

I have two main goals: first, I am looking to upload an mp3 file using the fetch function. Second, in order to accomplish this task, I believe I need to wrap the file in a form-data object. I have managed to successfully store the mp3 file in my react stat ...

Utilize the clearChart() function within Google charts in conjunction with vue-google-charts

I have integrated vue-google-charts to display various charts on my website. I want to allow users to compare different data sets, by enabling them to add or delete data from the chart. In order to achieve this functionality, I need to find a way to clear ...

Issues with HTML rendering within a JavaScript function in Django

One of my Django templates includes a Javascript function. Here's an example: <a class ="edit" href="{% url notecards.views.edit_notecard notecard.id %}"> Edit </a> <h3 class="notecard"><p id="boldStuff">{{ notecard.notecard_n ...

Why am I unable to alter the variable value within the callback event?

Exploration of Request Handling POST request To /api/endpoint headers: standard body: data=test123 POST response From /api/endpoint headers: standard body: data=test123 expectation(NOT MET): Show the request body content in the console. reality(FRU ...

Next.js Head component will not repeat the same Meta Tags

In my Next.js project, I have implemented different meta tags with various media targets in the Head section: <Head> <meta name="theme-color" media="(prefers-color-scheme: light)" content="#7f8fa6"/> <meta name= ...

The inline $Emit function is not generating the correct random number when using Math.random()

I've been diving into the concept of $emit event in Vue and came across this tutorial: . I tried implementing something similar using Vue2.js, but every time I click the button, it gives me a rounded number instead of a random number like in the guide ...

jquery's cutting-edge feature definitely has to be its ability to round

Hey there! I've been working on some jQuery code for my menu buttons. What I'm trying to achieve is rounded top corners for the menu. Here's the full code snippet: <html> <style type="text/css"> #menuBarHolder { width: 860px ...

What causes the Bullet chart to display decimal numbers despite having a range of 1?

I am currently utilizing the nvd3-bullet-chart from the angularjs-nvd3-directives library to showcase maximum and current data. It functions properly when my minimum number is greater than 2, displaying whole numbers. However, if my maximum number is set t ...

Autocomplete like Google with arrow key functionality

I have developed a basic search engine that retrieves data from a MySQL database using the PHP "LIKE" function (code provided below). Everything is functioning correctly, but I would like to enhance it so that users can navigate search results with arrow k ...

programming / mathematics - incorrect circular item rotation

I need help arranging a sequence of planes in a circular formation, all facing toward the center. However, I seem to be experiencing issues with the rotation after crossing the 180-degree mark. While my objects are correctly positioned around the circle, t ...

"Mobile Safari experiences a delay in executing JavaScript DOM changes during touchmove events, waiting until the scroll

While using mobile safari, I encountered an issue with the touchmove event where changing the className of an element did not result in an immediate visual change. The update only appeared at the end of scrolling or after an inertial scroll. Is there a wa ...

What are the best practices for utilizing separate configuration files for environment variables in order to ensure distinct setups for both development and production environments?

Currently, I am working on a NestJS project and aim to effectively manage environment variables by utilizing distinct configuration files for development and production purposes. Segregating configurations is common practice to prevent the accidental expos ...

Ways to extract a Bearer Token from an Authorization Header using JavaScript (Angular 2/4)

When working with JavaScript, I have successfully implemented a method for authenticating to my server using an http post request. Upon receiving a response from the server, it includes a JWT in an Authorization header like this: Authorization: Bearer my ...

What is the process for generating a JavaScript File open dialog box that can display files stored on a server?

On my website, I want clients to be able to access files stored on the server. I need to implement a file open dialog box that displays files available on the server, similar to this code: <input type="file" id="select_file" onchange="openfunction();"& ...

sending parameters to ajax method

I'm currently working on my first app and I'm having trouble passing values to an ajax function. Could someone please help me out with this? Here is the code snippet: In the HTML, there is a link that needs to pass a value, like "9": <a id= ...

How can I extract an array of objects from an array of arrays containing objects?

Here is the array I am currently working with: let findAllSegmentProjectMediaFilesXref = [ { it: 0, bt: 0, items: [ { mute: false, startPosition: 10, endPosition: 20, ...