Setting up Webpack + Babel + ReactJS

I started using Webpack module bundler recently and thought I would document some of my learning. In the past couple of posts I wrote about bundling JavaScript projects using Browserify module bundlers. Webpack can be used as a replacement for Browserify; but it has some nice additional features like bundling of static files and code splitting.

This post is not meant to be tutorial on Webpack, I just wanted to describe how to configure Webpack, specifically using Webpack loaders for Bablel and ReactJS. I will show how to build a JS project using standalone Webpack and also using Webpack APIs in Gulp. The project is available on Github at

Module Dependencies

Node packages required to build the project are, of course, in package.json. If you are using above starter project from Github, then run ‘npm install’ to install all the required packages. Else make sure you install all the packages listed in devDependencies of package.json . The list contains babel, required babel presets for ES6 and ReactJS, webpack and webpack-dev-server, webpack loaders for babel, LESS and CSS.

Webpack Configuration

Webpack configuration is specified in webpack.config.js. This config file is read when you run webpack or webpack-dev-server command. Optional gulpfile.js (to build the project using Gulp) also loads this file and passes to Webpack APIs.

Here is a brief description of some of the entries in the config file – Continue reading “Setting up Webpack + Babel + ReactJS”

My Experience of building UI of CFSummit2013 mobile app

I am back to writing blog after a gap of nearly two months. Past few weeks had been very busy working on new features of ColdFusion and creating a mobile app for CFSummit2013 . I along with my colleagues Asha and Rakshith had been working on this app for nearly a month, though not necessarily full time. There were two main reasons for building the app 1. to use mobile features of next ColdFusion releases to provide feedback and catch bugs 2. to create a useful app for the attendees of CFSummit.

I don’t know if attendees would find the app useful (I certainly hope so), but we were able to provide a lot of valuable feedback on ColdFusion mobile features and catch many bugs. The application took more time than it should have, because the mobile features of ColdFusion were still under developement. We would hit a bug and would have to wait (if it was a blocking issue) till it got fixed. In many case we did try to work around issues. But the whole process took a lot more time.

But this post is not about mobile features of ColdFusion and how they were used in the CFSummit app. I am going to talk about my experience in creating HTML5 UI for this app, the issues we faced and lessons learnt. Some of the UI issues are still unresolved.

Along with new mobile features of ColdFusion, this app is developed using JQuery, Bootstrap3, PathJS, JQuery Raty, Cordova (PhoneGap) and PhoneGap Build.

Continue reading “My Experience of building UI of CFSummit2013 mobile app”

Simple Drag&Drop with JavaScript, JQuery

I am working on an application that requires Drag & Drop functionality in a web page with images. First I thought I would implement this using JQuery UI, because I had used it earlier and it makes DnD very easy. But then I thought it may not be too difficult to implement it myself. As it turned out, it is not really very difficult. Here is a simple demo of that implementation.

There are two Divs in this demo, one containing image thumbnails and the other is a drop target for images. Drag and drop image thumbnails on the target Div. The original image would be added to the Div.You can then move images within this Div. If you drag and drop it anywhere outside the div, the drop operation is cancelled and image is removed.
Continue reading “Simple Drag&Drop with JavaScript, JQuery”