Using Bower in WebStorm

Posted on by Ekaterina Prigara

WebStorm 8 includes integration with Bower, a package manager for the web. Bower allows you to manage your project’s front-end dependencies. You can read more about it on the project website at http://bower.io.

WebStorm helps you search and install new packages available through Bower’s registry in the IDE UI, as well easily update and delete packages.

Let’s have a look at a common workflow with Bower in WebStorm.

bower

To start using Bower in your project, first make sure it is installed globally on your machine. Bower depends on Node.js and can be installed using npm.

Run npm install -g bower in WebStorm built-in Terminal.
Alternatively, go to Preferences | Node.js and npm, and click Add. In the popup window, search for Bower, select Options, enter -g (to install the package globally), and then click Install.

bowerinstall

After the package is installed, Bower will appear in the list of your installed node packages.

Project dependencies are specified in the bower.json file in the project root.

If you would like to create a new bower.json file, you can run bower init command in the built-in terminal to generate it.
Alternatively, you can manually create a new file named bower.json (which should at least has a project name defined as { “name”: “my-project” }).

If you are working with a project that already has a bower.json file in it, then you would probably like to install all the dependencies specified in it. In the terminal run the command: bower install. The required packages will be downloaded to bower_components folder (by default).

If you’d like to add new dependencies to your project with Bower, go to Preferences | JavaScript | Bower. In the Bower executable, specify the path to Bower. Then, in bower.json input, specify the path to the bower.json file in your project.

Search for the package you need in Bower’s registry, and install it by simply clicking the ‘Install package’ button. WebStorm will automatically update your bower.json file and add this new dependency.

bowerpackageinst

You will also see the full list of packages that are already installed in the project. If you see a blue arrow, it means that a newer version of the package is available for download.

Comments below can no longer be edited.

