Within my Spring Boot project, I am attempting to utilize Thymeleaf for injecting data into a JavaScript file that undergoes preprocessing with babel via WebPack.
The Thymeleaf setup is outlined as follows:
@Bean
public SpringTemplateEngine templateEngine(MessageSource webTemplateMessageSource) {
// Code snippet here
}
@Bean
public ViewResolver viewResolver(SpringTemplateEngine templateEngine) {
// Code snippet here
}
public SpringResourceTemplateResolver htmlTemplateResolver() {
// Code snippet here
}
public SpringResourceTemplateResolver javaScriptTemplateResolver() {
// Code snippet here
}
An example of an HTML page structure is provided below:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Secrets</title>
</head>
<body>
<button id="secret-button">Tell me the secret</button>
<script th:src="@{/js/scripts.js}"></script>
</body>
</html>
In this scenario, I aim to populate the secretMessage variable in a JavaScript file using ThymeLeaf with the following message property:
const secretMessage = [[#{secret}]];
document.querySelector("#secret-button").addEventListener("click", ev => {
alert(secretMessage);
});
The message content resides within a dedicated message source as shown:
secret=Elvis 'still alive
Lastly, the relevant segment of the WebPack configuration is detailed below:
let babelConfig = {
test: /\.js$/i,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react', '@babel/preset-env']
}
}
};
Despite the efforts put into this setup, there are issues encountered. Specifically, babel throws errors concerning the line:
const secretMessage = [[#{secret}]];Furthermore, uncertainties remain as to whether additional configurations are necessary. Resources or examples demonstrating proper implementation of Thymeleaf in conjunction with Spring Boot for JavaScript parsing are sought after for guidance and assistance.
Edit
For experimentation purposes, attempts were made to process the JavaScript file without relying on webpack bundling. Despite placing the JS file directly within the static/build/js directory, it fails to be processed by the Thymeleaf engine when requested by the HTML page.
Hence, aside from the webpack preprocessing challenge, an obstacle persists in terms of Thymeleaf processing. Limited resources and tutorials addressing this hurdle have led to a trial-and-error predicament, unsure of the feasibility of the desired outcome.
Edit 2:
DeletedEdit 3:
Following suggestions from M. Deinum, a `ViewController` was implemented by overriding `addViewControllers` within the `WebMvcConfigurer` interface:@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("*.js");
}
In addition, to address lingering issues persisting despite these changes, the
templateResolver.setPrefix("/js/");javaScriptTemplateResolver was removed in hopes of eliminating any potential limitations. Despite these adjustments, Thymeleaf still does not process the JavaScript file as intended.