GWT SDM (Super Dev Mode) https setup in 7 steps

Introduction

This guide enables you to setup https support for GWT SDM which currently lacks. The guide was created after reading the comments in issue #7535 in github. GWT team may or may not deprecate bookmarklets which SDM currently depends on in order to trigger compilation.

The Guide

The steps required to realize such a setup are:

  1. Install and configure apache: https://wiki.debian.org/Self-Signed_Certificate
    I used the snake oil certificate that comes with Debian and accepted the security exception for the browser to trust the server.
  2. Enable proxy modules for apache
  a2enmod proxy
  a2enmod proxy_http
  a2enmod headers 
  1. Use this or something like this for /etc/apache2/sites-enabled/default-ssl.conf
<IfModule mod_ssl.c>
        <VirtualHost *:9877>
                ServerAdmin webmaster@localhost
                DocumentRoot /var/www/html

                ErrorLog ${APACHE_LOG_DIR}/error.log
                CustomLog ${APACHE_LOG_DIR}/access.log combined

                SSLEngine on
                SSLCertificateFile      /etc/ssl/certs/ssl-cert-snakeoil.pem
                SSLCertificateKeyFile /etc/ssl/private/ssl-cert-snakeoil.key
                <FilesMatch "\.(cgi|shtml|phtml|php)$">
                                SSLOptions +StdEnvVars
                </FilesMatch>
                <Directory /usr/lib/cgi-bin>
                                SSLOptions +StdEnvVars
                </Directory>

                ProxyRequests Off
                SSLProxyEngine On
                <Proxy *>
                        Order deny,allow
                        Allow from all
                </Proxy>
                ProxyPass / http://localhost:9876/
                ProxyPassReverse / http://localhost:9876/
                <Location />
                        ProxyPassReverse /
                        Order deny,allow
                        Allow from all     
                </Location>
                Header edit Location ^http://localhost:9876/ https://localhost:9877/
        </VirtualHost>
</IfModule>
  1. Override the CrossSiteIframeLinker
package com.google.gwt.core.linker;

import com.google.gwt.core.ext.LinkerContext;

public class HttpsCrossSiteIFrameLinker extends CrossSiteIframeLinker {
    @Override
    protected String getJsDevModeRedirectHookPermitted(LinkerContext context) {
        return "$wnd.location.protocol == \"http:\" || $wnd.location.protocol == \"file:\" "
                + "|| $wnd.location.protocol == \"https:\"";
    }
}
  1. Add this to you *.gwt.xml
<set-configuration-property name="devModeUrlWhitelistRegexp"
        value="http(s)?://(localhost|127\.0\.0\.1)(:\d+)?/.*"/>
<define-linker name="xsiframe"
        class="com.google.gwt.core.linker.HttpsCrossSiteIFrameLinker"/>
  1. Edit and change the compile bookmarklet from http://localhost:9876 to https://localhost:9877 or edit the bookmarklet accordingly to auto sense the protocol. The provided bookmarklet also compiles the first GWT module it founds. This works great as long you have several projects with one GWT module in each one. If you have multiple GWT modules per project you will need to resort to the official bookmarklet which hardwires the module name.
javascript:{
        var moduleIndex=0;
        var index = 0;
        var module_name;
        for (var key in __gwt_activeModules) {
                if (__gwt_activeModules.hasOwnProperty(key))
                        if (index === moduleIndex) {
                                module_name = key;
                                break;
                        }
                index++;
        }
        var https = window.location.protocol === 'https:';
        var server_url = (https) ? 'https://localhost:9877/' : 'http://localhost:9876/';
        window.__gwt_bookmarklet_params = {server_url:server_url, module_name:module_name};
        var s = document.createElement('script');
        s.src = server_url + 'dev_mode_on.js';
        void(document.getElementsByTagName('head')[0].appendChild(s));
}

In order to encode it you can use an on-line service such as

  1. Redeploy – and start compiling GWT scripts deployed in https server pages.

Final Thoughts

GWT team could streamline SDM https support by teaching bookmarklets to set everything up such as:

  • Allow https by default (step: 4 & 5)
  • Autosense the protocol (http or https) and redirect to the SDM compiler accordingly requiring no manual edit of the bookmarklet (step: 6)

As a final note I would like to add that with bookmarklets it is possible to

  • deploy and debug (one click cycle) in the production site. This is invaluable when the GWT module is a CORS enabled web app acting as widget.
  • with the help of ssh tunnels and RDP allow to compile/debug in various systems and mobile browsers such as:
    • Mac OS X
    • iphone linked with Mac OS X
    • Windows all borwsers,
    • Android browser linked to Windows Chrome

However bookmarklets may be deprecated. Their successor may be the -launcherDir option and Thomas Broyer’s dev-server. It is not entirely clear which option or combination will prevail.