Make Javascript apps environment-aware

When writing client apps, we usually need to connect to the data server. However, this connection is typically different for production and test environments. This post describes a simple way I’ve come up with to solve this little problem.

The client scripts are expecting to read in the environment somehow. A JS file reads it in as some variable say:

   var env;

Okay, the client read in the configuration from a config file that we access using jQuery like so:

  var env;
  $.getJSON( 'config.json', function( json ) {
    env = json;
  });

 And in the configuration file, is a JSON structure for example:

   file: config.json
  {
    data_server : 192.168.1.31:4005
  }

However, that value is different for different deployment environments. So let’s say we save all the different configurations in another file e.g:

  file: config_all.json
  { 
    TEST : { data_server : 192.168.1.31:4005 },
    PROD : { data_server : 192.168.1.31:3005 }
  }

And we’ll need a simple script that can generate the config.json from the config_all.json file. Something like:

  $ configure_env PROD
  or
  $ configure_env TEST

From a project directory standpoint, the config.json file needs to be accessible within the browser while the config_all.json file should be outside. So we end up something like the following structure: 

  project/tools/configure_env
  project/tools/config_all.json
  project/www/js/config.json

Here’s a simple implementation of configure_env in perl:

  #!/usr/bin/env perl

  use strict;
  use warnings;
  use Path::Tiny qw/path/;
  use JSON;

  my $env = $ARGV[0] || 'TEST';   # Defaults to TEST environment
  my $source_file = 'tools/config_all.json';
  my $target_file = 'www/js/config.json';

  my $config_all = decode_json path($source_file)->slurp();
  path($target_file)->spew(encode_json $config_all->{$env});

Now, whenever we need to add an environment-specific value, we just open up config_all.js and put in the value we need and on the client, it becomes accessible.

Javascript - Unit Testing (with Jasmine) on a browser

This post is about unit testing Javascript using Jasmine using a browser.

1. Get Jasmine here.
2. Download and unpack -- mine is in ~/app/jasmine
3. Project directory should be something like:

4. Edit the SpecRunner.html file to include the source files and the test files:

5. The test file should not run the "require" code:

6. Run the tests by viewing on the browser:

Done.

To run tests on nodejs instead of via a browser, see this earlier post.

Javascript - Unit Testing (with Jasmine) using NodeJS

Here's how to implement unit testing (with Jasmine and Node) for a class defined earlier:

Source files in subfolder "src" and test files in subfolder "spec". All test files must end with ".spec.js". Execute the test like so:

Done.

To run tests via a browser instead, see this other post.

Javascript - Inheritance

Below is a diagram that summarizes how inheritance is implemented in Javascript:

This came from the Udacity course on OO Javascript by the way. Compare this against the Perl version of inheritance.

See this post on how to unit test the classes above.