Static resources using Spring and Thymeleaf - java

I'm trying to access my static resources on my HTML using the following code:
<link th:href="#{css/main.css}" rel="stylesheet" type="text/css" />
But just works when I put #{static/css/main.css}. I know that when you set the resources folder, you don't need to set the static folder every time when call a static file.
My folder structure:
/webapp
=== /static
==========/css
==========/js
=== /WEB-INF
==========/views
Setting on Spring the mvc configs:
....
#EnableWebMvc
public class WebMvcConfig extends WebMvcConfigurerAdapter implements ApplicationContextAware {
private ApplicationContext applicationContext;
#Bean
public ViewResolver viewResolver() {
ThymeleafViewResolver resolver = new ThymeleafViewResolver();
resolver.setTemplateEngine(templateEngine());
resolver.setCharacterEncoding("UTF-8");
return resolver;
}
private TemplateEngine templateEngine() {
SpringTemplateEngine engine = new SpringTemplateEngine();
engine.setTemplateResolver(templateResolver());
return engine;
}
private ITemplateResolver templateResolver() {
SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
resolver.setApplicationContext(applicationContext);
resolver.setPrefix("/WEB-INF/views/");
resolver.setSuffix(".html");
resolver.setCacheable(false); // On production , turn TRUE
resolver.setTemplateMode(TemplateMode.HTML);
return resolver;
}
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/static/**").addResourceLocations("/static/");
}
#Override
public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
configurer.enable();
}
I'm using Spring 4 and Thymeleaf 3 beta. Every css-js-image file that I'm using I need to write 'static' on the path. This way that are coded don't work to use without write the full path. Why?

registry.addResourceHandler("/static/**").addResourceLocations("/static/");
^^^^^^^^ ^^^^^^^
----------- These two are different ------
Because you're telling spring mvc to serve every request with /static/ path prefix from /static folder in your classpath. So, when you fire a request to static/css/main.css, it will be matched with your resource handler path and will be served successfully.
I know that when you set the resources folder, you don't need to set
the static folder everytime when call a static file.
My guess is you're confusing the /static/** path prefix with /static folder name. static in #{static/css/main.css} is referencing to /static/** path prefix you defined in:
registry.addResourceHandler("/static/**")...
not the folder name in:
...addResourceLocations("/static/")
For example, if you define your resource handler like following:
registry.addResourceHandler("/content/**").addResourceLocations("/static/");
Then you should send your request to, say, content/css/main.css.
Update: If you insist to use css/main.css as your path, you should define your resource handler like this:
registry.addResourceHandler("/**").addResourceLocations("classpath:/static/");
And also put your /static/ folder in src/main/resources.

Related

Spring Boot / Docker: Thymeleaf template not found for html mail

I have a problem with finding a thymeleaf template on docker. I'm familiar with the leading slash problem in ordinary controllers. However I'd now like to use thymeleaf to render email bodies.
My code looks like this:
#Component
public class HtmlEmailDocumenter implements Documenter {
#Autowired
SpringTemplateEngine thymeleafTemplateEngine;
// more dependencies
#Override
public void accept(Documentable documentable){
Context thymeleafContext = new Context();
thymeleafContext.setVariable("doc", documentable);
String template = "mail/default";
String htmlBody = thymeleafTemplateEngine.process(template, thymeleafContext);
// send the email...
}
}
The template in question is under /src/main/resources/templates/mail/default.html. I have alternatively tried using "mail/default.html" in the source code. Doesn't work either in docker.
Any hints welcome.
I am doing something similar in non-Boot Spring application by defining the template engine template and resolver as follows:
#Bean
public ResourceBundleMessageSource emailMessageSource() {
final ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();
messageSource.setBasename("templates/email/mailMessages");
return messageSource;
}
#Bean
public TemplateEngine emailTemplateEngine() {
final SpringTemplateEngine templateEngine = new SpringTemplateEngine();
templateEngine.addTemplateResolver(htmlTemplateResolver());
templateEngine.setTemplateEngineMessageSource(emailMessageSource());
return templateEngine;
}
private ITemplateResolver htmlTemplateResolver() {
final ClassLoaderTemplateResolver templateResolver = new ClassLoaderTemplateResolver();
templateResolver.setOrder(Integer.valueOf(2));
templateResolver.setPrefix("/templates/email/");
templateResolver.setSuffix(".html");
templateResolver.setTemplateMode(TemplateMode.HTML);
templateResolver.setCharacterEncoding("UTF-8");
templateResolver.setCacheable(false);
return templateResolver;
}
I then refer to an email message template using just the name of the template within the /templates/email directory without extension.

Spring Boot 2 Maven Directory View Resolver

I currently have a Spring Boot application that is using React JS for the front end. I'm running inside Visual Studio, and via webpack, I'm compiling resources and outputting them to a Maven target folder. You can see the structure of the directory with the Java classes sitting inside the 'classes' folder and the client application sitting now inside the webapp folder - notice the index.html.
As this is a single page application I only need this page to resolve. As such my controller is configured to return the index file.
#SpringBootApplication
public class AdminApplication
{
public static void main( String[] args )
{
SpringApplication.run( AdminApplication.class, args );
}
}
#Controller
public class DefaultController
{
#RequestMapping( "/**" )
public ModelAndView reactApp()
{
return new ModelAndView( "index" );
}
}
Now. My problem comes with telling my view resolver to talk to this directory.
As you can see from the commented code, I've tried only a couple of hundred options for trying to get it to resolve the view. I've got the full file path to my project directory available on the documentRoot so if necessary and thought potentially I would need that.
I've put a breakpoint in the controller and this definitely does get hit, it just returns a 404 when trying to find the relevant view each time. Any guidance on what my viewResolver might need to look like appreciated. I can see there's a couple of Classes that may or may not be correct:
e.g. SpringResourceTemplateResolver and ClassLoaderTemplateResolver - not sure on which of these is most relevant for my requirements
#EnableWebMvc
#Configuration
public class MvcConfig implements WebMvcConfigurer,ApplicationContextAware {
private ApplicationContext context;
#Value("${server.document-root:}")
private String documentRoot;
#Override
public void setApplicationContext( ApplicationContext applicationContext ) {
this.context = applicationContext;
}
// private ITemplateResolver htmlTemplateResolver() {
// SpringResourceTemplateResolver resolver = new
// SpringResourceTemplateResolver();
// resolver.setApplicationContext(applicationContext);
// resolver.setPrefix(documentRoot);
// resolver.setCacheable(false);
// resolver.setTemplateMode(TemplateMode.HTML);
// return resolver;
// }
// #Bean
// public SpringResourceTemplateResolver templateResolver() {
// SpringResourceTemplateResolver templateResolver = new
// SpringResourceTemplateResolver();
// templateResolver.setPrefix( "/webapp/" );
// templateResolver.setCacheable(false);
// templateResolver.setSuffix(".html");
// templateResolver.setTemplateMode("HTML");
// return templateResolver;
// }
private ITemplateResolver templateResolver() {
SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
resolver.setApplicationContext(context);
resolver.setPrefix("templates/");
resolver.setSuffix(".html");
resolver.setTemplateMode(TemplateMode.HTML);
return resolver;
}
// public ITemplateResolver templateResolver() {
// ClassLoaderTemplateResolver templateResolver = new ClassLoaderTemplateResolver();
// templateResolver.setPrefix("templates/");
// templateResolver.setCacheable(false);
// templateResolver.setSuffix(".html");
// templateResolver.setTemplateMode(TemplateMode.HTML);
// templateResolver.setCharacterEncoding("UTF-8");
// return templateResolver;
// }
}
you don't need MvcConfig
just set the static-locations property in src/main/resources/application.properties to spring.resources.static-locations=classpath:/webapp/
map all possible request to your index-page like:
#GetMapping({"/index","/","/home"})
public String reactApp()
{
return "/index.html";
}
optional you could redirect the requests to your index-page
#GetMapping({"/index","/","/home"})
public String reactApp()
{
return "redirect:/index.html";
}
You don't need the MvcConfig class, Spring boot auto-configure the view resolver. All you have to do is to put your templates to the src/main/resources/templates/ directory and make a simple controller mapping like this
#RequestMapping(value = "/")
public String index() {
return "index";
}
in your home controller.
You can also check out this React.js and Spring example
you will need to configure your resource handler, that way:
#Configuration
public class StaticResourceConfiguration implements WebMvcConfigurer {
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/**")
.addResourceLocations("file:/path/to/dir/webapp/");
}
}
Notice, that in unix you will use file:/ and for windows
file:///C:/path/to/dir/webapp/
And then redirect the/ to index.html
#RequestMapping
#RestController
public class IndexEndpoint {
#GetMapping("/")
public String reactApp() {
return "/index.html";
}
}
I have tested it on a MacOS and it worked prefect.

why JSP pages not showing when using multiple view resolver in Spring boot?

I have added multiple view resolver for PDF, Excel and InternalResourceViewResolver for JSP files. PDF and Excel resolver works fine but when I call /test that is calling my test (test.jsp) I see a blank page. But when I remove other resolvers or disable my webconfig then test.jsp (/test) loads fine.
Following is the error I see when calling /test (binded to test controller and test.jsp):
2018-08-11 23:43:06.191 ERROR 12136 --- [nio-9090-exec-1] o.s.boot.web.support.ErrorPageFilter : Cannot forward to error page for request [/test] as the response has already been committed. As a result, the response may have the wrong status code. If your application is running on WebSphere Application Server you may be able to resolve this problem by setting com.ibm.ws.webcontainer.invokeFlushAfterService to false
Also, following is my webconfig responsible for adding multiple resolvers (pdf, excel and jsp pages):
#Configuration
#EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {
#Override
public void configureContentNegotiation(ContentNegotiationConfigurer configurer) {
configurer
.defaultContentType(MediaType.APPLICATION_JSON)
.favorPathExtension(true);
}
#Override
public void configureDefaultServletHandling(
DefaultServletHandlerConfigurer configurer) {
configurer.enable();
}
/*
* Configure ContentNegotiatingViewResolver
*/
#Bean
public ViewResolver contentNegotiatingViewResolver(ContentNegotiationManager manager) {
ContentNegotiatingViewResolver resolver = new ContentNegotiatingViewResolver();
resolver.setContentNegotiationManager(manager);
// Define all possible view resolvers
List<ViewResolver> resolvers = new ArrayList<>();
resolvers.add(internalResourceViewResolver());
resolvers.add(pdfViewResolver());
resolvers.add(excelViewResolver());
resolver.setViewResolvers(resolvers);
return resolver;
}
#Bean
public ViewResolver internalResourceViewResolver() {
InternalResourceViewResolver resolver = new InternalResourceViewResolver();
resolver.setPrefix("/WEB-INF/jsp");
resolver.setSuffix(".jsp");
return resolver;
}
/*
* Configure View resolver to provide XLS output using Apache POI library to
* generate XLS output for an object content
*/
#Bean
public ViewResolver excelViewResolver() {
return new ExcelViewResolver();
}
/*
* Configure View resolver to provide Pdf output using iText library to
* generate pdf output for an object content
*/
#Bean
public ViewResolver pdfViewResolver() {
return new PdfViewResolver();
}
}

