Using Bower in WebStorm

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

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.


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.


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.


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.

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Tutorials and tagged , . Bookmark the permalink.

22 Responses to Using Bower in WebStorm

  1. Herman says:

    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>

  2. Andreas says:

    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.

  3. Ian says:

    How do I get that theme?

  4. Nikhil says:

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

  5. Gregory Wexler says:

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


    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

  6. William Rowsell says:

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

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

    Whats wrong?

  7. Hadnet says:

    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:


Leave a Reply

Your email address will not be published. Required fields are marked *