22 Responses to Using Bower in WebStorm

  1. Herman says:

    May 23, 2014

    I’ve followed the steps up to the point where you click on the Bower Pane under Javascript. What does it imply if I don’t have Bower listed there, but I have it installed globally>

    • Herman says:

      May 23, 2014

      Ah, nevermind. I see its only available in Webstorm 8. That made me upgrade 😉

      • Ekaterina Prigara says:

        May 24, 2014

        Great 🙂

  2. Andreas says:

    October 10, 2014

    Webstorm has recognized the packages listed below. But it won’t let me add any new ones through the UI. It’s complaining about not being able to find/locate npm.
    I’ve installed node, npm, bower prior to evaluating webstorm and things work as expected when I use the linux shell.

    Now I’d like to teach webstorm use npm & bower a the paths staed below. Hope that is doable without too much pain.

    pwd
    /home/anda/.local/bin
    
     ls -go
    total 11332
    lrwxrwxrwx 1       40 okt  2 05:43 appium -> ../lib/node_modules/appium/bin/appium.js
    lrwxrwxrwx 1       47 okt  2 05:43 appium-doctor -> ../lib/node_modules/appium/bin/appium-doctor.js
    lrwxrwxrwx 1       47 okt  2 05:43 authorize_ios -> ../lib/node_modules/appium/bin/authorize-ios.js
    lrwxrwxrwx 1       35 okt  7 23:20 bower -> ../lib/node_modules/bower/bin/bower
    lrwxrwxrwx 1       39 okt  2 22:55 cordova -> ../lib/node_modules/cordova/bin/cordova
    lrwxrwxrwx 1       39 okt  8 00:36 grunt -> ../lib/node_modules/grunt-cli/bin/grunt
    lrwxrwxrwx 1       45 okt  4 00:01 grunt-init -> ../lib/node_modules/grunt-init/bin/grunt-init
    lrwxrwxrwx 1       41 okt  2 05:48 httpster -> ../lib/node_modules/httpster/bin/httpster
    lrwxrwxrwx 1       39 okt  7 22:55 karma -> ../lib/node_modules/karma-cli/bin/karma
    lrwxrwxrwx 1       35 okt  4 00:01 mocha -> ../lib/node_modules/mocha/bin/mocha
    lrwxrwxrwx 1       36 okt  4 00:01 _mocha -> ../lib/node_modules/mocha/bin/_mocha
    -rwxrwxr-x 1 11603628 okt  2 04:35 node
    lrwxrwxrwx 1       38 okt  2 04:35 npm -> ../lib/node_modules/npm/bin/npm-cli.js
    lrwxrwxrwx 1       45 okt  2 05:48 protractor -> ../lib/node_modules/protractor/bin/protractor
    lrwxrwxrwx 1       52 okt  2 05:48 webdriver-manager -> ../lib/node_modules/protractor/bin/webdriver-manager
    lrwxrwxrwx 1       29 okt  7 23:20 yo -> ../lib/node_modules/yo/cli.js
    
    • Sergey Simonchik says:

      October 10, 2014

      Well, that’s strange, because according to your list, npm and node files are located in the same directory. So npm should be located correctly. Please file an issue in the https://youtrack.jetbrains.com/issues/WEB#newissue with attached idea.log file (on the main menu Help | Show Log in …). Thanks.

  3. Ian says:

    November 14, 2014

    How do I get that theme?

    • Ekaterina Prigara says:

      November 14, 2014

      What theme are you referring to?

      • Ian says:

        November 16, 2014

        The theme that appears in the screen shots.

        • Ekaterina Prigara says:

          November 18, 2014

          It’s WebStorm default theme.

          • Ian says:

            November 20, 2014

            But my Webstorm looks black and grey.

        • Ekaterina Prigara says:

          November 20, 2014

          You can get back to the default theme in Preferences | Appearance & Behavior | Theme.

          • Ian says:

            November 21, 2014

            Great, thanks. No more ‘Darcula’ for now.

  4. Nikhil says:

    November 27, 2014

    I am getting that Please correct path to Node Interpreter,bower.io,bower executable

    • Ekaterina Prigara says:

      November 27, 2014

      Just make sure that you have valid path to the Node.js installation on your computer.

  5. Gregory Wexler says:

    July 28, 2015

    I’m getting
    An error occured installing package ‘bower’

    Details….

    Exit code: 243

    Standard error:
    npm ERR! tar.unpack untar error /Users/gregorywexler/.npm/bower/1.4.1/package.tgz
    npm ERR! Darwin 14.4.0
    npm ERR! argv “/usr/local/bin/node” “/usr/local/bin/npm” “install” “bower” “-g”
    npm ERR! node v0.12.7
    npm ERR! npm v2.11.3
    npm ERR! path /usr/local/lib/node_modules/bower
    npm ERR! code EACCES
    npm ERR! errno -13

    npm ERR! Error: EACCES, mkdir ‘/usr/local/lib/node_modules/bower’
    npm ERR! at Error (native)
    npm ERR! { [Error: EACCES, mkdir ‘/usr/local/lib/node_modules/bower’]
    npm ERR! errno: -13,
    npm ERR! code: ‘EACCES’,
    npm ERR! path: ‘/usr/local/lib/node_modules/bower’,
    npm ERR! fstream_type: ‘Directory’,
    npm ERR! fstream_path: ‘/usr/local/lib/node_modules/bower’,
    npm ERR! fstream_class: ‘DirWriter’,
    npm ERR! fstream_stack:
    npm ERR! [ ‘/usr/local/lib/node_modules/npm/node_modules/fstream/lib/dir-writer.js:35:25’,
    npm ERR! ‘/usr/local/lib/node_modules/npm/node_modules/mkdirp/index.js:47:53’,
    npm ERR! ‘FSReqWrap.oncomplete (fs.js:95:15)’ ] }
    npm ERR!
    npm ERR! Please try running this command again as root/Administrator.

    npm ERR! Please include the following file with any support request:
    npm ERR! /Users/gregorywexler/WebstormProjects/test2/npm-debug.log

    • Ekaterina Prigara says:

      July 29, 2015

      Please follow the suggestion in this npm error message and
      >> npm ERR! Please try running this command again as root/Administrator.

  6. William Rowsell says:

    August 26, 2015

    When trying to install packages under bower I get this error?

    stderr:
    bower angular#~1.4.0 ENOGIT git is not installed or not in the PATH

    Whats wrong?

  7. Hadnet says:

    February 8, 2016

    Webstorm 11 has a problem showing bower packages. When a click to see Available Packages it doesn’t show any yet it keeps “loading” without never ends. When open my Activity Monitor (Mac Os X) I see that “bower” is consuming 95% of CPU. Because never ends, I kill the process and this message shows up:

    Failed to run “bower search –json” to list all bower packages:
    Exit code of “/usr/local/bin/node
    /usr/local/bin/bower search –json’is 143. Stdout:

    stderr