What is the best way to load CSS and JS files in a Spring Boot WebFlux

I am currently exploring a spring boot webflux project.

Successfully rendered static HTML using Thymeleaf.

Added a login page with CSS and JS, but encountered issues with rendering them in the HTML. The browser tools showed 404 errors for CSS and JS files. Below are the relevant codes:

--webConfig.java [src/main/java/com/author/projectname/configuration]--
@EnableWebFlux
@Configuration
public class WebConfig implements ApplicationContextAware, WebFluxConfigurer {
    
    ApplicationContext context;

    @Override
    public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
        this.context = context;
    }
    
    @Bean
    public ITemplateResolver thymeleafTemplateResolver() {
        // Resolver configuration
    }
    
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // Resource handler configuration for CSS and JS
    }
    
    @Bean
    public SpringWebFluxTemplateEngine thymeleafTemplateEngine() {
        // Template engine configuration
    }
    
    @Bean
    public ThymeleafReactiveViewResolver thymeleafReactiveViewResolver() {
        // View resolver configuration
    }
    
    @Override
    public void configureViewResolvers(ViewResolverRegistry registry) {
        // View resolver registration
    }
}
--login.html [src/main/resources/templates]--
<!DOCTYPE html>
<html xmlns="http://www.thymeleaf.org">
    <!-- Login page HTML content -->
</html>
--login.css [src/main/resources/css]--
/* CSS styles for the login page */
body {
    background-color: #181828;
}

/* Other CSS styles */

--login.js [src/main/resources/js]--
// JavaScript code for the login page

$('#nmberone').click(function() {
    // Click event handling logic
});

// Other JavaScript functions

Despite trying different solutions found online, the issue related to Thymeleaf settings persists. What could be causing this problem?

Answer №1

Figured out the solution for this issue! Here's how I tackled it:

  1. First, insert the code snippet below into Router(@controller).
@Bean
    RouterFunction<ServerResponse> staticResourceRouter()
    {
        return RouterFunctions.resources("/**", new ClassPathResource("static/"));
    }
  1. Verify the outcome and consider the task as done!

This was a basic question that caught me off guard, but I acknowledge that I should have gathered more information. Moving forward, I'll put in extra effort to deepen my understanding. Many thanks!

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

Exploring the intersection of points within an aframe

When working with a point in 3D space, it can be difficult to interact with it using a cursor or mouse. However, in three.js, there is an example (https://threejs.org/examples/webgl_interactive_points.html) where the mouse can easily interact with points ...

Avoiding white spaces in regular expressions in JavaScript

Below is my JavaScript code used to eliminate spaces in specific words (ستاک ئەڤەفلۆو) within a given text. When testing this code in Console.log, I encountered an issue. var text = "ئایا ستاک ئەڤەفلۆو مانای چییە؟ ...

Exploring the hidden contents within the zip file

I have been exploring methods for reading 'zip' files. Two libraries that I have used are zip.js and JSzip. I have successfully viewed the contents of the zip file. However, here lies the challenge: My goal is to identify specific file types ...

A status code of 200 indicates a successful login, which then leads to a 401 status code upon making a

Just recently, I successfully deployed a rails backend and a vue frontend to Heroku. Everything was working fine until today when I encountered a problem while trying to log in to the web app. Immediately after logging in, I started receiving 401 responses ...

Error: The variable "email" is not defined

Hey there, I could really use some assistance as a struggling developer. I've been at it all day trying to resolve this issue with no luck. It should be a simple task of posting from my AddUsers class and storing it in my SQL database. The state upda ...

Using Regular Expressions to extract EVERY string located between two specified strings

RegEx is both a fascinating and frustrating tool for me. I admire its power, yet there are many nuances that still elude me. I have a JSON feed with extensive data that I need to sift through to capture all instances between two specific strings. Check ou ...

Issue with Jquery Forms Plugin jqXHR response in Internet Explorer versions 8 and 9

I encountered a peculiar problem that only seems to occur in IE8 and 9, despite testing on Safari, Chrome (on Mac), Firefox (on PC), as well as IE versions 10 and above. Below is the code snippet causing trouble: $('#fileStore_newUpload').ajaxF ...

Performing multiple lookups on the same MongoDB collection

In my child collection, there are 3 fields linked to the same master collection. When merging them into the root element, the third one overwrites the first two, which is expected since all three lookups refer to the same collection. However, I want to avo ...

Building a table with the appendChild() method

I'm a beginner in the world of programming and I've been given a task to create a table of objects. I managed to do it using a certain method, but now I'd like to try creating it using the appendChild method. function addObject() { var ...

JavaScript: Obtaining the month based on the week number and year

Can someone assist me in determining the month based on a given week number and year? For example: Week - 48 Year - 2023 Desired Output - 11 ...

Utilizing Axios for Submitting Form Data: A Step-by-Step Guide

Currently, I am in the process of developing a project that consists of a springboot backend and Vue frontend. At this point, I have successfully managed to retrieve a list of products from my database using GET requests. While I can display this list on a ...

The proper way of aligning text in the middle of a button

I'm currently working on designing a CSS button that will be placed in the top left corner and serve as a back button to the previous page. However, I am facing challenges when it comes to centering the arrow or text perfectly in the middle of the but ...

Retrieving information from a form that is generated dynamically

I successfully created a modal form dynamically/programmatically using bootstrap classes. However, I am facing an issue where I cannot access the data from the input boxes as there is no console.log() output. It seems like the form is not present in the DO ...

The previous Http Get request is canceled by a new Http Get request

Currently, I am diving into the world of Ajax, JavaScript, and HTML while working on an application that triggers two consecutive "get" requests upon the user clicking a button. To simulate a coffee order being brewed, I use TimeUnit.SECONDS.sleep(10) in m ...

Finding the automatically generated ID of a new document in a subcollection in Firebase Firestore Web V9, using Javascript/React

When a user clicks, I generate a new document in a subcollection associated with that user's profile. Below is the function responsible for this: // Function to create a new checkout session document in the subcollection under the user's profile ...

Tips for transferring an array of images to a controller via ajax

Purpose: To convert the image array items into an input list and send them to the controller. Below is the JavaScript code that selects and modifies images: const output = document.querySelector("output"); const input = document.getEleme ...

Issue with source file detection in RequireJS and Karma

Having trouble testing my Angular scripts with Karma and RequireJS, as I keep encountering this error: Error in Firefox 28.0.0 (Mac OS X 10.9): 'There is no timestamp for /base/app/public/js/test/unit/controllersSpec.js!' Warning [web-server]: ...

How can we create a touch and mouse-friendly horizontal scrolling navigation pattern?

I am trying to implement horizontal scrolling for video testimonials in a single row on a responsive website, but I am encountering an issue. The width of the container class is larger than col-12, which leaves space and causes horizontal scroll on the pag ...

Exploring the functionality of a Vue component designed solely through a template

I currently have a basic Vue application set up: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'& ...

Begin the ul element from the left-hand side

Check out my latest JSFiddle creation: http://jsfiddle.net/alonshmiel/Ht6Ym/2409/ I'm attempting to align the ul element on the left side of the page: I've experimented with the following CSS rules: margin-left:0px; float: left; Unfortunatel ...