How To Use Bower To Manage The Frontend JS, Html, CSS, Images Components Windows Tricks

Bower is a frontend asset management tool. It can manage frontend javascript, Html, CSS, images files .etc. It is similar to NPM. This article will tell you how to use bower to manage frontend assets with an example.

Table of Contents

1. How To Install Bower.

Bower itself is also an NPM package, so you can run the command npm install -g bower to install it globally.
```
> npm install -g bower

added 1 package, and audited 2 packages in 9s

found 0 vulnerabilities
```

Run the command npm list -g bower to confirm bower is installed successfully.
```
> npm list -g bower
C:\Users\zhaosong\AppData\Roaming\npm
`-- bower@1.8.14
```
Run the command bower -v to see the installed bower version.
```
> bower -v
1.8.14
```

2. How To Use Bower To Install/Uninstall Front End Component.

If you want to record the local bower components that you have installed, you can run the command bower init to create a bower.json file in the current directory.

> bower init
? name browserify
? description
? main file index.js
? keywords
? authors zhaosong <happyzhaosong@gmail.com>
? license ISC
? homepage
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? No

{
  name: 'browserify',
  description: '',
  main: 'index.js',
  authors: [
    'zhaosong <happyzhaosong@gmail.com>'
  ],
  license: 'ISC',
  homepage: '',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

? Looks good? Yes


> dir
......
-a----          6/3/2022   4:40 PM            269 bower.json
......

Then run the command bower install <component-name> –save-dev to install the component in the current directory and save the component info in the bower.json file.

> bower install phaser --save-dev
bower phaser#*              not-cached https://github.com/photonstorm/phaser.git#*
bower phaser#*                 resolve https://github.com/photonstorm/phaser.git#*
bower phaser#*                 ECMDERR Failed to execute "git ls-remote --tags --heads https://github.com/photonstorm/phaser.git", exit code of #128 fatal: unable to access 'https://github.com/photonstorm/phaser.git/': OpenSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443

Additional error details:
fatal: unable to access 'https://github.com/photonstorm/phaser.git/': OpenSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443

If you meet the above error, you can run the command bower search keyword to search its URL where it is saved.

For example, we run the command bower search phaser to search the phaser component and it’s saved URL.

> bower search phaser
Search results:
phaser https://github.com/photonstorm/phaser.git
phaser-official https://github.com/photonstorm/phaser.git
phaser-utils https://github.com/webcaetano/phaser-utils.git
......

Then you can run the command bower install <component-saved-url> –save-dev to install it.

> bower install https://github.com/photonstorm/phaser.git --save-dev
bower phaser#*              not-cached https://github.com/photonstorm/phaser.git#*
bower phaser#*                 resolve https://github.com/photonstorm/phaser.git#*
bower phaser#*                download https://github.com/photonstorm/phaser/archive/v3.55.2.tar.gz
bower phaser#*                   retry Download of https://github.com/photonstorm/phaser/archive/v3.55.2.tar.gz failed with ETIMEDOUT, retrying in 1.9s
bower phaser#*                   retry Download of https://github.com/photonstorm/phaser/archive/v3.55.2.tar.gz failed with ETIMEDOUT, retrying in 3.2s
bower phaser#*                 extract archive.tar.gz
bower phaser#*                resolved https://github.com/photonstorm/phaser.git#3.55.2
bower phaser#^3.55.2           install phaser#3.55.2

phaser#3.55.2 bower_components\phaser

After you installed the bower component in the current directory successfully you can run the command bower list <component-name> in the current directory to confirm the installation. You should run the command in the parent directory of the bower_components folder.

> dir
......
d-----          6/3/2022   4:50 PM                bower_components
......
-a----          6/3/2022   4:50 PM            363 bower.json
......

PS D:\Work\dev2qa.com-example-code\PythonExampleProject\html\browserify-example> bower list phaser
bower check-new     Checking for new versions of the project dependencies...
browserify D:\Work\dev2qa.com-example-code\PythonExampleProject\html\browserify-example
└── phaser#3.55.2 (3.60.0-beta.8 available)

You can also open the bower.json file to see it’s updated content.

{
  "name": "browserify",
  "description": "",
  "main": "index.js",
  "authors": [
    "zhaosong <happyzhaosong@gmail.com>"
  ],
  "license": "ISC",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "devDependencies": {
    "phaser": "https://github.com/photonstorm/phaser.git#^3.55.2"
  }
}

There is also a directory \bower_components\phaser created in the current directory.

If you want to uninstall the bower component from the current directory, you can run the command bower uninstall <component name> in the terminal like below.

> bower uninstall phaser
bower uninstall     phaser
browserify-example> bower list phaser
bower check-new     Checking for new versions of the project dependencies...
browserify D:\Work\dev2qa.com-example-code\PythonExampleProject\html\browserify-example
└── phaser not installed

You can run the command bower -h to list all the bower command optional parameters.

1. How To Install Bower.

2. How To Use Bower To Install/Uninstall Front End Component.

Leave a Comment Cancel Reply