PhpStorm gets Bower support

Bower.io support in PhpStormA good developer is a lazy developer, right? Thanks to PhpStorm and WebStorm sharing the IntelliJ IDEA platform, we had an easier job integrating support for Bower from our colleagues! Bower is a package manager for the web, which allows us to manage our project’s front-end dependencies such as Bootstrap, AngularJS, jQuery and many more. Let’s see how we can use it in PhpStorm!

To make use of Bower in our project, we have some first-time configuration steps to do:

  • Installing NodeJS and the NodeJS plugin
  • Install Bower

Installing NodeJS can be done by following the instructions on their website. We can enable the NodeJS plugin for PhpStorm through IDE Settings | Plugins, clicking the Install JetBrains Plugin… button and adding NodeJS to our IDE.

Next, we can install Bower by executing the npm install -g bower command or through Project Settings | Node.js and npm clicking Add. Search for bower and under options, enter --g to install the package globally. The Install button will download and install Bower. After installation, Bower will appear in the list of installed node packages.

Install Bower

Project dependencies can be specified in the bower.json file. We can generate one from the Terminal tool window (Tools | Open Terminal…) running bower init. Alternatively, we can create the file manually and add { "name": "project-name-goes-here" } as the contents.

To add new dependencies, select Project Settings | JavaScript | Bower, and then click the + button to search and install packages, or - to uninstall a package from our project.

Install Bower package

Of course, we can use the Terminal tool window to invoke the bower command line. For example, we can run bower install to install all dependencies specified in bower.json. Or we can simply bower list to see all dependencies we have defined.

Bower terminalwindow

Give the latest PhpStorm 8 EAP a try and let us hear your thoughts! All feedback is welcome through the issue tracker, by posting in the comments below, or in our forums!

Develop with pleasure!
– JetBrains PhpStorm Team

This entry was posted in Cool Feature and tagged , , , , . Bookmark the permalink.
  • Ramkosh

    Wow! It’s the very good news!
    Thanks.

  • http://www.dotmastaz.com Nicolas, dotMastaz

    Great great great for integrating bower and so dependencies !!
    Thanks for your work !!!

  • http://vw.com Barry

    I installed the packages as stated, but Bower is not showing up under the Javascript section in Project Settings. I am on 7.1.1

    Thanks!

    • Maarten Balliauw

      Hi Barry,

      This will only work with the latest PhpStorm 8 EAP.

      • http://vw.com Barry

        is the latest copy fairly stable? If I get it, will i only be able to use it for 30 days even though I have a subscription?

        • Blair

          EAP’s tend to be stable, although they contain by definition new stuff that might have bugs.

          You can only use the EAP for 30 days, however your regular installation stays there and you can continue using that as normal. You can also install new EAP’s when they are released.