Using Bower from IntelliJ

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:

  1. Choose File | Settings
  2. In the Settings dialog type JavaScript
  3. Search for the entry Bower and click it
  4. 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
  5. 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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s