[Vaadin 24] Where to place the source code a web component?

Hi, I developed a simple web component and I placed the JS file in frontend folder, as according to this guide https://vaadin.com/docs/latest/create-ui/web-components/an-in-project-web-component But I have seen another guide where it is placed in src/main/resources/META-INF/resources/frontend: https://vaadin.com/blog/creating-a-custom-component-with-lit

It works on both, but I would like to know if there is a difference between the two folders?

Things in the /frontend folder get compiled into the production frontend bundle, which is loaded in a single request when the application loads. Things under src/main/resources are loaded in separate requests even in production mode, which is usually somewhat less efficient.

Makes sense, thank you! :smile:

/frontend is working for your main module, for a component (or a submodule) the /frontend folder is not bundled in the jar. That’s the reason it’s in the src/main/resources/META-INF/resources/frontend for custom component.

I always wondered why it is META-INF/resources/frontend and not only META-INF/frontend. The duplication of resources looks wired. Any insights?

According to my understanding, it’s a quirky combination mandated by Maven and the .jar packaging specification. In .war files, you’d use WEB-INF to store static resources, but add-ons are not .war files, so they can’t have a WEB-INF directory. So the root directory must be /src/main/resources/META-INF and since you’re providing resources for the build, they must be under /resources/something according to the spec. I’m not 100% sure, though, so hopefully someone will correct me if I’m entirely wrong here :smile:

Thank you for the answers. By the way, is it possible to have live reload when modifying web components that are in these folders?

Only the frontend folder, not those within resources

I have the component on the frontend folder, but the live reload does not trigger

That’s the new Default in V24 and has to be re-enabled

https://vaadin.com/docs/latest/configuration/development-mode#front-end-development-server-for-easier-debugging

It works, but it is giving me this error

image.png

This is the standard css file from vaadin starter project

:face_with_monocle: does this also happen with you replace " with ’ ?

That solved it, thanks

@driven-rabbit any chance you could share the entire file (or at least a bigger part of it) that style block is part of?
"asdasd" is the common way of quoting strings in CSS so it should definitely work, so I’m wondering if there’s something else that is triggering that error

Sorry for only answering now. This is the entire file
main-layout.css (416 Bytes)

thanks. Which Vaadin version are you on, and do doublequotes still break it like before?

The version was 24.0.3, I will see if it breaks in the newest version