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
<br /><br />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


SSLOptions +StdEnvVars

ProxyRequests Off
SSLProxyEngine On
Order deny,allow
Allow from all
ProxyPass / http://localhost:9876/
ProxyPassReverse / http://localhost:9876/

ProxyPassReverse /
Order deny,allow
Allow from all

Header edit Location ^http://localhost:9876/ https://localhost:9877/


  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
<br /><br />
  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.