Source map clean-up with Cordova

Source maps are a very powerful way to support the debug process of HTML5-based web-apps. It actually maps the JS code to the higher level language (in this case Object Pascal). While this is very handy, especially in combination with obfuscation, it also reveals how the software is build internally. Thus you probably don’t want it to be shipped to customers.

Unfortunately, Smart Mobile Studio only create source maps, but never deletes them, if not used anymore. At the same time Cordova copies the entire content of the www folder (including the source map) to the assets and thus inherently ships these files to the customers when publishing the app. Once available it’s very easy to extract the files and reconstruct the entire source code of your application.

Typically you would handle the deletion of this in your build tool. However, since Cordova already contains a build tool, you might decide to use this instead of adding another tool to your toolchain.

With Cordova you can easily add hooks for many different commands. The command you’re probably looking for in this case is ‘after_prepare’. To add your script for this command, just create a folder named ‘hooks’ in the root of your project. Then add the ‘after_prepare’ folder to this ‘hooks’ folder. Now when either

• cordova prepare
• cordova platform add
• cordova build
• cordova run

has been executed all scripts in this folder are executed.

When we talk about scripts in the context of Cordova this obviously means JS. While you could copy & hack the script of choice from several places, you could also use Smart Mobile Studio to write your own script within minutes – in the language you love!

Custom Node.js hook script

To do so just start a new Node.JS project. You can delete everything you find in the template as it is not needed. Instead you might want to start with something like this:

uses
  NodeJS.Core, NodeJS.fs;

var fs := Jfs_Exports(RequireModule('fs'));

This makes the file system module available in the script. It is accessibly like an object by the variable ‘fs’.

Now deleting a folder could be as easy as:

fs.rmdirSync(Path);

but care has to be taken as you need to do this recursively. Also you must first unlink the directory as on some platforms (*nix based) it might not be a copy, but a (hard) link (and you might not want to delete the source maps all together, but only in the Cordova output).

Taking this into account, the recursive deletion of a folder can look like:

procedure DeletePathRecursive(Path: String);
begin
  if fs.existsSync(Path) then
  begin
    for var Dir in fs.readdirSync(Path) do
      if fs.lstatSync(Dir).isDirectory then
        deleteFolderRecursive(Dir)
      else
        fs.unlinkSync(Dir);

      fs.rmdirSync(Path);
  end;
end;

Now we only need to specify the paths and call this procedure with

var Paths = ['platforms/ios/www/debug', 'platforms/android/assets/www/debug'];

for var Path in Paths do
  DeletePathRecursive(Path);

In the end the entire source code should be something like this:

uses
  NodeJS.Core, NodeJS.fs;

var fs := Jfs_Exports(RequireModule('fs'));

procedure DeletePathRecursive(Path: String);
begin
  if fs.existsSync(Path) then
  begin
    for var Dir in fs.readdirSync(Path) do
      if fs.lstatSync(Dir).isDirectory then
        deleteFolderRecursive(Dir)
      else
        fs.unlinkSync(Dir);

    fs.rmdirSync(Path);
  end;
end;

var Paths = ['platforms/ios/www/debug', 'platforms/android/assets/www/debug'];
for var Path in Paths do
  DeletePathRecursive(Path);

If you compile this you should end up with a 4kB small JS script. Eventually you must add the

#! /usr/bin/env node

to the script in order to get it work. Alternatively you can specify a template in Smart Mobile Studio to add this at link time.

The JS script now only needs to be copied to the hooks/after_prepare folder. It will then be executed every time you call ‘cordova build’.