{"id":1685,"date":"2016-02-05T01:59:16","date_gmt":"2016-02-04T20:29:16","guid":{"rendered":"http:\/\/judepereira.com\/blog\/?p=1685"},"modified":"2016-02-05T01:59:16","modified_gmt":"2016-02-04T20:29:16","slug":"compile-less-on-the-fly-for-your-exploded-war-in-intellij","status":"publish","type":"post","link":"https:\/\/judepereira.com\/blog\/compile-less-on-the-fly-for-your-exploded-war-in-intellij\/","title":{"rendered":"Compile LESS on the fly for your exploded WAR in IntelliJ"},"content":{"rendered":"

At CleverTap, we’ve recently started using LESS for dynamic CSS. While it has it’s upsides, the biggest downside\u00a0was that most of our developers couldn’t use the hot deploy feature for their local deployments.<\/p>\n

After an hour or so, we came up with a neat solution.<\/p>\n

 <\/p>\n

There are two parts to this:<\/p>\n

    \n
  1. Just before deploying the app into the web container, compile all the LESS files within the exploded artifact output directory<\/li>\n
  2. Have the File Watcher plugin re-compile a modified LESS file within the IDE, and copy it over to the artifact output directory<\/li>\n<\/ol>\n

    Both parts above utilize a\u00a0bash script (since everybody uses a Mac for development, it’s cool).<\/p>\n

    Prerequisites:<\/h2>\n
      \n
    1. The LESS compiler – can be installed using npm (npm install -g less). If you don’t have the Node Package Manager, just search on how to install it (most likely you’d use Homebrew)<\/li>\n
    2. Install the File Watcher plugin in IntelliJ\n
        \n
      1. Go to\u00a0Preferences in IDEA, then to Plugins<\/li>\n
      2. Hit the “Install JetBrains plugin…” button, and search for “file watchers”.<\/li>\n
      3. Install the plugin and restart the IDE<\/li>\n<\/ol>\n<\/li>\n
      4. A run configuration that is configured to deploy an exploded WAR (can be either Tomcat\/Jetty\/anything)<\/li>\n
      5. Knowing where your exploded artifact resides (in my case, it is \/Users\/jude\/developer\/WizRocket\/out\/artifacts\/Dashboard_war_exploded). If you don’t know how to get this, follow these steps:\n
          \n
        1. Go to File -> Project Structure<\/li>\n
        2. Click on Artifacts (in the left menu)<\/li>\n
        3. Select your exploded WAR artifact<\/li>\n
        4. On the right, you’ll see the output directory<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n

          Part 1: Compile the LESS into CSS just before deployment<\/h2>\n

          Copy the following script and save it as\u00a0\/Users\/username\/bin\/lessc-idea:<\/p>\n