Menu icon Foundation
Using foundation with java backend

Hi All,

I'm new to foundation and would like to use it as a front end for java web apps. Can anyone describe the best/recommended way to incorporate it into something like spring mvc or java web apps in general? Thanks in advance.

Tom.

Javaweb apps

Hi All,

I'm new to foundation and would like to use it as a front end for java web apps. Can anyone describe the best/recommended way to incorporate it into something like spring mvc or java web apps in general? Thanks in advance.

Tom.

Niddler Monkeybird over 5 years ago

So, I guess this is just a "No" then?

Saurabh over 5 years ago

I have integrated foundation 5 into a java spring mvc eclipse project using maven. So the answer is, yes it can be done.

The broad steps are as follows (and you can change things according to your project).

1) Install foundation and all its dependencies as given in the getting started page (using sass).

2) Use the command line and change to your project root ${project.dir}

cd ${project.dir}
foundation new foundation-src # create the foundation project called foundation-src

Now the real fun
3) Using the maven war plugin package the generated css and js files generated by foundation.

 <plugin>
          <groupId>org.apache.maven.plugins</groupId>
          <artifactId>maven-war-plugin</artifactId>
          <version>2.4</version>
          <configuration>

          <webResources>
            <resource>
              <directory>foundation-src</directory>
              <filtering>true</filtering>
              <targetPath>r</targetPath>
              <includes>
                <include>stylesheets\**</include>
              </includes>
            </resource>
            <resource>
              <directory>foundation-src</directory>
              <filtering>true</filtering>
              <targetPath>r\lib\foundation</targetPath>
              <includes>
                <include>bower_components\foundation\js\**</include>
              </includes>
            </resource>
          </webResources>
          </configuration>
      </plugin>

The above does 3 things
a) Tells maven to use ${project.dir}/foundation-src as a web resource
b) Tells maven to include all files and subfolders under foundation-src/stylesheets in the war
c) Tells maven to include all files and subfolders under "bower_components\foundation\js\ into the war"

VERIFY IF THIS IS WORKING.
a) Create a sass file under foundation-src/scss directory
b) Run compass compile in foundation-src

command> cd ${project.dir}/foundation-src
command> compass compile

c) Verify your scss was successfully converted to css in the stylesheets directory.

d) Run mvn compile from your project root
command> cd ${project.dir}
command> mvn compile

e) Check if the css files and js files from foundation made it into your maven target folder.

4) Using the maven-antrun plugin, automate generation of scss-> css during compile phase

maven-antrun-plugin

    <version>1.7</version>
    <executions>
      <execution>
        <id>scss-to-css</id>
        <phase>compile</phase>
        <goals>
          <goal>run</goal>
        </goals>
        <configuration>
          <target>
            <echo message="Run compass compile for ${os.name}" />
            <!--  
              On windows, cannot run compass compile directly  error No such file or directory
              To circumvent this, 
              a) we created compass-compile.bat that contains the compass compile command
              b) we call this batch file from here
            -->
            <exec executable="cmd"
              dir="${project.basedir}/foundation-src" failonerror="true"
              osfamily="windows">
              <arg line="/C compass-compile.bat" />
              <!-- <arg line="/C scons" /> <arg value="-j4" /> /j4 on windows?  -->              
            </exec>

            <exec dir="${project.basedir}/foundation-src"
              executable="compass" failonerror="true" osfamily="unix">
              <arg line="compile" />
            </exec>

          </target>

        </configuration>

      </execution>
    </executions>
  </plugin>

The above maven plugin executes "compass compile" from inside your foundation-src directory everytime the project is compiled.

Thats it. Now update your scss file or create a new scss file.
Run mvn compile from under your project root and verify the css files are present
Run mvn package from under your proejct root and package your application.

This is not a perfect solution yet as I have only tested this on windows. On other platforms you will have to fix the maven antrun plugin config above to get the command right.

The other thing that is less than perfect is that the integration with eclipse is still a bit annoying. You have to clean-build-refresh after every scss change. You might have to experiment with the phase config in the antrun plugin. I have set it to run on compile, maybe thats not the best phase to perform this at.

Hope this helps,
Saurabh

jaime colins over 2 years ago

I am interested in this type of setup as well. I am familiar with using JSF/JAVA/SPRING/SQL but i would like to replace the JSF part with foundation 6 if possible.

Just wondering if you got it working after?