Wro4j, webjars and font-awesome

Question

I need help with wro4j configuration to use font-awesome from webjars. I have the next configuration file:

<?xml version="1.0" encoding="UTF-8"?>
<groups xmlns="http://www.isdc.ro/wro"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://www.isdc.ro/wro wro.xsd">

    <group name="angular-bootstrap">
<!--        <css>classpath:META-INF/resources/webjars/bootstrap/3.3.4/less/bootstrap.less</css> -->
<!--        <css>classpath:META-INF/resources/webjars/bootstrap/3.3.4/less/theme.less</css> -->
<!--        <css>classpath:META-INF/resources/webjars/font-awesome/4.4.0/less/font-awesome.less</css> -->
<!--        <css>classpath:META-INF/resources/webjars/flag-icon-css/0.7.1/less/flag-icon.less</css> -->
        <css>classpath:META-INF/resources/webjars/bootstrap/3.3.4/css/bootstrap.min.css</css>
        <css>classpath:META-INF/resources/webjars/bootstrap/3.3.4/css/bootstrap-theme.min.css</css>
        <css>classpath:META-INF/resources/webjars/font-awesome/4.4.0/css/font-awesome.min.css</css>
        <css>classpath:META-INF/resources/webjars/flag-icon-css/0.7.1/css/flag-icon.min.css</css>
        <css>file:${project.basedir}/src/main/wro/main.less</css>
        <js>webjar:jquery/2.1.1/jquery.min.js</js>
        <js>webjar:angularjs/1.4.4/angular.min.js</js>
        <js>webjar:angularjs/1.4.4/angular-route.min.js</js>
        <js>webjar:angularjs/1.4.4/angular-cookies.min.js</js>
        <js>webjar:angularjs/1.4.4/angular-animate.min.js</js>
        <js>webjar:angular-resource/1.4.5/angular-resource.min.js</js>
        <js>webjar:angular-translate/2.7.2/angular-translate.min.js</js>
<!--        <js>webjar:angular-translate-loader-static-files/2.6.1-1/angular-translate-loader-static-files.min.js</js> -->
        <js>webjar:bootstrap/3.3.4/js/bootstrap.min.js</js>
    </group>

</groups>

But when the html page load, the font characters don't appear. The console doesn't show any error message.

This is my maven configuration for wro4j:

<plugin>
                <groupId>ro.isdc.wro4j</groupId>
                <artifactId>wro4j-maven-plugin</artifactId>
                <version>${wro4j.version}</version>
                <executions>
                    <execution>
                        <phase>generate-resources</phase>
                        <goals>
                            <goal>run</goal>
                        </goals>
                    </execution>
                </executions>

                <configuration>
                    <wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory</wroManagerFactory>
                    <cssDestinationFolder>${project.build.directory}/generated-resources/static/css</cssDestinationFolder>
                    <jsDestinationFolder>${project.build.directory}/generated-resources/static/js</jsDestinationFolder>
                    <wroFile>${project.build.directory}/wro/wro.xml</wroFile>
                    <extraConfigFile>${basedir}/src/main/wro/wro.properties</extraConfigFile>
                    <contextFolder>${basedir}/src/main/wro</contextFolder>
                </configuration>

                <dependencies>
                    <dependency>
                        <groupId>org.webjars</groupId>
                        <artifactId>jquery</artifactId>
                        <version>2.1.1</version>
                    </dependency>

                    <dependency>
                        <groupId>org.webjars</groupId>
                        <artifactId>angularjs</artifactId>
                        <version>1.4.4</version>
                    </dependency>

                    <dependency>
                        <groupId>org.webjars</groupId>
                        <artifactId>bootstrap</artifactId>
                        <version>3.3.4</version>
                    </dependency>

                    <dependency>
                        <groupId>org.webjars</groupId>
                        <artifactId>font-awesome</artifactId>
                        <version>4.4.0</version>
                    </dependency>

                    <dependency>
                        <groupId>org.webjars</groupId>
                        <artifactId>flag-icon-css</artifactId>
                        <version>0.7.1</version>
                    </dependency>

                    <dependency>
                        <groupId>org.webjars.bower</groupId>
                        <artifactId>angular-resource</artifactId>
                        <version>1.4.5</version>
                    </dependency>

                    <dependency>
                        <groupId>org.webjars</groupId>
                        <artifactId>angular-translate</artifactId>
                        <version>2.7.2</version>
                    </dependency>

                    <dependency>
                        <groupId>org.webjars</groupId>
                        <artifactId>angular-translate-loader-static-files</artifactId>
                        <version>2.6.1-1</version>
                    </dependency>

                </dependencies>
            </plugin>

And my configuration properties file:

#List of preProcessors
preProcessors=cssUrlRewriting,cssImport,lessCssImport
#List of postProcessors
postProcessors=less4j,jsMin,cssMin

Do you see any broken resources which are requested by generated bundle? — Alex Objelean, Oct 03 '15 at 12:10
No, I don't see any errors in console or requests. The errors appeared previously when I used the webjar locator in configuration. — fjtorres, Oct 03 '15 at 14:32
I have got the same kind of problem with the fonts (.ttf, .woff files) not found. Have you found a solution following @AlexObjelean suggestions ? — T.Gounelle, Dec 17 '15 at 10:47

