Search code examples
cssmavengwtpolymer

Lose style when package gwt client code

I have created a website using GWT, which consists entirely of client code. The .gwt.xml file is:

<?xml version="1.0" encoding="UTF-8"?>
<!--
  When updating your version of GWT, you should also update this DTD reference,
  so that your app can take advantage of the latest GWT module capabilities.
-->
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.8.1//EN" "http://gwtproject.org/doctype/2.8.1/gwt-module.dtd">
<module rename-to='arithmeticexercisegeneratorclient'>
  <!-- Inherit the core Web Toolkit stuff.                        -->
  <inherits name='com.google.gwt.user.User'/>
  <inherits name='com.google.gwt.json.JSON'/>

    <!-- Inherit the default GWT style sheet.  You can change       -->
  <!-- the theme of your GWT application by uncommenting          -->
  <!-- any one of the following lines.                            -->
  <inherits name='com.google.gwt.user.theme.standard.Standard'/>
  <inherits name="com.vaadin.polymer.Elements"/>

  <!-- Other module inherits                                      -->
  <inherits name='com.github.nmorel.gwtjackson.GwtJackson'/>

  <!-- Specify the app entry point class.                         -->
  <entry-point class='com.onelostlogician.generator.exercise.arithmetic.client.ArithmeticExerciseGeneratorClient'/>

  <!-- Specify the paths for translatable code                    -->
  <!--<source path='client'/>-->

  <!-- allow Super Dev Mode -->
  <add-linker name="xsiframe"/>
</module>

When I run the application in devmode (mvn clean war:exploded gwt:devmode), it looks as I expect it:

enter image description here

But when I package the code, and take open the resulting webpage in a browser, it loses all its styling/formatting:

enter image description here

The base html file is

<!doctype html>
<html>
<head>
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
  <link type="text/css" rel="stylesheet" href="ArithmeticExerciseGeneratorClient.css">
  <script type="text/javascript" src="arithmeticexercisegeneratorclient/arithmeticexercisegeneratorclient.nocache.js"></script>
</head>
<body>
  <div id="clientContent"></div>
  <noscript>
    <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
      Your web browser must have JavaScript enabled
      in order for this application to display correctly.
    </div>
  </noscript>
</body>
</html>
Solution

  • Easy (but unlikely answer) your browser has something strange cached, try to do a Ctrl+F5 and see if that fixes it.

    Then check the network panel if you see any 404 error, in that case you have found the missing piece of the puzzle.

    Finally you can do a "mvn clean package" and then dig into the WAR to figure out where is the missing CSS you are looking for.

    EDIT:

    You found the mischief!

    The issue is in that file://; access those files via HTTP(s) and everythong will work.

    To do a quick test you can either simply upload the files in a server; or create a quick and dirty local server with php -S ... (docs).