How can i make my CSS reload on page refresh? gwt maven - maven

Question

Here is the project i'm working on: https://github.com/veracityidinc/idf-sandbox
I'm a front end dev so this is all a bit unclear to me.
I looked at the build log to try to figure after of course consulting google, and i see people saying stuff about a plugin and copying files. It just seems very weird to me that a web project - be it whatever kind - doesn't do this out of the box. It is very tedious to have to close and run the server any time i make a change. Also very weird that the html part of the app actually does this on its own.

Answer 1

GWT only deals with JS (and assets directly loaded by the code through special code constructs), not the other web assets.
DevMode (mvn gwt:run with Mojo's plugin) will serve your webapp, and Mojo's plugin will additionally copy the src/main/webapp on launch. If you want to update your web assets without restarting the DevMode, run mvn war:exploded -Dgwt.compiler.skip. And similarly for resources (in src/main/resources): run mvn process-resources.
This is also one good reason to adopt a different project layout, separating client and server code into distinct Maven modules, and running client and server code separately too (mvn gwt:codeserver for client code, through the net.ltgt.gwt.maven:gwt-maven-plugin, and mvn jetty:run or similarly for server code and web assets)

Answer 2

Using GWT SDM -Super dev mode- you will get this out of box, the SDM will keep running i the background and watch for files modified and upon refresh it will incrementally recompile your app and reload resources.
if you are using maven to get SDM to work you need to create a GWT project and apply the maven plugin, the recommended plugin is the tbroyer plugin and to create a GWT project that already configured correctly out of the box you can use the tbroyer multi module gwt-maven-archetype.
following the instructions from the archetype when you issue the command
mvn gwt:codeserver -pl *-client -am you are actually starting the SDM. the other command is starting your application server.
the generated project has a xxx-server module in which you can find a css file. once you run both commands and can load your application in the browser try to change some styles in that file and refresh the page, the changes should be reflected.
this is a sample plugin configuration when generating a project from the archtype
<plugin>
<groupId>net.ltgt.gwt.maven</groupId>
<artifactId>gwt-maven-plugin</artifactId>
<configuration>
<moduleName>[replace this with your module]</moduleName>
<moduleShortName>app</moduleShortName>
</configuration>
</plugin>
now if you are not using this multi module structure you might try the start the application and the SDM using mvn gwt:devmode this should start the SDM for you
and if you are using uibinder, and you are editing styles in the *.ui.xml files when the SDM recompiles it should also pick the changes.
Edit
Checking on your project i made some changes to make it work.
first i changed the pom.xml, you can use my version for later projects but i think the better way is the generate a project using tbroyer archetype
The pom
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.candorgrc.idfusion</groupId>
<artifactId>idf-sandbox</artifactId>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>IdFusion™ Sandbox</name>
<properties>
<!-- Setting maven.compiler.source to something different to 1.8 needs
that you configure the sourceLevel in gwt-maven-plugin since GWT compiler
2.8 requires 1.8 (see gwt-maven-plugin block below) -->
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<inject.gin.version>2.1.2</inject.gin.version>
<inject.guice.version>3.0</inject.guice.version>
<libsass.version>0.2.10-libsass_3.5.3</libsass.version>
<lesscss.version>1.7.0.1.1</lesscss.version>
<elemental2.version>1.0.0-RC1</elemental2.version>
</properties>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>com.google.gwt</groupId>
<artifactId>gwt</artifactId>
<version>2.8.2</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
<dependencies>
<dependency>
<groupId>com.google.gwt</groupId>
<artifactId>gwt-servlet</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>com.google.gwt</groupId>
<artifactId>gwt-user</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.google.gwt</groupId>
<artifactId>gwt-dev</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.google.elemental2</groupId>
<artifactId>elemental2-dom</artifactId>
<version>${elemental2.version}</version>
</dependency>
<dependency>
<groupId>com.google.gwt.inject</groupId>
<artifactId>gin</artifactId>
<version>${inject.gin.version}</version>
</dependency>
<dependency>
<groupId>com.google.inject</groupId>
<artifactId>guice</artifactId>
<version>${inject.guice.version}</version>
</dependency>
</dependencies>
<build>
<!-- Output classes directly into the webapp, so that IDEs and "mvn process-classes"
update them in DevMode -->
<outputDirectory>${project.build.directory}/${project.build.finalName}/WEB-INF/classes</outputDirectory>
<plugins>
<!-- GWT Maven Plugin -->
<plugin>
<groupId>net.ltgt.gwt.maven</groupId>
<artifactId>gwt-maven-plugin</artifactId>
<version>1.0-rc-8</version>
<executions>
<execution>
<goals>
<goal>compile</goal>
</goals>
</execution>
</executions>
<configuration>
<moduleName>com.candorgrc.idfusion.sandbox.IdfSandbox</moduleName>
<moduleShortName>IdfSandbox</moduleShortName>
<failOnError>true</failOnError>
<!-- GWT compiler 2.8 requires 1.8, hence define sourceLevel here if
you use a different source language for java compilation -->
<sourceLevel>1.8</sourceLevel>
<warDir>${project.build.directory}/${project.build.finalName}</warDir>
<classpathScope>compile+runtime</classpathScope>
<!-- URL(s) that should be opened by DevMode (gwt:devmode). -->
<startupUrls>
<startupUrl>sandbox.html</startupUrl>
</startupUrls>
</configuration>
</plugin>
<plugin>
<groupId>org.lesscss</groupId>
<artifactId>lesscss-maven-plugin</artifactId>
<version>${lesscss.version}</version>
<configuration>
<sourceDirectory>${project.basedir}/src/main/webapp/less</sourceDirectory>
<outputDirectory>${project.basedir}/src/main/webapp/less</outputDirectory>
<compress>true</compress>
</configuration>
<executions>
<execution>
<goals>
<goal>compile</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
you will also need to create a new package on the same level as the client package and name it public this is the default public resource used by gwt. this should go in the src folder com.candorgrc.idfusion.sandbox.public then move your css file sandbox.css into this package.
once you do these changes you will be able to reload the css when you refresh the page as long as your IDE knows that the css is changed and it should move it to the correct location in the target folder.