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 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.

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.

14 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.io,bower executable

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">