PhpStorm gets Bower support

Maarten Balliauw

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

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.

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.

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

Subscribe to PhpStorm Blog updates

Subscribe form

By submitting this form, I agree to the JetBrains Privacy Policy Notification icon

By submitting this form, I agree that JetBrains s.r.o. ("JetBrains") may use my name, email address, and location data to send me newsletters, including commercial communications, and to process my personal data for this purpose. I agree that JetBrains may process said data using third-party services for this purpose in accordance with the JetBrains Privacy Policy. I understand that I can revoke this consent at any time in my profile. In addition, an unsubscribe link is included in each email.

Submit

Thanks, we've got you!