From 3440e196a23846a6f1d05922fa03340027d6f6e2 Mon Sep 17 00:00:00 2001 From: Marco Collovati Date: Fri, 17 Jan 2025 11:34:43 +0100 Subject: [PATCH 1/4] fix: fix Vaadin url mapping documentation Current documentation for Vaadin URL mapping handling seems outdated and provides a wrong example code that causes application failure. This change updates the docs to provide more information and solutions to handle static resources. Fixes #2768 --- .../integrations/spring/configuration.adoc | 49 ++++++++++++++++++- 1 file changed, 48 insertions(+), 1 deletion(-) diff --git a/articles/flow/integrations/spring/configuration.adoc b/articles/flow/integrations/spring/configuration.adoc index 05e57dc7b0..1d4bbdb557 100644 --- a/articles/flow/integrations/spring/configuration.adoc +++ b/articles/flow/integrations/spring/configuration.adoc @@ -162,7 +162,54 @@ vaadin.url-mapping=/my_mapping/* By default, URL mapping is `/*`. -An additional servlet (e.g., `/my_mapping/*`) is required to handle the frontend resources for non-root servlets. The servlet can be defined in your application class. See https://raw.githubusercontent.com/vaadin/flow-and-components-documentation/master/tutorial-servlet-spring-boot/src/main/java/org/vaadin/tutorial/spring/Application.java[`Application` class] for an example. +=== Vaadin URL Mapping + +When using a custom servlet URL mapping in a Vaadin application, special care must be taken when referencing static resources, such as images, in Vaadin views. +For example, if the application provides images in `src/main/resources/META-INF/resources/images` or `src/main/resources/static/images`, these images will be served from the root of the web application context (e.g., `http://localhost:8080/images/logo.png`). +If your Vaadin views are served under a custom mapping, such as `http://localhost:8080/my_mapping/`, you need to ensure that the correct path is provided for the images. To reference the image from the application root, you can use a relative path, such as `new Image("../logo.png", "Company Logo")`. +However, this approach is not ideal when the same application can be deployed with different URL mappings or without any custom mapping, as it may lead to inconsistencies. +A solution could be using a helper method to compute a path relative to the context root: + +[source,java] +---- +public static String resolveStaticResource(String path) { + return UI.getCurrent().getInternals().getContextRootRelativePath() + + path.replaceFirst("^/", ""); +} + +public class MyView extends Div { + public MyView() { + add(new Image(resolveStaticResource("images/logo.png"))); + } +} +---- + +Another option is to register a Servlet Filter that intercepts static resource referenced by the Vaadin UI and forwards the request to the correct path. + +[source,java] +---- +@Bean +@ConditionalOnProperty(name = "vaadin.url-mapping") +FilterRegistrationBean publicImagesAliasFilter(@Value("${vaadin.url-mapping}") String urlMapping) { + String baseMapping = urlMapping.replaceFirst("/\\*$", ""); + FilterRegistrationBean registrationBean = new FilterRegistrationBean<>( + new OncePerRequestFilter() { + @Override + protected void doFilterInternal(HttpServletRequest request, + HttpServletResponse response, + FilterChain filterChain) + throws ServletException, IOException { + // Remove Vaadin URL mapping from the path and forward the request + String path = request.getRequestURI().substring(baseMapping.length()); + request.getRequestDispatcher(path) + forward(request, response); + } + }); + registrationBean.addUrlPatterns(baseMapping + "/images/*"); + registrationBean.setOrder(Ordered.HIGHEST_PRECEDENCE); + return registrationBean; +} +---- == Configure Spring MVC Applications From 7c532332aa3c286c6daa24810212649054c814d8 Mon Sep 17 00:00:00 2001 From: Marco Collovati Date: Fri, 17 Jan 2025 11:45:58 +0100 Subject: [PATCH 2/4] fix image path --- articles/flow/integrations/spring/configuration.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/articles/flow/integrations/spring/configuration.adoc b/articles/flow/integrations/spring/configuration.adoc index 1d4bbdb557..d45a31f99c 100644 --- a/articles/flow/integrations/spring/configuration.adoc +++ b/articles/flow/integrations/spring/configuration.adoc @@ -166,7 +166,7 @@ By default, URL mapping is `/*`. When using a custom servlet URL mapping in a Vaadin application, special care must be taken when referencing static resources, such as images, in Vaadin views. For example, if the application provides images in `src/main/resources/META-INF/resources/images` or `src/main/resources/static/images`, these images will be served from the root of the web application context (e.g., `http://localhost:8080/images/logo.png`). -If your Vaadin views are served under a custom mapping, such as `http://localhost:8080/my_mapping/`, you need to ensure that the correct path is provided for the images. To reference the image from the application root, you can use a relative path, such as `new Image("../logo.png", "Company Logo")`. +If your Vaadin views are served under a custom mapping, such as `http://localhost:8080/my_mapping/`, you need to ensure that the correct path is provided for the images. To reference the image from the application root, you can use a relative path, such as `new Image("../images/logo.png", "Company Logo")`. However, this approach is not ideal when the same application can be deployed with different URL mappings or without any custom mapping, as it may lead to inconsistencies. A solution could be using a helper method to compute a path relative to the context root: From 5bce5ca096f542a2d29bc4b8ee01a365e8ad21ff Mon Sep 17 00:00:00 2001 From: russelljtdyer <6652767+russelljtdyer@users.noreply.github.com> Date: Fri, 17 Jan 2025 15:05:12 +0100 Subject: [PATCH 3/4] Initial editing of added text -- and Vale fix. --- articles/flow/integrations/spring/configuration.adoc | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/articles/flow/integrations/spring/configuration.adoc b/articles/flow/integrations/spring/configuration.adoc index d45a31f99c..319b99006a 100644 --- a/articles/flow/integrations/spring/configuration.adoc +++ b/articles/flow/integrations/spring/configuration.adoc @@ -162,12 +162,13 @@ vaadin.url-mapping=/my_mapping/* By default, URL mapping is `/*`. + === Vaadin URL Mapping -When using a custom servlet URL mapping in a Vaadin application, special care must be taken when referencing static resources, such as images, in Vaadin views. -For example, if the application provides images in `src/main/resources/META-INF/resources/images` or `src/main/resources/static/images`, these images will be served from the root of the web application context (e.g., `http://localhost:8080/images/logo.png`). -If your Vaadin views are served under a custom mapping, such as `http://localhost:8080/my_mapping/`, you need to ensure that the correct path is provided for the images. To reference the image from the application root, you can use a relative path, such as `new Image("../images/logo.png", "Company Logo")`. -However, this approach is not ideal when the same application can be deployed with different URL mappings or without any custom mapping, as it may lead to inconsistencies. +When using a custom servlet URL mapping in a Vaadin application, special care must be taken when referencing static resources (e.g., images) in Vaadin views. For example, if the application provides images in `src/main/resources/META-INF/resources/images` or in `src/main/resources/static/images`, these images are served from the root of the web application context (e.g., `http://localhost:8080/images/logo.png`). If your Vaadin views are served under a custom mapping (e.g., `http://localhost:8080/my_mapping/`), you need to ensure that the correct path is provided for the images. + +To reference an image from the application root, you can use a relative path, such as `new Image("../images/logo.png", "Company Logo")`. However, this approach is not ideal when the same application can be deployed with different URL mappings, or without any custom mapping, as it may lead to inconsistencies. + A solution could be using a helper method to compute a path relative to the context root: [source,java] From 73f894c574337803379e357c0d42e53b4a93ef08 Mon Sep 17 00:00:00 2001 From: russelljtdyer <6652767+russelljtdyer@users.noreply.github.com> Date: Fri, 17 Jan 2025 16:47:52 +0100 Subject: [PATCH 4/4] A few more edits of the text. --- articles/flow/integrations/spring/configuration.adoc | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/articles/flow/integrations/spring/configuration.adoc b/articles/flow/integrations/spring/configuration.adoc index 319b99006a..9e6907ef37 100644 --- a/articles/flow/integrations/spring/configuration.adoc +++ b/articles/flow/integrations/spring/configuration.adoc @@ -1,6 +1,6 @@ --- title: Configuration -page-title: Spring configuration for Vaadin applications +page-title: Spring Configuration for Vaadin Applications description: Configuring Spring properties in a Vaadin application. meta-description: Configure Spring applications with Vaadin for seamless integration. order: 60 @@ -165,11 +165,11 @@ By default, URL mapping is `/*`. === Vaadin URL Mapping -When using a custom servlet URL mapping in a Vaadin application, special care must be taken when referencing static resources (e.g., images) in Vaadin views. For example, if the application provides images in `src/main/resources/META-INF/resources/images` or in `src/main/resources/static/images`, these images are served from the root of the web application context (e.g., `http://localhost:8080/images/logo.png`). If your Vaadin views are served under a custom mapping (e.g., `http://localhost:8080/my_mapping/`), you need to ensure that the correct path is provided for the images. +When using a custom servlet URL mapping in a Vaadin application, special care must be taken to reference static resources (e.g., images) in Vaadin views. For example, if the application provides images in `src/main/resources/META-INF/resources/images` or in `src/main/resources/static/images`, these images are served from the root of the web application context (e.g., `http://localhost:8080/images/logo.png`). If your Vaadin views involve a custom mapping (e.g., `http://localhost:8080/my_mapping/`), you need to ensure that the correct path is provided for the images. -To reference an image from the application root, you can use a relative path, such as `new Image("../images/logo.png", "Company Logo")`. However, this approach is not ideal when the same application can be deployed with different URL mappings, or without any custom mapping, as it may lead to inconsistencies. +To reference an image from the application root, you can use a relative path, such as `new Image("../images/logo.png", "Company Logo")`. However, this approach is not ideal when the same application can be deployed with different URL mappings, or without any custom mapping, as it may lead to inconsistencies. -A solution could be using a helper method to compute a path relative to the context root: +A solution could be to use a helper method to compute a path relative to the context root: [source,java] ----