How to initialize bower in a Web Application

Posted on

This is another article related about bower as a web application dependency manager for adding and installing needed package for the web application itself. So, how to initialize bower  in a web application ?. There are

1. Install bower. It can be read by referring in the following article titled ‘How to Install bower with Example via Command Line’ in this link.

2. After successfully installing bower, check from the command prompt whether the command ‘bower’ can be executed from the command line.

3. If the command ‘bower’ can be executed in the command line, just execute the following command in the command console :

user@hostname:/var/www/html/laravel$ bower init
? name laravel
? description 
? main file 
? keywords 
? authors Myself <myself@me.com>
? license MIT
? 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? Yes

{
  name: 'laravel',
  description: '',
  main: '',
  authors: [
    'Myself <myself@me.com>'
  ],
  license: 'MIT',
  homepage: '',
  private: true,
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'vendor/bower_components',
    'test',
    'tests'
  ]
}

? Looks good? Yes
user@hostname:/var/www/html/laravel$ 

It will then generate a file named bower.json as shown in the following tree output :

user@hostname:/var/www/html/laravel$ tree -L 1
.
├── app
├── artisan
├── bootstrap
├── bower.json
├── composer.json
├── composer.lock
├── config
├── database
├── logs
├── node_modules
├── package.json
├── phpunit.xml
├── public
├── readme.md
├── resources
├── routes
├── server.php
├── storage
├── tests
├── vendor
└── webpack.mix.js

12 directories, 9 files
user@hostname:/var/www/html/laravel$

Another one is by searching in the root folder of a web-based application such as in the context of this article is Laravel :

user@hostname:/var/www/html/laravel$ ls -al | grep bower.json
-rw-rw-r-- 1 user user 392 Sep 10 11:31 bower.json
user@hostname:/var/www/html/laravel$

After the initialization of bower in the root folder of web-based application, it can finally be used for adding and installing a specific package.

In order to have a file named ‘bower.json’, it cannot just be manually initialized by creating an empty file as shown below :

user@hostname:/var/www/html/laravel$ touch bower.json
user@hostname:/var/www/html/laravel$

The content of the file must be most likely in the following structure at minimum :

{
  "name": "my-app",
  "description": "",
  "main": "",
  "authors": [
    "myself@me.com"
  ],
  "license": "MIT",
  "homepage": "",
  "private": true
}

Actually the above content is generated in the file named bower.json upon executing the command ‘bower init’. So, it is not a problem whether it is generated using ‘bower init’ command or it is created using a command to create a new file. As long as the content represents the actual bower configuration to be functioned as a dependency manager for the web-based application associated. Below is the output of a command execution which is trying to add a package using just an empty bower.json file :

user@hostname:/var/www/html/laravel$ bower install bootstrap-sass-official --save
bower EMALFORMED Failed to read /var/www/html/bower.json

Additional error details:
Unexpected end of input
user@hostname:/var/www/html$ 

The above output shown that bower is failed to read the bower configuration file named  bower.json.

Leave a Reply