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.

Writing code snippets in wordpress without plugins

The other day I was trying to put some code snippets in a blog entry. At some point, without exactly understand how, I started a two days fight with the WordPress editor.

My blog is in wordpress.com. That means:

  • no plug-ins are allowed.
  • no access to functions.php.
  • no access to the theme’s style.css (It is available only to paying accounts and not to the free service.)

In addition WordPress tends to put tags like <p> and <br> when it feels like it. This is like going to war not only unarmed but naked too.

My requirements are simple but usually end up to frustrating battles.

  1. Code should not be wrapped. Scrollbar should show when required.
  2. Lines should wrap on enter.
  3. Spaces and tabs should honored and not collapsed.
  4. No extra <p> and <br> or any other automatic formatting should be generated.

Fragments of the solution includes:

  • overflow: auto; to enable the scrollbar
  • white-space: pre; to prevent wrapping on white space but allow line breaks. See here.
  • word-wrap: normal; Chrome and IE requires it at least for my theme.
  • line-height: 1; to convince your theme for a more compact code view. Vertical space matters.
  • margin-bottom: 0; if your theme has its own opinion on what constitutes valid typography.

Several solutions in the Internet mention the <code> tag. Let’s try it.

for (i=0; i < N; i++) {
printf("hello world\n"); /* comment should be several spaces away */
}

This has the following problems:

  • Violates requirement 3: It collapses spaces. Note that originally WordPress does not collapse spaces. However, as soon you switch to the WYSIWING editor you are toast. WordPress will collapse your spaces under your feet without noticing. Who could thought that?
  • Violates requirement 4:  WordPress, puts <br> for every enter in the original text resulting in ugly double lines of code.
  • IE Only: Violates requirement 1: It wraps texts on spaces. Who knows why?
  • It needs to be wrapped in a block element like <div> or <blockquote> otherwise the background is not painted properly.

Let’s try <pre> instead:

for (i=0; i < N; i++) {
          printf("hello world\n");        /* comment should be several spaces away */
}

 

This satisfies all requirements. WordPress does not add <br> tags and does not collapse spaces inside <pre>. Scrollbars appears when needed and no wrapping is taking place. Note that your code should start immediately after the <pre> tag if you don’t want weird empty lines in the top of your nice code.

Here is the magic HTML:

 <pre style="overflow: auto; background: black; color: white; margin-bottom: 0; line-height: 1; white-space: pre; word-wrap: normal;">for (i=0; i &lt; N; i++) {
          printf("hello world\n");        /* comment should be several spaces away */
}</pre>

You can check the other examples by viewing the source (Ctrl+U) in your browser or in your browser’s inspector (F12).

Hope that helps.