Manage your application build with Grunt


It can be tricky to manage your web application build. A typical website has css, less, html, image, and js files at minimum. In order to speed up page-load times, these various files are often minified and concatenated. As a developer, it's tedious and time-consuming to to manually post-process each of these files for production.

Node and Grunt combine to make this process much easier. Node is a JavaScript runtime environment, and Grunt is a command line build tool that runs in the Node environment. Grunt uses plugins to accomplish various tasks like minifying, concatenating, and linting. Each plugin does one thing, and there are literally thousands of plugins to choose from.

Instlling Node and Grunt

The installation documentation for both Node and Grunt are both excellent, so instead of rehashing here, we'll just point you to those sites.

First, install Node by following the instructions on the Node Installation Page. This will install the Node Package Manager (npm) as well.

Then follow the instructions on the Grunt Getting Started Page to install the Grunt Command Line Interface (CLI), install Grunt, create a Grunt project, and create a Grunt File.

Customize Your Grunt build

If you followed the instructions above, you'll have a file named gruntfile.js in your project folder. This is a configuration file that tells Grunt which plugins to run. Browse the Grunt Plugins to find plugins for tasks you'd like to run, chances are there is an existing plugin for it.

A Simple Gruntfile

The code below represents a simple Grunt file that will concatenate three files into one using the grunt-contrib-contact plugin, and then minify that file using the grunt-contrib-uglify plugin.


module.exports = function (grunt) {
    'use strict';

      concat: {
        dist: {
          src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
          dest: 'src/combined.js',
      uglify: {
        my_target: {
          files: {
            'dest/output.min.js': ['src/combined.js']

  grunt.registerTask('default', ['concat', 'uglify']);

It's easy to initiate the processing of a Gruntfile. Just type 'grunt' on the command line and grunt will will execute the steps defined in gruntfile.js.

Integrate Grunt into Your Workflow

As you become more familiar with Grunt, you'll want to integrate more Grunt Plugins into your workflow. It will take slightly more effort up-front, but the payoff will be worth it as you'll need fewer steps to generate production-ready code, your site will be faster, and your code cleaner.

Django NonRel: The solution for running Django with Google App Engine's Datastore

Django is a robust Python framework for building web applications. It has built in support for common tasks such as authorization and authentication, form validation, routing, templating, and an admin interface. It natively supports relational databases like Oracle Database, Microsoft SQL Server, MySQL and others.

Google App Engine is a PAAS (platform as a service) that allows you to get your site up and running quickly. It takes away many of the pain points associated with configuring your own server infrastructure. And it scales effortlessly as your traffic and database grow. But it's native database, Datastore, is a NoSQL database so it's not compatible out of the box with Django.

So how do you marry the two? Django NonRel. Django NonRel is a fork of the open source Django project that adds support for NoSQL databases like App Engine's Datastore and MongoDB. The project is so well done, that Google documents itas the solution to running Django on App Engine. The community owes a huge debt to the folks at All Buttons Pressed who took the lead on this project. The setup is not trivial, but once you've done it once, it's easily replicable to other projects.


Google App Engine Tip 1: How to reproduce your production datastore locally

Note: this post refers to the Python version of Google App Engine

Google App Engine provides a developers an efficient platform for building highly scalable applications and deploying to the cloud.  Underpinning the scalability of the datastore is BigTable, a proprietary data storage system that distributes data across many  machines.

Google provides a local development environment for building and testing sites on your machine before deploying to the cloud for production.  This local environment simulates the BigTable datastore, but it's not exactly the same.  So if you need to test your site locally using the data from the production site, you can't simply copy a single file from the cloud to your development machine.

Fortunately, the App Engine SDK provides a Python command file for interacting with App Engine, You can pull the entire contents of the production datastore to your local machine with a command like this: download_data --application=s~your-app-id --url= --filename=backup1

That will create a file on your local machine named backup1.  This is a slow process that may take several minutes to several hours depending on the amount of data, so you'll want to have something else to work on while that command runs. 

When the download is complete, you can load that file to your local development environment with  a command like this: upload_data --application=dev~your-app-id--url=http://localhost:8000/_ah/remote_api --filename=backup1 --num_threads=1

Once again be patient, depending on the amount of data, this command might also take a long time.  But the reward is worth the wait, because when your finished you'll have an exact copy of your production data, perfect for testing and debugging issues that only pop up on your production data.