score 4 · Answer 1 · answered Feb 10 '16 at 00:39

Maybe it's too late for you but I had the same problem and solved it with maven plugins.

The problem is that wro4j plugin doesn't care about any font file in webjars dependencies so the fonts aren't available in the end.

First plugin : unpack webjars to ${project.build.directory}/unpacked, webjars listed under the artifactItems node and include all files from directories "fonts" (**/fonts/**/*)

        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-dependency-plugin</artifactId>
            <version>2.10</version>
            <executions>
                <execution>
                    <id>unpack-fonts</id>
                    <phase>generate-resources</phase>
                    <goals>
                        <goal>unpack</goal>
                    </goals>
                    <configuration>
                        <artifactItems>
                            <artifactItem>
                                <groupId>org.webjars</groupId>
                                <artifactId>bootstrap</artifactId>
                                <version>3.2.0</version>
                                <type>jar</type>
                                <overWrite>false</overWrite>
                            </artifactItem>
                            <artifactItem>
                                <groupId>org.webjars</groupId>
                                <artifactId>font-awesome</artifactId>
                                <version>4.5.0</version>
                                <type>jar</type>
                                <overWrite>false</overWrite>
                            </artifactItem>
                        </artifactItems>
                        <includes>**/fonts/**/*</includes>
                        <outputDirectory>${project.build.directory}/unpacked</outputDirectory>
                    </configuration>
                </execution>
            </executions>
        </plugin>

Second plugin : copy fonts files to the generated-resources "default" directory

        <plugin>
            <artifactId>maven-resources-plugin</artifactId>
            <version>2.7</version>
            <executions>
                <execution>
                    <id>copy-fonts</id>
                    <phase>process-resources</phase>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <configuration>
                        <outputDirectory>${project.build.directory}/generated-resources/static/fonts</outputDirectory>
                        <resources>
                            <resource>
                                <directory>${project.build.directory}/unpacked/META-INF/resources/webjars/bootstrap/3.2.0/fonts</directory>
                                <includes>
                                    <include>**/*</include>
                                </includes>
                                <filtering>false</filtering>
                            </resource>
                            <resource>
                                <directory>${project.build.directory}/unpacked/META-INF/resources/webjars/font-awesome/4.5.0/fonts</directory>
                                <includes>
                                    <include>**/*</include>
                                </includes>
                                <filtering>false</filtering>
                            </resource>
                        </resources>
                    </configuration>
                </execution>
            </executions>
        </plugin>

In my case, I need bootstrap font files and font-awesome font files so I unpack and copy both of the webjars but you can adapt the configuration for one webjar or more than two.

I have to say that I'm not a newbie nor an expert at maven so my answer could be improved.

Hope this will help somebody. ;)

Straw

I was looking also for something like this. Thanks. It looks like this solution would work. But it seems more complicated than it should be so I'm personally going to continue manually copying these fonts for now. — Enwired, Jun 01 '16 at 23:18
Hi @Enwired, I finally drop wro4j and get stuff done by npm, bower and grunt ... It is not really a good solution for me but wro4j (and wro maven plugin) was clearly not good to do such things while my project was growing. — Straw Berry, Jun 14 '16 at 13:24

score 1 · Answer 2 · answered May 24 '19 at 21:13

Also, check this on latest versions, as a tip, inspect jar file packaged in folder /target for the uber jar:

Whether, not used: webjars-locator library:

.pom dependency:

    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>font-awesome</artifactId>
        <version>5.2.0</version>
    </dependency>

...

<link rel="stylesheet"
th:href="@{/webjars/font-awesome/5.2.0/css/fontawesome.min.css}">

Or using webjars-locator:

.pom dependency:

    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>webjars-locator</artifactId>
        <version>0.36</version>
    </dependency>

...

   <link rel="stylesheet"
th:href="@{/webjars/font-awesome/css/fontawesome.min.css}">

score -1 · Answer 3 · answered Oct 05 '15 at 09:05

You are using wro4j maven plugin. While applying processors, it refers to classpath resources which have url's of the following form:

classpath:META-INF/resources/webjars/flag-icon-css/0.7.1/css/flag-icon.min.css, imageUrl ../flags/1x1/yt.svg

This kind of url's aren't valid out of the box, since they are trying to access a classpath resources which is not public. The simplest work around is to use runtime solution (using WroFilter), which takes care of the classpath resources. Another approach could be a hybrid solution, where maven plugin is used to produce bundles, while a servlet (similar to what WroFilter does) is responsible for serving classpath resources. You may find useful the webjars-servlet project for this.

I will try to create an example project which works for both - runtime and build-time solution which a setup similar to yours and will let you know in a comment when it is available.

Thanks you! I will try your indications. – fjtorres Oct 05 '15 at 17:58 — fjtorres, Oct 05 '15 at 17:58

Wro4j, webjars and font-awesome

3 Answers3