Getting WebStorm External Tools To Work On Mac OS X

April 14, 2013 — 11 Comments

Recently I was trying to setup some external tools on WebStorm (Mac OS X) for Grunt and NPM, and I kept getting errors similar to the following:

Error running install:
Cannot run program “npm” (…): error=2, No such file or directory

On my windows setup it all worked perfectly, however, on OSX it refused to work. After some googling, I was eventually able to get it to work by following the instructions found in the comments of an issue on the WebStorm issue tracker entitled: ‘WI-10333 Unable to add npm to command line tool support‘. The experience though was not straightforward. This was partly due to the link hopping that resulted from searching for answers in the comments of the issue, as well as partly due to my inexperience with MacOSX and UNIX systems in general. Hence, my aim with this post is to detail the steps I took in solving the problem with the hope of saving others like myself the hassel.

The Problem

The problem results from GUI applications on MacOSX not using the same environment variables as those used by the terminal. As a result, the ‘npm’ command does not work when run from WebStorm, due to the ‘node’ path not being in the ‘PATH’ environment variable that WebStorm is looking at, even though it is in that of the terminal.

The Solution

A quick solution is to simply open WebStorm from the terminal using the following command:

Once WebStorm has been opened from the command line, external tools work as expected. If you don’t like the idea of opening WebStorm from the command line, however, then you would have to do the following:

Firstly, close WebStorm if it is currently open. Then add the following entry to the ‘/Applications/Webstorm.app/Contents/Info.plist’ file.

[Your Path Value] should be replaced with the value of your system path (assuming, you can already run the relevant command from the terminal… i.e., npm, grunt etc.,). Note that the system path can be retrieved using the following terminal command:

This command simply retrieves the ‘PATH’ value from ‘~/.MacOSX/environment.plist’.

Now refresh the updated Info.plist file from the terminal using the following command:

External tools should now also work when WebStorm is not launched from the terminal.

Now if you are having trouble updating the raw XML in the ‘/Applications/Webstorm.app/Contents/Info.plist’ file, then continue reading to see how you can update the file using xcode’s plist editor.

Using XCode To Update The Info.plist File

The Info.plist file should open by default with xcode if xcode is installed. You can quickly open the file by using the following terminal command:

Your opened ‘Info.plist’ file should look something like this.

webstorm-info-plist

Start by adding a new child entry of the ‘Information Property List’ entry with a key of ‘LSEnvironment’ and a type of ‘Dictionary’. To do this, right click on ‘Information Property List’ and select ‘Add Row’. Then enter the relevant information. Once complete, the new entry will show up with a key of ‘Environment variables’:

webstorm-plist-env-path-1

Next, under the ‘Environment variables’ entry, add a child entry with a key of ‘PATH’, a type of ‘String’ and a value that is equivalent to your system path value. The system path can be retrieved using the following terminal command:

Now it is important that you expand the ‘Environmental variables’ entry (i.e., ensure that the arrow on the right is pointing downwards) before right clicking to add the child entry. Not doing so may cause the new entry to not be a child of ‘Environment variables’ but to instead be on the same level. The child ‘Path’ entry should now look as follows:

webstorm-plist-env-path-2

Finally, save the plist file and then do a refresh using the following terminal command:

All should now work as expected when WebStorm is restarted.

TwitterFacebookGoogle+LinkedInDiggRedditStumbleUponEmail

Ifeanyi Isitor

Posts Twitter Google+

I'm a web application developer / independent contractor, currently residing in London.
  • Pingback: Getting WebStorm External Tools To Work On Mac ...

  • janwidmer

    Hi Ifeanyi,

    In your Post.you wrote that the setup in Windows was easy and worked perfectly. I am using phpstorm on windows and i am trying to setup Grunt by using the external command line tools of php storm.. I created an external command, but when I start it, I always get the error:

    > grunt
    Cannot run program “grunt” (in directory “C:Usersjawidmerworkspacesprojectname”): CreateProcess error=2, The system cannot find the file specified

    Could you give me some directions or how I should configure the external run command?

    Thanks for your help

    Jan

  • Laurent Roger

    Works fine for me with open -a webstorm. Thx !

  • Pingback: PhpStormからGruntを実行する | Re* Programming

  • Nikko Patten

    THANK YOU SO MUCH!

  • Pingback: Haciendo que funcionen las External Tools de PhpStorm/WebStorm en OSX | Satisfaction

  • Henry Morgan

    Thanks a lot!

  • Sergey Simonchik

    The issue is fixed in WebStorm 7 and PhpStorm 7: http://youtrack.jetbrains.com/issue/IDEA-99154 . There is no need to adjust environment variables or launch IDE from Terminal anymore!

    • ifeanyiisitor

      I recently installed webstorm 7 and can confirm that I’m still getting this issue.

  • Steve

    You’re able to set the PATH variable under IDE Settings -> Path Variables. Just create a new Key named PATH and add as Value the output from echo $PATH (OSX and intellij ide13.1)