Theming with Spring Boot

Hi all,

Is there anyone knowing how to create your own theme when using Spring Boot?

I created a vaadin-spring + Spring Boot application that is working fine but now I need to style it and have no clue about where to place the “VAADIN/themes/mytheme” folder in order to have it available for using @Theme(“mytheme”)

The project has been bootstrapped using spring initializer (http://start.spring.io)

I tried placing the VAADIN folder inside “src/main/resources/static”, but did not work so far.

Anyone willing to help?

Thanks a lot in advance

Fran

The web content normally goes under src/main/webapp, so a theme would go under src/main/webapp/VAADIN/themes/mytheme.

It’s apparently possible to put them under resources,
as discussed here
.

Thanks Marko,

I tried placing it in the webapp folder. This is what I get:

com.vaadin.server.VaadinServlet : Requested resource [/VAADIN/themes/admin/styles.css] not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder Also tried with “WebContent” instead of “webapp” but the result is the same. I would also expect that the scss file was being compiled to “styles.css”, but did not happen, so I also tried with the maven-exec build plugin to have the sass compiled. It is compiled but the error message stays the same. Does not find the css file.

Any other idea?

Thanks again

Finally working.

The right place for a Spring Boot + Spring application seems to be “/src/main/resources”

So it will show liek this:

/src/main/resources/VAADIN/themes/mytheme I hope this helps someone else.

Now fighting with having the scss’s files compiled on the fly in debug mode.

The only error I get now is:

java.io.FileNotFoundException: /private/var/folders/fm/_skjhhqx4qlbd6zz__8b055h0000gn/T/tomcat-docbase.5955931229600047814.8888/VAADIN/themes/admin/styles.scss.cache (No such file or directory)

If you dont need on the fly compilation you can use the following plugin in your maven build, that will compile the them and copy in your resources folder

<plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>exec-maven-plugin</artifactId>
                <version>1.2.1</version>
                <executions>
                    <execution>
                        <phase>generate-sources</phase>
                        <goals>
                            <goal>java</goal>
                        </goals>
                        <configuration>
                            <classpathScope>compile</classpathScope>
                            <mainClass>com.vaadin.sass.SassCompiler</mainClass>
                            <arguments>
                                <argument>src/main/resources/VAADIN/themes/<yourtheme>/styles.scss</argument>
                                <argument>src/main/resources/VAADIN/themes/<yourtheme>/styles.css</argument>
                            </arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>  

Thanks Esau,

This is the plugin I’m using right now. The problem is that to be fast enough, the “on-the-fly” scss compilaton is needed. Otherwise you’re continuosly restarting the application.

I changed the execution phase for the plugin so whenever I compile, I get the sass file compiled. I ignore if it’s the right way, but for the moment is the fastest way I can think of.

Thanks again
Fran

There’s what I understand a work in progress into this subject:

http://dev.vaadin.com/ticket/16949

For the time being, triggering manually a “mvn compile” and then making the project makes the changes on the scss file being available.

Hope it helps someone else

Fran

Finally, thanks to @Morfic (stackoverflow) and @Marko Grönroos all is working as expected.

Maybe I had a wrong combination at some time within the location, the plugin and some other parameter, but in the end, having the “VAADIN/themes…” inside “src/main/webapp” works.

On-the-fly compilation of sass files is working and I must say I’m really happy now with the development performance with Vaadin.

Cheers

hi, i got the same issue with error

webapps\myApp\VAADIN\themes\tests-valo-reindeer\styles.scss.cache (The system cannot find the path specified) can you suggest me how to solve this issue using ant?

I was able to get the compiler to compile the theme this way:

${basedir}/src/main/resources/
${basedir}/src/main/resources/
${basedir}/src/main/resources/

I had to actually go to the source code of the plugin to realize that I had to trick it with the warSourceDirectory property :S. There is little documentation about what the plugin parameters are.

I also put the theme under /src/main/resources/VAADIN/themes/mytheme.

Am posting this in case it helps anyone. Had a real problem with getting Vaadin custom themes to work with Spring Boot with a Jar deployment. The application worked fine in development in Intellij but when deployed to AWS no themes. The src/main/webapp folder wasn’t making it to the deployment Jar. I tried putting the webapp/VAADIN and just the VAADIN folder in /src/main/resources/, as per Spring Boot docs but that didn’t work either. Vaadin wasn’t finding the themes.

After a lot of experimenting with various Maven plugins, the following is currently working well. In the pom.xml, in the section (where you also define for spring-boot-maven-plugin and vaadin-maven-plugin), just add:

<resources> <resource> <directory>src/main/webapp</directory> </resource> </resources> One concern is that the Spring Boot docs (http://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#boot-features-spring-mvc-static-content) explicitly tell you “Do not use the src/main/webapp directory if your application will be packaged as a jar. Although this directory is a common standard, it will only work with war packaging and it will be silently ignored by most build tools if you generate a jar.” I am hoping there are no negative consequences if you force src/main/webapp to be included.

The Vaadin docs say that “Custom themes are placed under the VAADIN/themes/ folder of the web application (under WebContent in Eclipse or src/main/webapp in Maven projects). This location is fixed” Perhaps Vaadin should allow a bit more flexibility for custom themes to be placed in the resources directory.

Thanks for this helpful post. I had a similar issue with Eclipse and Tomcat.

Thank you. This works right for me!

Spring Boot jar packaging Vaadin theme

Problem here is, that vaadin custom theme is not served as “static” with plain tomcat but thought the vaadinservlet loaded from classpath resource url, unfotunately jar protocol is not enabled in vaadin spring servlet to serve resources in suitable paths.

this worked for me in vaadin 7.7.7± vaadin-spring-boot-starter 1.0.0 - 1.2.0

  1. Put your theme into src/main/resources/META-INF/resources/VAADIN/themes/…

  2. Override default spring vaadin servlet to allow to load resources from that path when packed to “jar” this class in your component scan package will do the trick:

[code]
@SpringComponent(“vaadinServlet”)
public class MetaSpringVaadinServlet extends SpringVaadinServlet {
private static final Logger logger = Logger.getLogger(MetaSpringVaadinServlet.class);

@Override
protected void servletInitialized() throws ServletException {
super.servletInitialized();
logger
.info(“Replacing default VaadinSpringServlet with custom to allow JAR protocol in /META-INF/resources/VAADIN/”);
}

@Override
protected boolean isAllowedVAADINResourceUrl(HttpServletRequest request, URL resourceUrl) {
if (“jar”.equals(resourceUrl.getProtocol())) {
if (!resourceUrl.getPath().contains(“!/VAADIN/”)
&& !resourceUrl.getPath().contains(“!/META-INF/resources/VAADIN/”)) {
logger.warn(“Blocked attempt to access a JAR entry not starting with /VAADIN/ or /META-INF/resources/VAADIN/: "
+ resourceUrl);
return false;
}
logger.debug(“Accepted access to a JAR entry using a class loader: " + resourceUrl);
return true;
} else {
if (!resourceUrl.getPath().contains(”/VAADIN/”) || resourceUrl.getPath().contains(“/…/”)) {
logger.warn("Blocked attempt to access file: " + resourceUrl);
return false;
}
logger.debug("Accepted access to a file using a class loader: " + resourceUrl);
return true;
}
}
}
[/code]Check source of SpringVaadinServlet to reference and let me know. This is only way i was able to serve both Spring MVC Templates and Vaadin custom theme resources in spring boot “executable” jar with embeded tomcat server.

you can put your *.JSP files into src/main/resources/META-INF/resources/WEB-INF/jsp if you are using Spring MVC alongside with Vaadin from JAR file

application.properties

#Internal view resolver
spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp

pom.xml deps

[code]

org.apache.tomcat.embed
tomcat-embed-jasper
provided

<dependency>
  <groupId>javax.servlet</groupId>
  <artifactId>jstl</artifactId>
</dependency>

[/code]I was not using “fat” jar but ordinary jar without dependencies included (it has different structure)

e.g… pom.xml

<build> <plugins> <!-- copy dependencies --> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-dependency-plugin</artifactId> <executions> <execution> <id>copy-dependencies</id> <phase>package</phase> <goals> <goal>copy-dependencies</goal> </goals> <configuration> <outputDirectory>${project.build.directory}/lib</outputDirectory> <overWriteReleases>false</overWriteReleases> <overWriteSnapshots>false</overWriteSnapshots> <overWriteIfNewer>true</overWriteIfNewer> </configuration> </execution> </executions> </plugin> </plugins> </build> then test with

java -cp target/lib/:targer/myapp.jar myapp.Launcher

sorry for my english, hope i can help

edit: for vaadin spring 2.0 and vaadin 8.0.0 you just put them into src/main/resources/VAADIN/themes/… and it should work thanks to this insightfull commit:

https://github.com/vaadin/spring/commit/49efce25c2af8ddf9039e46211182cab0deb78d7

Any ideas how to use a custom css file in SpringBoot-Vaadin application (SpringBoot version 1.5.1) ?

If you use Spring Boot 2.0 when it arrives things will be a bit easier but I think there are solutions also for 1.5. Habe a look here:

https://vaadin.com/forum#!/thread/9721905/15267800

Hi, I’ve tried to do so, but result is not as expected
I’m using vaadin 8.0.5 and vaadin-spring 2.0.1
my styles.css is:

[code]
@import “…/valo/styles.css”;

.v-app {
background: blue;
}
[/code]background color turns blue, but @import does not work :frowning:

Check out this project:
https://github.com/ripla/vaadin-spring-widgetset-compile

Just put theme in the following directory: src/main/resources/VAADIN/themes
And configure plugin as follow:

<plugin>
 <groupId>com.vaadin</groupId>
 <artifactId>vaadin-maven-plugin</artifactId>
 <version>${vaadin.version}</version>
 <configuration>
  <webappDirectory>${basedir}/src/main/resources/VAADIN/widgetsets</webappDirectory>
  <warSourceDirectory>${basedir}/src/main/resources</warSourceDirectory>
 </configuration>
 <executions>
  <execution>
   <goals>
    <goal>clean</goal>
    <goal>resources</goal>
    <goal>update-theme</goal>
    <goal>update-widgetset</goal>
    <goal>compile-theme</goal>
    <goal>compile</goal>
   </goals>
  </execution>
 </executions>
</plugin>

Thanks, I’ll try

Thanks for the info.