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.
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.
Subscribe to WebStorm Blog updates
