CODEWITHSUNDEEP
javamavenwebjarswro4j
fjtorres
fjtorres

Reputation: 276

Wro4j, webjars and font-awesome

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

Upvotes: 5

Views: 4878

Answers (3)

Felix Aballi
Felix Aballi

Reputation: 949

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}">

Upvotes: 1

Straw Berry
Straw Berry

Reputation: 41

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

Upvotes: 4

Alex Objelean
Alex Objelean

Reputation: 4133

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.

Upvotes: -1

Related Questions