Spring Display image that was just uploaded by the user without restarting the server

i'm trying to create a function that let user upload his profile picture and then he can display it while posting or commenting , i'm using Spring mvc , Spring security , hibernate and tomcat 9.
when i add a picture that was recently uploaded into the project root path and try to display it in the website , i have to restart so that it can work .
i cant make the server restart every time someone uploads his profile picture to display it , is there anything like a listener that would immediately see that a picture was added in the root path and display it withen the
<img src="${pageContext.request.contextPath}/static/images/basic-profile-pic.jpeg">
i'm using spring java configuration classes
and this is my configuration class for spring mvc
#Configuration
#EnableWebMvc
#ComponentScan(basePackages =
{"spring.ahmed.mostafa.data","com.ahmed.mostafa.controllers"})
public class SpringWebConfig implements WebMvcConfigurer {
#Bean
public ViewResolver viewResolver() {
InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
viewResolver.setPrefix("/WEB-INF/pages/");
viewResolver.setSuffix(".jsp");
return viewResolver;
}
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/static/**").addResourceLocations("/static/");
}
#Bean
public MessageSource messageSource(){
ResourceBundleMessageSource source = new ResourceBundleMessageSource();
source.setBasename("messages");
return source;
}
#Override
public Validator getValidator() {
LocalValidatorFactoryBean validator= new LocalValidatorFactoryBean();
validator.setValidationMessageSource(messageSource());
return validator;
}
#Bean(name="multipartResolver")
public CommonsMultipartResolver getResolver() throws IOException {
CommonsMultipartResolver resolver = new CommonsMultipartResolver();
resolver.setMaxUploadSizePerFile(5242880);//5MB
return resolver;
}
}
is it possible to upload it and display it without restarting in root
or better not to put it inside root path and change it somewhere else ,
and how to make it work either way
Thanks!
Try Spring Content. It provides easy storage and retrieval of "content" be that images, videos, documents, etc
Add these dependencies to your pom.xml:
<dependency>
<groupId>com.github.paulcwarren</groupId>
<artifactId>spring-content-fs</artifactId>
<version>0.0.11</version>
</dependency>
<dependency>
<groupId>com.github.paulcwarren</groupId>
<artifactId>spring-content-rest</artifactId>
<version>0.0.11</version>
</dependency>
Add #EnableFilesystemStores and #Import annotations to SpringWebConfig:
#Configuration
#EnableWebMvc
#ComponentScan(basePackages =
{"spring.ahmed.mostafa.data","com.ahmed.mostafa.controllers"})
#EnableFilesystemStores("com.ahmed.mostafa.controllers")
#Import(org.springframework.content.rest.config.RestConfiguration.class)
public class SpringWebConfig implements WebMvcConfigurer {
And the following beans:
#Bean
File filesystemRoot() {
try {
return new File("/path/to/your/images/outside/webapp");
} catch (IOException ioe) {}
return null;
}
#Bean
FileSystemResourceLoader fileSystemResourceLoader() {
return new
FileSystemResourceLoader(filesystemRoot().getAbsolutePath());
}
Add the following Store:
#StoreRestResource(path="profilePics")
public interface ProfilePicStore extends Store<String> {
}
Now when you start your application you will have a REST endpoint that allows you to store and retrieve profile pictures to /path/to/your/images/outside/webapp. Assuming your web app is running on localhost:8080:
curl -X POST -F file=#/path/to/local/pic.jpg http://localhost:8080/<contextPath>/profilePics/profile1.jpg
Or:
<form:form action="${pageContext.request.contextPath}/profilePics/profile1.jpg" method="post" enctype="multipart/form-data">
<input type ="file" name ="file">
<input type ="submit" value ="submit">
</form:form>
will store the file in /path/to/your/images/outside/webapp/profile1.jpg.
And:
curl http://localhost:8080/<contextPath>/profilePics/profile1.jpg
Or:
<img src="${pageContext.request.contextPath}/profilePics/profile1.jpg">
will retrieve it again. No restarts necessary.
There are a variety of different stores supported; filesystem, db, s3, gridfs. Just swap out the spring-content-fs dependency for the one store you want to use.
Spring Content can also be combined with Spring Data to associate content with Entities. I mention as it sounds like you are probably storing users in a database. There is a getting started guide here.

Spring web flow don't redirect after post submission

I encounter a very strange issue in my project using spring web flow 2.4.0.
In the documentation of web-flow project we can read on chapter 2 the following statement:
By default Web Flow does a client-side redirect upon entering every
view state.
My concern is when i submit a form web flow do not make redirection that implies a new form submission is made if user reload or refresh the page. This is very boring.
I tried many things and found a couple of solutions on the web
for example make the redirection programmaticaly with the following code :
context.getExternalContext().requestFlowExecutionRedirect();
And i finally found an attribute "redirect" for the tag view-state in flow configuration. when it is set to true everything works fine.
Since web flow documentation mentions that this behavior (redirect automatically ) is the default one , does anyone heard about a better way to do this after form submission.
I am looking for a kind of POST REDIRECT GET pattern.
Thank you and sorry for my english :)
Just verify your springwebflow xml file configuration, it could be because of
redirect flag set to false in the flow-execution-attributes.
<webflow:flow-execution-attributes>
<webflow:always-redirect-on-pause value="true"/>
<webflow:redirect-in-same-state value="true"/>
</webflow:flow-execution-attributes>
</webflow:flow-executor>
To do the same
following is the code in Bean Level
#Bean
public FlowExecutor flowExecutor() {
return getFlowExecutorBuilder(this.flowRegistry())
.setRedirectInSameState(true)
.setAlwaysRedirectOnPause(true)
.build();
}
where the class extends AbstractFlowConfiguration
After lot of reading was finally able to change the default behaviour
( default behaviour was - Get request , post (302/303 - redirect as per location appended for each request ) , finally a get call.
So for one request we will send a Get Request then Service will return 302/303 with location attribute ( ie redirected with query param ) and as a response HTML with QueryString usually e1s1 is loaded. Sample proj is in this link and following is the change that is been implemented to avoid this default behaviour as following
To avoid 303/302 which has unpredictable behaviour i have stoped redirection with following addition to Config Class
#Configuration
public class WebFlowWithMvcConfig extends AbstractFlowConfiguration {
//implements WebMvcConfigurer
#Autowired
private LocalValidatorFactoryBean localValidatorFacotryBean;
/*
#Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new LogInterceptor());
}
*/
#Bean
public FlowDefinitionRegistry flowRegistry() {
return getFlowDefinitionRegistryBuilder() //
.setBasePath("classpath:flows") //
.addFlowLocationPattern("/**/*-flow.xml") //
.setFlowBuilderServices(this.flowBuilderServices()) //
.build();
}
#Bean
public FlowExecutor flowExecutor() {
return getFlowExecutorBuilder(this.flowRegistry())
.setAlwaysRedirectOnPause(false)
.setRedirectInSameState(false)
.build();
}
#Bean
public FlowBuilderServices flowBuilderServices() {
return getFlowBuilderServicesBuilder() //
.setViewFactoryCreator(this.mvcViewFactoryCreator()) // Important!
.setValidator(this.localValidatorFacotryBean)
.build();
}
// ----------------------------------------------------------
#Bean
public FlowHandlerMapping flowHandlerMapping() {
FlowHandlerMapping handlerMapping = new FlowHandlerMapping();
handlerMapping.setOrder(-1);
handlerMapping.setFlowRegistry(this.flowRegistry());
//handlerMapping.setInterceptors(new LogInterceptor());
return handlerMapping;
}
#Bean
public FlowHandlerAdapter flowHandlerAdapter() {
FlowHandlerAdapter handlerAdapter = new FlowHandlerAdapter();
handlerAdapter.setFlowExecutor(this.flowExecutor());
handlerAdapter.setSaveOutputToFlashScopeOnRedirect(true);
//handlerAdapter.setStatusCode(HttpStatus.SEE_OTHER);
//handlerAdapter.setStatusCode(HttpStatus.TEMPORARY_REDIRECT);
return handlerAdapter;
}
#Bean
public ViewFactoryCreator mvcViewFactoryCreator() {
MvcViewFactoryCreator factoryCreator = new MvcViewFactoryCreator();
factoryCreator.setViewResolvers(Collections.singletonList(this.thymeleafViewResolver()));
factoryCreator.setUseSpringBeanBinding(true);
return factoryCreator;
}
#Bean
#Description("Thymeleaf AJAX view resolver for Spring WebFlow")
public AjaxThymeleafViewResolver thymeleafViewResolver() {
AjaxThymeleafViewResolver viewResolver = new AjaxThymeleafViewResolver();
viewResolver.setViewClass(FlowAjaxThymeleafView.class);
viewResolver.setTemplateEngine(this.templateEngine());
viewResolver.setCharacterEncoding("UTF-8");
return viewResolver;
}
#Bean
#Description("Thymeleaf template resolver serving HTML 5")
public ClassLoaderTemplateResolver templateResolver() {
ClassLoaderTemplateResolver templateResolver = new ClassLoaderTemplateResolver();
templateResolver.setPrefix("templates/");
templateResolver.setCacheable(false);
templateResolver.setSuffix(".html");
templateResolver.setTemplateMode("HTML5");
templateResolver.setCharacterEncoding("UTF-8");
return templateResolver;
}
#Bean
#Description("Thymeleaf template engine with Spring integration")
public SpringTemplateEngine templateEngine() {
SpringTemplateEngine templateEngine = new SpringTemplateEngine();
templateEngine.setTemplateResolver(this.templateResolver());
return templateEngine;
}
}
So we have made following as false
.setAlwaysRedirectOnPause(false)
.setRedirectInSameState(false)
Which will avoid location redirect now the similar change has to be implemented in the template html's too. So the change was to add an action url to html template wherever form is present as following
<form .. th:action="${flowExecutionUrl}">
Which successfully does form submission and responds with 200 Ok http status and html page. Hence no more (GET - 200 to 302 redirect to 200) instead direct single request call with Get 200/Post 200 and response is binded to Html page.

Categories

Resources