Bower is 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. IntelliJ WebStorm provides integration with Bower’s registry. You can search and install packages directly in the IDE, as well as easily update and delete packages.
Prerequisits
To start using Bower in your project, first make sure it is installed on your machine. Bower depends on Node.js, npm and Git. See this post for installation instructions.
Configuring IntelliJ WebStorm
Run the following command in WebStorm’s built in terminal:
npm install -g bower
Or alternatively:
- Go to Preferences | Node.js and npm
- Set the location of the Node.js executable, i.e. C:\Program Files\nodejs\node.exe. After entering the location of the Node.js executable, Bower should be listed under the packages.
- Click OK
Setup project for Bower
Follow these steps to configure Bower for your project:
- Choose File | Settings
- In the Settings dialog type JavaScript
- Search for the entry Bower and click it
- Enter the following information:
- Location of the Node.js executable, i.e. C:\Program Files\nodejs\node.exe
- Location of the Bower executable, i.e. C:\Users\<username>\AppData\Roaming\npm\bower.cmd
- Location of the Bower manifest file of your project, i.e. C:\Users\<username>\WebstormProjects\Test\bower.json
- Click OK
Create a Bower manifest file
To create a new manifest file (bower.json):
- Start the built-in terminal
- Run the command bower init
Alternatively create a new file in the root directory of the project named bower.json. It should at least have the following content:
{ “name”: “my-project” }
Run Bower
If the project contains a manifest file (bower.json) install the dependencies:
- Start the built-in terminal
- Run the command bower install
The packages will be downloaded to the bower_components folder.
Add new dependency
To add new dependencies to the project:
- Go to Preferences | JavaScript | Bower
- Search for the package you need in Bower’s registry
- Install it by clicking the Install package button
WebStorm will automatically update the bower.json file by adding the new dependency.
References
- Meet Bower: A Package Manager For The Web: Nice tutorial how to use Bower.
Adventures of a space monkey 