Where to correctly place frontend folder Vaadin23 & SpringBoot & Gradle

Hello, I’m still struggling to create a deployment where the CSS imports are correct. After consulting multiple resources and documents I’m still not able to import my theme CSS.
Here’s a screenshot of my current build structure.
As you can see, I’ve created a frontend folder with all my themes, styles, and images.
This works on localhost perfectly fine
but sadly on my deployment, the CSS files are not imported.
Do I need to copy them manually from frontend into src/main/resources/META-INF/frontend/… ?
This is my import code&path:
Any help concerning resources and file path is welcome :slightly_smiling_face:


Thanks knoobie.
As you can see, I don’t have that “yourThemeName”… does that matter?
As you can see, I did create a frontend/themes/files folder… and still no success.

Yes it’s really important

Because you have to use the theme annotation to tell vaadin what theme to use

I see, I see I’ve been using theme as kinda styles.css mix instead of real “themes” because I did not use the @Theme annotation.
But can’t you only use one theme overall? I wanted to use multiple themes for different components…

Well that’s a bit harder - you probably have to create something like done with dark/light mode using different variants

I tried now with styles/files.css and still had no success :relieved:

What I see is that Vaadin is creating this flow-frontend folder:
Do I need to copy that into the deployment? Or will that be compiled also into a vaadin-node?
My struggle currently is how to correctly copy my local build (app) into the deployment folder (ear)…

Did you already look into https://vaadin.com/docs/latest/styling/custom-theme/creating-custom-theme ?

and Loading Resources | Advanced Topics | Vaadin Docs

Packaging is one major factor that decides where things should go

Hi Olli, yes, of course, I went through the whole documentation!
I cannot use “@Theme” annotation because we don’t extend our main from “AppShellConfigurator”.
Funny thing is, locally everything works perfectly but when I create the .ear deployment, the imports do not work on the server.
Well, there is no import-error, just the CSS-Style is not applied to.

Could you have a look at my folder structure? I copied the frontend everywhere into the .ear folder… still no success… I think the .ear is completely messed up and should be different. Although loading the main app and everything else works perfectly… just not the style import.

The mentioned class is an interface and doesn’t have to be applied to main - just annotate ANY class (except Vaadin views) with it and you are good to go. My class is named “VaadinConfig”

Thanks knoobie.
Currently I would be happy if just the CssImport would work!

Okay, yeah, .ear packaging is probably the issue here. Check out this sample project: GitHub - TatuLund/bookstore-flow-ee: Java EE version of Bookstore Vaadin 24 multimodule project with EAR packaging

I also have to say that I don’t think I’ve heard of .ear packaging in a spring boot project before

Thanks @vital-koala for the Vaadin14 example.
We are using Vaadin23 so I guess the source-structure will be different but maybe it will give me some hints :+1:
Do you have an example with .ear and vaadin23?