flow icon indicating copy to clipboard operation
flow copied to clipboard

Published 20 hours ago • verified publisher icon vaadin

absolute /VAADIN path for scripts rerefenced by index.html with custom servlet mapping

Open mcollovati opened this issue 3 years ago • 9 comments

Description of the bug

In development mode, <head> contains scripts with absolute /VAADIN/ prefix, e.g.:

<script type="module" src="/VAADIN/@vite/client"></script>
<script type="module" src="/VAADIN/generated/vaadin.ts"></script>
<script type="module" src="/VAADIN/generated/vite-devmode.ts"></script>

This only works when Vaadin servlet is mapped to root (/*), but fails to load script when a custom servlet mapping (eg /vaadin/*) is used, resulting in a blank page. Problem appears in both plain java (@WebServlet(urlPatterns=...)) and spring boot based projects (vaadin.urlMapping setting)

To be noted that trying to access resources prepending url mapping does not works for all of them. For example, giving a /vaadin/* mapping, /vaadin//VAADIN/generated/vaadin.ts and /vaadin/VAADIN/generated/vite-devmode.ts work, but /vaadin/VAADIN/@vite/client returns 404.

Similar ticket related to context-path: #12388

Minimal reproducible example

To reproduce

  • create a new Vaadin 23 project with start.vaadin.com, activating Vite for frontend build
  • update application.properties, setting a custom url mapping (e.g. vaadin.urlMapping=/vaadin/*)
  • start application, go http://localhost:8888/vaadin/ and observe that requests starting with /VAADIN results in a 404.

Alternative way to reproduce

  • Download plain java starter from https://github.com/vaadin/skeleton-starter-flow
  • Add a custom servlet to the projet 
    @WebServlet(urlPatterns = {"/vaadin/*" }, asyncSupported=true)
public class MyServlet extends VaadinServlet {
}
  • Activate Vite support by adding the file src/main/resources/vaadin-featureflags.properties with the following content 
    com.vaadin.experimental.viteForFrontendBuild=true
  • start application with mvn jetty:run, go http://localhost:8888/vaadin/ and observe that requests starting with /VAADIN results in a 404.

Expected behavior

An application configured to use Vite for frontend build should work also with custom servlet mapping.

Actual behavior

Scripts referenced in index.html are not loaded (HTTP 404) and a blank page is shown.

Versions:

- Vaadin / Flow version: 23
- Java version: 11.0.13
- OS version: Ubuntu 21.10
- Development or production mode: development

mcollovati avatar Mar 02 '22 10:03 mcollovati

Do I read this completely wrong or does it really say that vaadin.urlMapping is incorrectly implemented?

The VAADIN folder should always be in the root of the context path so that if you have multiple servlet mappings, you still have only one VAADIN mapping from which you load only one bundle with web components.

The typical way of accomplishing it is to not only map your vaadin servlet to /foo but also to /VAADIN/. Without digging deeper, it sounds like vaadin.urlMapping only registers to /foo servlet mapping and fails to register the additional /VAADIN/ mapping?

As a side note, using

@WebServlet(urlPatterns = {"/vaadin/*" }

makes it super confusing because vaadin here is then the servlet URL and not VAADIN the path for static resources

Based on the test case, it also seems like webpack loads the resources from the wrong location...

Artur- avatar Apr 06 '22 05:04 Artur-

So we should do the following:

  1. Clarify that static files are always loaded from VAADIN inside the context root
  2. Clarify that VAADIN/dynamic inside the servlet root is used for any internal needs VAADIN has
  3. Change urlMapping so that it additionally deploys a /VAADIN/* servlet (in the context root) unless that has already been done
  4. Ensure that static files are always loaded from contextroot/VAADIN and not servletpath/VAADIN while keeping dynamic content being used from servletpath/VAADIN

Then as a followup, move static files so they are actually inside static in VAADIN: #13768

Artur- avatar May 13 '22 11:05 Artur-

#13769 should cover the basic changes needed

Artur- avatar May 13 '22 11:05 Artur-

The provided reproduction example reproduces with the current master but works with #13795

Artur- avatar May 18 '22 09:05 Artur-

Closing, as #13795 and #13840 fixes the issue

mcollovati avatar May 25 '22 09:05 mcollovati

Reopened, since https://github.com/vaadin/flow/pull/13795 is going to be reverted soon because of several regressions due to serving static resources from context root.

mshabarov avatar Aug 17 '22 06:08 mshabarov

This ticket/PR has been released with Vaadin 23.2.0.beta3 and is also targeting the upcoming stable 23.2.0 version.

vaadin-bot avatar Aug 26 '22 09:08 vaadin-bot

With vaadin 24.3.5 it again have the same issue. In head it have vaadinPush.js file without url mapping.

Vaadin: 24.3.5 Java: 17.0.10 OS Version: Widnows 11 23H2 Development mode

CalebCintary avatar Feb 25 '24 10:02 CalebCintary

I am unable to reproduce the issue with 24.3.5.

Both using plain Java with custom servlet or spring-based application with vaadin.url-mapping the Vaadin push JavaScript is requested under the servlet mapping: http://localhost:8080/ui/VAADIN/static/push/vaadinPush.js

mcollovati avatar Feb 26 '24 10:02 mcollovati