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

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.

1. How To Install Bower.

  1. 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
  2. Run the command npm list -g bower to confirm bower is installed successfully.
    > npm list -g bower
    C:\Users\zhaosong\AppData\Roaming\npm
    `-- [email protected]
  3. 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.

  1. 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 <[email protected]>
    ? 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 <[email protected]>'
      ],
      license: 'ISC',
      homepage: '',
      ignore: [
        '**/.*',
        'node_modules',
        'bower_components',
        'test',
        'tests'
      ]
    }
    
    ? Looks good? Yes
    
    
    > dir
    ......
    -a----          6/3/2022   4:40 PM            269 bower.json
    ......
  2. 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
  3. If you meet the above error, you can run the command bower search keyword to search its URL where it is saved.
  4. 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
    ......
  5. 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
  6. 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)
  7. You can also open the bower.json file to see it’s updated content.
    {
      "name": "browserify",
      "description": "",
      "main": "index.js",
      "authors": [
        "zhaosong <[email protected]>"
      ],
      "license": "ISC",
      "homepage": "",
      "ignore": [
        "**/.*",
        "node_modules",
        "bower_components",
        "test",
        "tests"
      ],
      "devDependencies": {
        "phaser": "https://github.com/photonstorm/phaser.git#^3.55.2"
      }
    }
  8. There is also a directory \bower_components\phaser created in the current directory.
  9. 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
  10. You can run the command bower -h to list all the bower command optional parameters.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Clicky